【Flutter】OutlinedButtonを角丸にする2つの方法

2024年7月28日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

OutlinedButtonを角丸にカスタマイズする方法
各方法の特徴と適用例

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

Flutterを使ってアプリを開発する際、UIの細かいカスタマイズは重要です。OutlinedButtonは頻繁に使用されるボタンの一つであり、そのデザインを洗練させるために角を丸くすることが求められることがよくあります。本記事では、OutlinedButtonを角丸にする2つの方法を紹介します。

方法1: OutlinedButton.styleFromを使用して角丸にする

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  style: OutlinedButton.styleFrom(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20), // 角の丸みを設定
    ),
  ),
  child: Text('角丸ボタン'),
)

OutlinedButton.styleFromを使用することで、簡単に角を丸くカスタマイズ可能。

方法2: ButtonStyleを使用して詳細なカスタマイズ

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(30), // 角の丸みを設定
      ),
    ),
  ),
  child: Text('詳細設定の角丸ボタン'),
)

デザインの自由度が高く、複雑なカスタマイズに適しています。