Slackコミュニティに
無料で参加する
Flutterラボの
プレミアム会員になる
【Flutter】途中までしか色が塗られていない円を作成する
2022.01.30
Containerで作成した円に色を塗るときは、colorプロパティで簡単に設定することができますが、グラデーションを使用すれば途中までの任意の箇所までを塗ることもできるので、その方法を紹介します。
LinearGradientのcolorsとstopsで、どの割合の位置までどの色からどの色へとグラデーションで変化していくかを決めることができるので、colorsの3つの値のうち最初の2つ、stopsの3つの値のうち、最初は0、後の2つを任意の値にすれば途中で色が切り替わったように見せることができます。
Container(
width: 150,
height: 150,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.blue,
Colors.white
],
stops: [
0, 0.3, 0.3
]
)
),
),
Flutterラボ
hatchoutschool
Flutter Daily
Flutterに関する記事を日々更新しています (223本)
【Dart】Stringからint, double, DateTimeに変換する
2020.09.14
【Dart】【Flutter】List型(リスト)の使い方とよく使うメソッドまとめ
2020.09.18
【Dart】【Flutter】DateTime型についてのまとめ
2020.10.01
【Dart】Map型の使い方とよく使うメソッドまとめ
2020.09.13