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

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

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

方法

MaterialButtonを角丸にするには、引数「shape」に「RoundedBorderRectangle」を指定します。

そして、指定したRoundedBorderRectangleクラスの引数「borderRadius」で、角の丸みを設定することで、MaterialButtonを角丸にすることが出来ます。

MaterialButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), //角の丸み
  ),
  color: Colors.blue,
  child: Text(
    'Button',
    style: TextStyle(color: Colors.white),
  ),
  onPressed: () {},
),

角の丸みは、BorderRadiusクラスで指定します。

全ての角を丸くするならば、「BorderRadius.circular(値)」で、角の丸みを設定します。

まとめ

MaterialButtonを角丸にするには、引数「shape」にRoundedRectangleBorderを指定します。

そして、RoundedBorderの引数「borderRadius」で、角の丸みを設定します。