Flutter：SweepGradient(グラデーション)を使用した円弧ゲージで色の境目が見えしまう問題

Question

実現したいこと

自然なグラデーションが掛かった円弧ゲージを実装したい。

発生している問題・分からないこと

予め定義してあるSweepGradientの情報をインプットに、CustomPainterを用いて円弧ゲージの実装を行なってみたが、一部だけくっきりと色同士の境界線が見えてしまっている。
何故自然なグラデーションではなく、境目が見えてしまうようになっているのか、原因及び解決策が知りたい。

該当のソースコード

final gradient = SweepGradient(
  colors: [
    Color(0xffF2E5BF),
    Color(0xffF2E5BF),
    Color(0xffFFFDF6),
    Color(0xff948979),
  ],
  stops: [
    0.2,
    0.25, 
    0.4,
    0.6, 
  ],
  transform: GradientRotation(1.57),
);


~省略~

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // GaugePainter
          Positioned(
            left: 368,
            top: 88,
            child: CustomPaint(painter: GaugePainter(), size: Size(730, 730)),
          ),  
        ],
      ),
    );
  }

class GaugePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    const strokeWidth = 18.0;
    final center = Offset(size.width / 2, size.height / 2);
    final radius = (size.width / 2) - (strokeWidth / 2);
    final rect = Rect.fromCircle(center: center, radius: radius);

    final paint =
        Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = strokeWidth
          ..strokeCap = StrokeCap.butt
          ..shader = gradient.createShader(
            Rect.fromCircle(center: center, radius: radius),
          );
    // 色同士の境界線が見えてしまう
    canvas.drawArc(rect, _degreeToRad(0), _degreeToRad(360), false, paint);
  }

  double _degreeToRad(double degree) => degree * pi / 180;

  @override
  bool shouldRepaint(GaugePainter oldDelegate) => false;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

グラデーションの変数(gradient)の中身に原因があるのか、もしくはその他の実装部分に原因があるのかが知りたい。
あまり変数(gradient)の中身は変更したくはないが、そこで設定されている数値(stop)や色が原因の場合は教えていただきたいです。

補足

特になし

Answer 1

SweepGradientの設定方法に問題がある。
グラデーション作成のためのデータの最後に、1行目の色を割り当て、それ用のstopsの値を1.0にする。

https://api.flutter.dev/flutter/painting/SweepGradient-class.html
リファレンスのサンプルの中のコメントが参考になるかな。

開始角度がstopsの0、終了角度がstopsの1に該当し、その角度の間をどういった色で遷移させていくのかというのが仕様になる。

提示された例ではColor(0xff948979)の色が0.6(60%)の場所になるようにするという指示で、それ以降の色の指定がないから100%(終了角度)までColor(0xff948979)の色を続けて使用するという指定になる。
そのため、開始角度の部分で0番目の色Color(0xffF2E5BF)に急に切り替わるといった塗り方になった。

修正後の内容。

final gradient = SweepGradient(
  colors: [
    Color(0xffF2E5BF),
    Color(0xffF2E5BF),
    Color(0xffFFFDF6),
    Color(0xff948979),
    Color(0xffF2E5BF),  // 追加
  ],
  stops: [
    0.2,
    0.25,
    0.4,
    0.6,
    1.0,    // 追加
  ],
  transform: GradientRotation(1.57),
);