【Flutter】LinearGradientの使い方 - すらぼうの開発ノート

LinearGradientとは
使い方

LinearGradientとは

api.flutter.dev

LinearGradientはグラデーションカラーを実装するために使用する。 BoxDecoration内のgradientなどに使用されることが多い。

使い方

2色のグラデーションを作成する

画像の様に左下から右上に紫→緑と変化するグラデーションを作成する。コードは次の通り。

Container(
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient( 
      begin: Alignment.bottomLeft, // 色変化の開始位置は左下
      end: Alignment.topRight, // 色変化の終了位置は右上
      colors: <Color>[
        Colors.purple, // 変化の開始色
        Colors.green, // 変化の終了色
      ], 
    ),
  ),
)

beginで開始位置、endで終了位置をそれぞれ指定する。後ほど紹介するように、任意の位置で開始、終了をすることができる。

colorsで指定した通り色が変化していく。 stopsで変化の間隔を指定しない場合、等間隔に色が変化していく。

3色のグラデーションを作成する

画像の様に左下から右上に紫→黄→緑と3色で変化するグラデーションを作成する。コードは次の通り。

Container(
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient( 
      begin: Alignment.bottomLeft, 
      end: Alignment.topRight, 
      colors: <Color>[
        Colors.purple,
        Colors.yellow, // 黄色を追加
        Colors.green, 
      ], 
    ),
  ),
)

表示させる色を増やす場合、colorsにMaterialColorなどのウィジェットを追加する。

2色の間隔を指定したグラデーションを作成する

画像の様に左下から右上に紫→緑と変化するグラデーションを作成する。この時各色の領域は次の様になる。

開始位置から終了位置に向けて0 ~ 40%：紫
開始位置から終了位置に向けて40 ~ 60%：紫から緑のグラデーション
開始位置から終了位置に向けて60 ~ 100%分：緑

コードは次の通り。

Container(
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient( 
      begin: Alignment.bottomLeft, 
      end: Alignment.topRight, 
      colors: <Color>[
        Colors.purple,
        Colors.green, 
      ], 
      stops: [0.4, 0.6], // 変化する領域を指定
    ),
  ),
)

変化させる領域を指定する場合、stopsを指定する。 Listで渡す必要があり、値はdoubleの昇順である必要がある。

任意の開始・終了位置のグラデーションを作成する

画像の様に右上から左下に紫→緑と変化するグラデーションを作成する。コードは次の通り。

Container(
  height: 300,
  decoration: BoxDecoration(
    gradient: LinearGradient( 
      begin: begin: Alignment(0.92, 0.18), // 任意の開始位置
      end: Alignment(0.18, 0.65), // 任意の終了位置
      colors: <Color>[
        Colors.purple,
        Colors.green, 
      ], 
    ),
  ),
)