[Flutter]丸いアイコンのボタンを作る方法

Flutter

2021.10.16

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

丸い形をしたアイコンのボタンを作る方法を紹介します。

方法
まとめ

方法

丸い形をしたアイコンのボタンを作る方法は、３つあります。

ElevatedButton.styleFrom

１つ目は、ElevatedButton.styleFromを使う方法です。

ElevatedButtonの「child」にアイコンを指定し、引数「style」に「ElevatedButton.styleFrom」を指定します。

そして、ElevatedButton.styleFormの引数「shape」に「CircleBorder」を指定します。

ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape: CircleBorder(),
          ),
          onPressed: () {},
          child: Icon(Icons.dashboard),
        )

ButtonStyle

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

Buttonの引数「style」に、ButtonStyleクラスを指定します。

そして、ButtonStyleクラスの引数「shape」に「」

ElevatedButton(
          style: ButtonStyle(
            shape: MaterialStateProperty.all<CircleBorder>(
              CircleBorder(),
            ),
          ),
          onPressed: () {},
          child: Icon(Icons.dashboard),
        )

MaterialButton

3つ目は、MaterialButtonを使う方法です。

MaterialButtonのchildにアイコン、shapeにCircleBorderを指定することで、丸いアイコンにすることが出来ます。

MaterialButton(
          onPressed: () {},
          child: Icon(
            Icons.dashboard,
          ),
          padding: EdgeInsets.all(16),//パディング
          color: Colors.blue, //背景色
          textColor: Colors.white, //アイコンの色
          shape: CircleBorder(),//丸
        )