[Flutter]アイコンボタン(IconButton)を角丸(rounded)にするには？

[Flutter]アイコンボタン(IconButton)を角丸にするには？

Flutter

2021.10.22

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

アイコンボタンを角丸にする方法を紹介します。

方法

アイコンボタンを角丸にするには、まず「Container」の引数「child」に「IconButton」を指定します。

次に、Containerウェジェットの引数「decoration」に「BoxDecoration」を指定します。

最後に、BoxDecorationの引数「border」で枠線、引数「borderRadius」で角丸の設定をします。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10), //角の丸み
    border: Border.all(
      color: Colors.blue, //枠線の色
    ),
  ),
  child: IconButton(
    icon: Icon(Icons.check),
    onPressed: () {},
  ),
)