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

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

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

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

この記事でわかること

OutlinedButtonを円形にカスタマイズする方法
OutlinedButton.styleFromとButtonStyleを使った具体的な設定方法

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

目次閉じる

はじめに
まとめ

はじめに

Flutterでアプリを開発する際、ボタンの形状をカスタマイズすることは非常に重要です。特に、円形のボタンはデザイン性が高く、アプリに洗練された印象を与えることができます。OutlinedButtonを円形にする方法を知っておくと、UIデザインの幅が広がります。

方法1: OutlinedButton.styleFromを使用して円形にする

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  style: OutlinedButton.styleFrom(
    minimumSize: Size(100, 100), // ボタンのサイズを設定
    shape: CircleBorder(), // ボタンの形を円形に設定
  ),
  child: Text('円形ボタン'),
)

CircleBorderを使用して、ボタンを完全な円形に設定。

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

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all<Size>(Size(100, 100)), // ボタンのサイズを設定
    shape: MaterialStateProperty.all<OutlinedBorder>(CircleBorder()), // ボタンの形を円形に設定
  ),
  child: Text('詳細設定の円形ボタン'),
)

MaterialStatePropertyを使用することで、ボタンの状態に応じたスタイル設定が可能。

まとめ

OutlinedButtonを円形にする2つの方法を紹介しました。それぞれの方法には独自の特徴があり、プロジェクトのデザイン要件に応じて選択できます。初心者でも理解しやすいソースコードと共に説明しましたので、ぜひ試してみてください。OutlinedButtonを円形にカスタマイズすることで、アプリのデザインが一層魅力的になるでしょう。

ご質問があれば、どうぞお気軽にお尋ねください。
それでは、Happy Fluttering！

Post Views: 432