[Flutter]Icon(アイコン)に丸い枠線をつけるには？

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

Iconに丸い枠線をつける方法を紹介します。

方法

Iconに丸い枠線をつける方法は２つあります。

Material

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

Material(
  shape: CircleBorder(
    side: BorderSide(),
  ),
  child: Icon(/*アイコン*/),
)

MaterialのchildにIconを指定し、Materialの引数「shape」で丸い枠線をつける設定をします。

使用例

Material(
  shape: CircleBorder(
    side: BorderSide(),
  ),
  child: Icon(
    Icons.flutter_dash_outlined,
    size: 200,
  ),
)

Container

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

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle, //形を丸に
    border: Border.all(), //枠線をつける
  ),
  child: Icon(/*アイコン*/),
)

ContainerのchildにIconを指定し、Containerの引数「decoration」で形を丸くする設定と枠線をつける設定をします。

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(),
  ),
  child: Icon(
    Icons.flutter_dash_outlined,
    size: 200,
  ),
)

まとめ

Iconに丸い枠線をつけるには、MaterialもしくはContainerを使います。