【flutter】インジゲーターをおしゃれにしてみた

こんにちは！
今回はおしゃれなインジゲータを表示できたので、そちらの方法を紹介したいと思います。
最後まで読んでいただけると嬉しいです！

使用したパッケージ

実装内容

実装コード

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,
                ),
              ),
            ),
          ],
        ),

終わり

今回は以上になります！
今回も最後まで読んでいただき、ありがとうございました！
では、また次の記事で〜！