[Flutter]画面の背景色をグラデーションにするには？

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

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

方法

画面の背景色をグラデーションにするには、Containerを使います。

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

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

そして、Containerの引数「decoraiton」にBoxDecorationを指定します。

BoxDecorationの引数「gradient」にGradientのクラスを指定します。

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(・・・),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: Body(),
  ),
);

これで画面の背景色をグラデーションにできます。

使用例

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