[Flutter]Containerの背景色を設定する方法

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

Containerの背景色を設定する方法を紹介します。

方法

Containerの背景色を設定する方法は２つあります。

引数「color」

１つは、Containerの引数「color」を使う方法です。

具体的な方法としては、引数「color」に背景色を指定します。

Container(
  color: /*背景色*/,
),

以下は、使用例です。

Container(
  color: Colors.yellow,
  child: Center(child: Text('Container')),
  height: 200,
  width: 200,
),

BoxDecoration

もう１つは、BoxDecorationを使う方法です。

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

そして、BoxDecorationの引数「color」に背景色を設定します。

Container(
  decoration: BoxDecoration(
    color: /*背景色*/,
  ),
),

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    color: Colors.pink,
  ),
  child: Center(child: Text('Container')),
  height: 200,
  width: 200,
),

まとめ

Containerの背景色は、次の２つの方法で設定することが出来ます。