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ラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)