[Flutter]Icon(アイコン)の背景色を設定するには？

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

アイコンの背景色を設定する方法を紹介します。

方法

アイコンの背景色を設定する方法は、３つあります。

Ink

１つ目は、Inkを使う方法です。

まず、InkのchildにIconウェジェットを指定します。

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

Ink(
  color: Colors.blue, //背景色
  child: Icon(
    Icons.flutter_dash,
    color: Colors.white,
    size: 200,
  ),
),

Container

２つ目は、Containerを使う方法です。

まず、Containerの引数「child」にIconウェジェットを指定します。

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

Container(
  color: Colors.blue, //背景色
  child: Icon(
    Icons.flutter_dash,
    color: Colors.white,
    size: 200,
  ),
),

Material

３つ目は、Materilaを使う方法です。

まず、Materialの引数「child」にIconウェジェットを指定します。

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

Container(
  color: Colors.blue, //背景色
  child: Icon(
    Icons.flutter_dash,
    color: Colors.white,
    size: 200,
  ),
),

まとめ

Iconの背景色は、次の３つで設定することが出来ます。

• Ink
• Container
• Material