どうも、ちょげ(@chogetarou)です。
Scaffoldの背景色をグラデーションにする方法を紹介します。
方法
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(),
),
);
}
コメント