[Flutter]ボタンを円にする方法

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

ボタンを円にする方法を紹介します。

方法
1. MaterialButton
2. ElevatedButton
まとめ

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

ボタンを円にするには、２つの方法があります。

MaterialButton

1つは、MaterialButtonを使った方法です。

MaterialButtonの引数「shape」に、CircleBorderを指定することで、ボタンを丸くすることが出来ます。

MaterialButton(
        color: Colors.blue,
        shape: CircleBorder(),
        onPressed: () {},
        child: Padding(
          padding: const EdgeInsets.all(100),
          child: Text(
            'A circle button',
            style: TextStyle(color: Colors.white, fontSize: 24),
          ),
        ),
)

ElevatedButton

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

「ElevatedButton.styleFrom」の「shape」に「CirclerBorder」を指定することで、円のElevatedButtonを作ることが出来ます。

            ElevatedButton(
              onPressed: () {},
              child: Text('Button'),
              style: ElevatedButton.styleFrom(
                minimumSize: Size(100, 100),//サイズ
                shape: CircleBorder(), //円の形
              ),
            )