【Flutter】画面全体に背景色を設定する

やりたいこと

画面全体に背景色を設定したい。

実装

最初にやったのはrootのWidgetにContainerを設定してcolorプロパティに設定しました。
画面に表示するWidgetはContainerのchildプロパティに設定すれば良いと思いましたが、結果はこうなりました。

sample.dart

class ScreenView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.orange,
        child: Column(
          children: [
            Text('あいうえお'),
          ],
        ),
      ),
    );
  }
}

これだとchildのWidgetによって親のContainerのサイズが決まってしまうので、画面全体に背景色を設定できません。

Containerにwidthとheightを設定して画面全体の大きさにすれば解決できそうですが、クールではありません。

結論ScaffoldのbackgroundColorを使えば画面全体に背景色を設定することができました。

sample.dart

class ScreenView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.orange, // 背景色設定
      appBar: AppBar(),
      body: Container(
        child: Column(
          children: [
            Text('あいうえお'),
          ],
        ),
      ),
    );
  }
}

以上です。