【Flutter】Containerを途中まで塗りつぶす

環境

• Android Studio： Flamingo　2022.2.1
• Flutter: 3.7.12

Containerを途中まで塗りつぶす方法

グラデーションを利用すれば、途中まで塗ったように表現することができる。

ポイントは、colorsで最初の2色までを同じ色、あとの1色を別の色にする。
stopsで最初は0にして、残りは、任意の同じ値を設定する

// begin, endでグラデーションの方向を決める。今回は上から下へ
Container(
  width: 100,
  height: 100,
  margin: const EdgeInsets.all(8),
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: [
        Colors.white,
        Colors.white,
        Colors.blue,
      ],
      stops: [0, 0.3, 0.3],
    ),
  ),
);

応用？

塗りつぶす割合をいい感じに計算すれば、
進捗率を表現することができるのでは？

0%と100%はグラデーションしなくてもいいが…

例：

100% -> stops: [0, 0, 0]
70%  -> stops: [0, 0.3, 0.3]
50%  -> stops: [0, 0.5, 0.5]
30%  -> stops: [0, 0.7, 0.7]
0%   -> stops: [0, 1.0, 1.0]

参考サイト