[Flutter]ElevatedButtonを「円」にする方法

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

ElevatedButtonを円にする方法を紹介します。

方法

ElevatedButtonを円にするには、まず「style」に「ElevatedButton.styleFrom」を指定します。

            ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
              style: ElevatedButton.styleFrom(),
            )

次に、ElevatedButton.styleFromの引数「shape」に「CircleBorder」を指定します。

            ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
              style: ElevatedButton.styleFrom(
                shape: CircleBorder(),
              ),
            )

最後に、ElevatedButton.styleFromの引数「minimumSize」で、サイズの設定をします。

            ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
              style: ElevatedButton.styleFrom(
                minimumSize: Size(100, 100),
                shape: CircleBorder(),
              ),
            )

まとめ

ElevatedButtonの「style」に指定する「ElevatedButton.styleFrom」で、ボタンを円にすることが出来ます。