Flutter アイコンボタン(IconButton)を角丸にするサンプル

2023年9月24日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
borderRadius: BorderRadius.circular(xxx),
BoxDecorationの引数「borderRadius」で角丸の設定をします。

作成方法
1.「Container」の引数「child」に「IconButton」を指定します。
2.Containerウェジェットの引数「decoration」に「BoxDecoration」を指定します。
3.BoxDecorationの引数「border」で枠線、引数「borderRadius」で角丸の設定をします。

サンプルコード

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

Posted by arkgame