こんにちは!
今回はおしゃれなインジゲータを表示できたので、そちらの方法を紹介したいと思います。
最後まで読んでいただけると嬉しいです!
使用したパッケージ
実装内容
実装コード
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// AnimatedRadialGaugeウィジェットは、円形のゲージを表示します。
AnimatedRadialGauge(
//アニメーションの実行時間を7秒に設定します。
duration: const Duration(seconds: 7),
curve: Curves.elasticOut,
radius: 100,
value: value,
axis: const GaugeAxis(
min: 0,
max: 100,
degrees: 300,// ゲージの描画範囲を300度に設定します。
style: GaugeAxisStyle(
thickness: 20,
background: Color(0xFFDFE2EC),
segmentSpacing: 4,
),
segments: [
GaugeSegment(
from: 0,
to: 33.3,
color: Color(0xFFD9DEEB),
cornerRadius: Radius.zero,
),
GaugeSegment(
from: 33.3,
to: 66.6,
color: Color(0xFFD9DEEB),
cornerRadius: Radius.zero,
),
GaugeSegment(
from: 66.6,
to: 100,
color: Color(0xFFD9DEEB),
cornerRadius: Radius.zero,
),
],
),
//インジゲーターの下に表示される数字
builder: (context, child, value) => RadialGaugeLabel(
value: value,
style: const TextStyle(
color: Colors.black,
fontSize: 46,
fontWeight: FontWeight.bold,
),
),
),
],
),
終わり
今回は以上になります!
今回も最後まで読んでいただき、ありがとうございました!
では、また次の記事で〜!