[Flutter]ElevatedButtonを角丸にするには？

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

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

方法

ElevatedButtonを角丸にするには、まず引数「style」に、「ElevatedButton.styleFrom」を指定します。

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

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

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

最後に、RoundedRectangleBordeの引数「borderRadius」に角丸の設定をします。

            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              child: Text('Button'),
            )

角の丸み具合は、「BorderRadius.circular()」の引数で設定します。

まとめ

ElevatedButtonを角丸にするには、「ElevateButton.styleFrom」を使います。

ElevatedButton.styleFromクラスの引数「shape」にRoundedRectangleBorderを指定し、角丸の設定をします。