MENU

【Flutter】Material3の影響で丸くなったボタンを四角にする方法

Flutter
記事内に商品プロモーションが含まれる場合があります

Material3デザインでは、通常、ボタンが角丸になるようにスタイルが適用されます。

これをもう少し四角にしたいときは、ボタンのスタイルのshapeプロパティを変更することができます。

目次

FilledButtonを使っている場合

FilledButton(
  ・・・省略

  style: FilledButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0), // 任意の角丸さを指定
    ),
  ),
),

ElevatedButtonを使う場合

ElevatedButton(
  ・・・省略

  style: ElevatedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0), // 任意の角丸さを指定
    ),
  ),
),

結果

shapeプロパティを正しく設定することで次のように角を四角にすることができました。

Flutter
Share

Comment

コメントする

目次