[Flutter]MaterialButtonの形状を設定する方法

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

MaterialButtonの形状を設定する方法を紹介します。

方法

MaterialButtonの形状を設定するには、引数「shape」を使います。

「shape」に指定するクラスによって、MaterialButtonの形を変えることが出来ます。

主に指定するクラスは、次のようなものです。

• CircleBorder：丸
• RoundedRectangleBorder : 角丸の四角形

それぞれのクラスを「shape」に指定し、必要ならばその引数で、形の設定をします。

以下は、RoundedRectangleBorderを使った例です。

child: MaterialButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20), //角の丸み
    side: BorderSide(color: Colors.red), //枠線の設定
  ),
  color: Colors.blue,
  child: Text(
    'Button',
    style: TextStyle(color: Colors.white),
  ),
  onPressed: () {},
),

RoundedRectangleBorderは、デフォルトでは、ただの四角形なので、引数「borderRadius」で角の丸みを設定する必要があります。

まとめ

MaterialButtonの形状を指定するには、引数「shape」に形を指定できるクラスを設定します。

そして、設定したクラスの引数で細かい形状の指定をします。