Flutterで背景をグラデーションで表示します。

まずは、AppBarflexibleSpaceを追加します。

また、flexibleSpaceContainerを設定します。

appBar: AppBar(
  flexibleSpace: Container(),
  title: Text(widget.title),
),

Container内で、decorationBoxDecorationを設定します。

さらに、BoxDecoration内でgradientLinearGradientを設定します。

appBar: AppBar(
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(),
    ),
  ),
  title: Text(widget.title),
),

LinearGradient内で色を指定するために、Colorsを設定します。

今回は、グラデーションの開始をredAccent、終了をorangeAccentにしました。

appBar: AppBar(
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.redAccent, Colors.orangeAccent],
      ),
    ),
  ),
  title: Text(widget.title),
),

一通り完成したので、画面を確認すると、

image2

AppBarの背景がグラデーションになりました。

ブログ一覧