[Flutter]Icon(アイコン)に四角の枠線をつけるには？

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

Iconに四角の枠線をつける方法を紹介します。

方法

Iconに四角の枠線をつける方法は、２つあります。

Material

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

まず、IconをMaterialのchildに指定します。

次に、MaterialのBorderにRoundedRectangleBorderを指定します。

Material(
  shape: RoundedRectangleBorder(),
  child: Icon(/*アイコン*/),
)

最後に、RoundedRectangleBorderの引数「side」にBoderSideを指定します。

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

これでIconに四角の枠線がつきます。

使用例

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

Container

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

まず、IconをContainerのchildに指定します。

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

Container(
  decoration: BoxDecoration(),
  child: Icon(/*アイコン*/),
)

最後に、BoxDecorationの引数「border」に「Border.all()」を指定します。

Container(
  decoration: BoxDecoration(
    border: Border.all(),
  ),
  child: Icon(/*アイコン*/),
)

これでアイコンに四角の枠線をつきます。

使用例

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

まとめ

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