Flutterのボタンを作ろう！ElevatedButton・IconButtonの活用法を初心者向けに解説
生徒
「Flutterでアプリを作っているのですが、画面にボタンを表示したいです。どんな種類があるんですか？」
先生
「Flutterでは、ElevatedButtonやIconButtonなど、いくつかのボタンウィジェットが用意されています。」
生徒
「それぞれどう違って、どうやって使えばいいのか教えてほしいです！」
先生
「それでは、Flutterの基本的なボタンの使い方を一緒に学んでいきましょう！」
1. Flutterでボタンを作る基本：ElevatedButtonとは？
Flutterでは、ユーザーのタップ操作に反応するためにElevatedButtonを使います。このボタンは、ボタンらしい立体的な影があるデザインで、視認性も高く初心者におすすめのボタンです。
ElevatedButtonは、以前のRaisedButtonの後継として、Flutter 2.0以降で推奨されています。アプリ画面の中で目立つようなアクション（送信・決定・登録など）に適しています。
2. ElevatedButtonの基本コードと実装例
FlutterでElevatedButtonを使うには、次のように記述します。
ElevatedButton(
onPressed: () {
print("ボタンが押されました");
},
child: Text('クリック'),
)
onPressedに関数を指定すると、ユーザーがタップしたときに処理が実行されます。何も指定しないとボタンは無効になります。
3. ボタンの色やサイズをカスタマイズしよう
ボタンのデザインはstyleプロパティでカスタマイズできます。色・サイズ・形状などを柔軟に変更できます。
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blue,
onPrimary: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
onPressed: () {
print("カスタムボタンが押されました");
},
child: Text('カスタム'),
)
primaryは背景色、onPrimaryは文字の色を指定します。paddingでボタン内の余白を調整し、shapeで角の丸みを設定できます。
Flutterを「実務レベル」で使えるようになりたい人や、 iPhone / Android両対応アプリ開発の流れをまとめて学びたい人には、 定番の実践書がこちらです。
Flutter実践開発をAmazonで見る※ Amazon広告リンク
4. アイコン付きのボタンを作る：IconButtonとは？
IconButtonは、文字ではなくアイコンだけで操作を示すボタンです。例えば「お気に入り」「削除」「検索」などの動作に適しています。
ボタンの中にIconsを指定して、視覚的に操作を伝えることができます。よくあるのは、ヘッダーに置く検索アイコンなどです。
5. IconButtonの基本コードと使い方
IconButton(
icon: Icon(Icons.favorite),
color: Colors.red,
iconSize: 32,
onPressed: () {
print("お気に入りボタンが押されました");
},
)
iconに表示するアイコン、colorで色、iconSizeでサイズを設定します。onPressedはタップ時の処理です。
6. IconButtonとTextを組み合わせるには？
アイコンと文字を両方使いたい場合は、TextButton.iconやElevatedButton.iconを使います。
ElevatedButton.icon(
onPressed: () {
print("アイコン付きボタンが押されました");
},
icon: Icon(Icons.send),
label: Text('送信'),
)
このようにすることで、アイコンと文字を並べたボタンが簡単に作成できます。ユーザーにも直感的に伝わりやすく、UIのアクセシビリティも向上します。
7. Flutterのボタンでよくあるエラーと対処法
Flutterでボタンを使う際によくあるエラーとして、「onPressedがnullでボタンが反応しない」や「アイコンが表示されない」などがあります。
その場合は、次のような点を確認しましょう：
- 関数を
onPressedに正しく設定しているか - アイコンが
Iconsに含まれているものか - サイズや色が原因で見えなくなっていないか
デバッグ出力でprint()を活用すれば、簡単にボタンの動作を確認できます。
8. Flutterでボタンを活用してUIをもっと魅力的に
FlutterのElevatedButtonとIconButtonを使いこなすことで、モバイルアプリの操作性とデザイン性を高めることができます。
さらに、テーマと組み合わせることで、アプリ全体の統一感あるボタン設計も可能です。例えばTheme.of(context).textThemeやElevatedButtonThemeを使って、グローバルにデザインを適用できます。
最初は小さなカスタマイズから始めて、FlutterのUI設計に少しずつ慣れていきましょう。Flutterは初心者にも扱いやすく、ドキュメントも豊富なので学習がスムーズです。
この記事を読んだ人からの質問
