[Flutter]Scaffoldの背景色をグラデーションにするには?

Flutter

どうも、ちょげ(@chogetarou)です。

Scaffoldの背景色をグラデーションにする方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

Scaffoldの背景色をグラデーションにするには、ContainerとScaffoldの引数「backgroundColor」を使います。

まず、ScaffoldをContainerでラップします。

次に、Containerの引数「decoration」にBoxDecorationを指定します。

そして、BoxDecorationの引数「gradient」にグラデーションを指定します。

Container(
  decoration: BoxDecoration(
    gradient: /*グラデーション*/,
  ),
  child: Scaffold(・・・),
);

最後に、Scaffoldの引数「backgroundColor」にColors.transparentを指定します。

Container(
  decoration: BoxDecoration(
    gradient: /*グラデーション*/,
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
  ),
);

これでScaffoldの背景色がグラデーションになります。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Colors.blue,
            Colors.pink,
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(),
      ),
    );
  }

コメント

タイトルとURLをコピーしました