[Flutter]ElevatedButtonの形を変更する方法

Flutter

2021.10.17

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

ElevatedButtonの形を変更する方法を紹介します。

方法
1. ElevatedButton.styleFrom
2. ButtonStyle
まとめ

方法

ElevatedButtonの形を変更する方法は、２つあります。

ElevatedButton.styleFrom

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

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

そして、ElevatedButton.styleFromの引数「shape」を使ってButtonの形状を設定します。

ElevatedButton(
          style: ElevatedButton.styleFrom(
            shape:
                RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(10),//角の丸み
             ),
          ),
          onPressed: () {},
          child: Text('Flutter'),
        )

ButtonStyle

もう１つは「ButtonStyle」を使う方法です。

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

そして、ButtonStyleの引数「shape」で、形状を指定します。

ElevatedButton(
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          onPressed: () {},
          child: Text('Flutter'),
        )

ButtonStyleの引数「shape」で形状を指定する場合は、MaterialStatePropertyを使う必要があります。

MaterialStatePropertyは、MaterialStateProperty.all<形>(形)のように指定します。