[解決済み] Flutterで丸みを帯びたボタン/border-radius付きボタンを作成する

質問

現在、FlutterでAndroidアプリを開発中です。丸みを帯びたボタンを追加したいのですが、どうすればよいでしょうか？

どのように解決するのですか？

1. 解決策の概要

FlatButton と RaisedButton は非推奨です。

そのため shape の中に配置された style プロパティを使用します。 TextButton と ElevatedButton .

Flutter 2.0からいくつか変更点があります。

• style : プロパティタイプが次のように変更されました。 ButtonStyle
• shape : プロパティタイプは次のように変更されました。 MaterialStateProperty<T>

2. 丸いボタン

内部 style プロパティが存在します。 shape プロパティを使用します。

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(18.0),
      side: BorderSide(color: Colors.red)
    )
  )
)

四角いボタン

四角いボタンには ElevatedButton などを追加します。

style: ButtonStyle(
  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
    RoundedRectangleBorder(
      borderRadius: BorderRadius.zero,
      side: BorderSide(color: Colors.red)
    )
  )
)

完成例

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    TextButton(
      child: Text(
        "Add to cart".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        padding: MaterialStateProperty.all<EdgeInsets>(EdgeInsets.all(15)),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(18.0),
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    ),
    SizedBox(width: 10),
    ElevatedButton(
      child: Text(
        "Buy now".toUpperCase(),
        style: TextStyle(fontSize: 14)
      ),
      style: ButtonStyle(
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
        backgroundColor: MaterialStateProperty.all<Color>(Colors.red),
        shape: MaterialStateProperty.all<RoundedRectangleBorder>(
          RoundedRectangleBorder(
            borderRadius: BorderRadius.zero,
            side: BorderSide(color: Colors.red)
          )
        )
      ),
      onPressed: () => null
    )
  ]
)