[Flutter]Buttonを角丸にする方法

Flutter

2021.10.12

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

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

方法
まとめ

方法

Buttonを角丸にするには、ButtonStyleの引数「shape」を使います。

具体的には、Buttonが持つ引数「style」に指定する「ButtonStyleクラス」の「shape」に角丸を指定します。

ElevatedButton(
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20), //丸み具合
              ),
            ),
          ),
          onPressed: () {},
          child: Text('Flutter'),
        ),

角丸の形は、RuoundedRectangleBorderクラスで設定します。

ただ、ButtonStyleの引数「shape」に指定する場合は、MaterialStateProperty.all<RoudedRectangleBorder>()の引数に指定します。

そして、指定するRoudedRectangleBorderクラスの「borderRadius」で角の設定をします。

MaterialStateProperty.all<RoudedRectangleBorder>()をわざわざ使うのは、ButtonStyleの引数「shape」の型が「MaterialStateProperty」型だからです。

「shape」だけでなく、ButtonStyleの型は基本的に、MaterialStateProperty型です。

なので、ButtonStyleの引数を指定するときは、基本的に「MaterialStateProperty」で橋渡しとして使います。