![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- 各ボタンウィジェットの基本的な用途と特徴
- 各ウィジェットの実装方法とサンプルコード
- ウィジェットごとのカスタマイズのポイント
開発環境
- Dart 3.0.0
- Flutter 3.10.0
![](https://memoriainc.com/wp-content/uploads/2024/02/【2024年最新】スマホアプリ開発会社がオススメするFlutterで使うべきウィジェットTop-10-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/02/【2024年最新】スマホアプリ開発会社がオススメするFlutterで使うべきウィジェットTop-10-300x169.jpg)
ElevatedButton
説明
ElevatedButton
は、マテリアルデザインに基づいた立体感のあるボタンウィジェットです。主に注目を引くアクションや機能に使用されます。
特徴
- 影を伴う立体的なデザイン
- ボタンの背景色や形状をカスタマイズ可能
サンプルコード
ElevatedButton(
onPressed: () {
// ボタンをタップした時のアクション
},
child: Text('Elevated Button'),
)
このコードは、ElevatedButton
を作成し、タップすると何らかのアクションを起こす基本的な使用法を示しています。onPressed
プロパティには、ボタンがタップされた時に実行される関数を設定します。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】ElevatedButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】ElevatedButtonを簡単に作成-461x1024.png)
![【Flutter】ElevatedButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】ElevatedButtonを簡単に作成-461x1024.png)
TextButton
説明
TextButton
は、テキストのみを表示するシンプルなボタンウィジェットです。主にフォームの送信やダイアログの閉じるボタンなど、軽微なアクションに適しています。
特徴
- ボーダーや背景色がないシンプルなデザイン
- テキストのスタイルを簡単にカスタマイズ可能
サンプルコード
TextButton(
onPressed: () {
// アクション
},
child: Text('Text Button'),
)
この例では、TextButton
を使用してテキストベースのボタンを作成しています。onPressed
には、ボタンが押されたときの動作を定義します。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】TextButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】TextButtonを簡単に作成-461x1024.png)
![【Flutter】TextButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】TextButtonを簡単に作成-461x1024.png)
OutlinedButton
説明
OutlinedButton
は、枠線が特徴のボタンウィジェットで、内部にテキストやアイコンを含むことができます。主に代替的なアクションや二次的な選択肢を提示する際に使用されます。
特徴
- 枠線によるシンプルながら目立つデザイン
- 枠線やテキストの色をカスタマイズ可能
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Scaffold(body: MyOutlinedButton())));
class MyOutlinedButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: OutlinedButton(
onPressed: () => print('OutlinedButton pressed'),
child: Text('Tap Me'),
style: OutlinedButton.styleFrom(
primary: Colors.blue,
side: BorderSide(color: Colors.blue),
),
),
);
}
}
MaterialApp
ウィジェットとScaffold
ウィジェットを使ってアプリの基本的な構造を構築し、body
プロパティにMyOutlinedButton
ウィジェットを配置しています。MyOutlinedButton
はStatelessWidget
を継承しており、中央にOutlinedButton
を表示します。このボタンは、タップされたときにコンソールにメッセージを出力します。OutlinedButton.styleFrom
メソッドを使用して、ボタンのプライマリカラーとボーダーのスタイルをカスタマイズしています。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】OutlinedButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】OutlinedButtonを簡単に作成-461x1024.png)
![【Flutter】OutlinedButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】OutlinedButtonを簡単に作成-461x1024.png)
IconButton
説明
IconButton
は、アイコンを表示するためのボタンウィジェットです。ツールバーやアプリバー内でよく使用されます。
特徴
- アイコンのみを表示するコンパクトなデザイン
- アイコンのサイズや色をカスタマイズ可能
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Scaffold(body: MyIconButton())));
class MyIconButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: IconButton(
icon: Icon(Icons.alarm),
onPressed: () => print('IconButton pressed'),
),
);
}
}
このコードは、MaterialApp
とScaffold
ウィジェットを使ってアプリケーションの基本構造を設定し、Scaffold
のbody
プロパティにCenter
ウィジェットを配置しています。Center
ウィジェットの中にIconButton
を設置し、icon
プロパティにIcons.alarm
アイコンを設定しています。onPressed
プロパティには、ボタンがタップされたときに実行されるコールバック関数を定義し、ここでは単にコンソールにメッセージを出力します。
IconButton
は、アイコンを表示するボタンであり、UI上でのアイコンベースのアクションを提供する際に便利です。アイコンの種類、色、サイズなどはカスタマイズ可能で、アプリケーションのデザインに合わせて調整できます。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】IconButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】IconButtonを簡単に作成-461x1024.png)
![【Flutter】IconButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】IconButtonを簡単に作成-461x1024.png)
アイコンボタンとテキストボタンにご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】アイコンボタンIconButtonと文字列ボタンTextButtonを簡単に実装し、サイズを変更するまでの完全ガイド!-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】アイコンボタンIconButtonと文字列ボタンTextButtonを簡単に実装し、サイズを変更するまでの完全ガイド!-300x169.jpg)
FloatingActionButton
説明
FloatingActionButton
は、アプリケーションの主要なアクションを促すためにデザインされた丸いアイコンボタンです。通常、画面の下部に浮かぶ形で配置されます。
特徴
- 目立つ丸い形状
- 一般的にはアプリのメインアクションに使用される
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Scaffold(floatingActionButton: MyFloatingActionButton())));
class MyFloatingActionButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: () => print('Floating Action Button pressed'),
child: Icon(Icons.add),
backgroundColor: Colors.green,
);
}
}
MaterialApp
とScaffold
ウィジェットを使ってアプリケーションの基本構造を構築しており、Scaffold
のfloatingActionButton
プロパティにカスタムのFloatingActionButton
ウィジェットを配置しています。FloatingActionButton
には、onPressed
コールバックでコンソールにメッセージを出力するアクションを定義しており、child
プロパティにはIcons.add
アイコンを設定して、ボタンにアイコンを表示しています。また、backgroundColor
プロパティを使用してボタンの背景色をカスタマイズしています。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】FloatingActionButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】FloatingActionButtonを簡単に作成-461x1024.png)
![【Flutter】FloatingActionButtonを簡単に作成](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】FloatingActionButtonを簡単に作成-461x1024.png)
DropdownButton
説明
DropdownButton
は、ドロップダウンメニューを表示するためのウィジェットで、複数の選択肢から一つを選ぶインターフェイスを提供します。
特徴
- 複数の選択肢からユーザーが一つを選ぶことができる
- 選択肢のリストをカスタマイズ可能
サンプルコード
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Scaffold(body: MyDropdown())));
class MyDropdown extends StatefulWidget {
@override
_MyDropdownState createState() => _MyDropdownState();
}
class _MyDropdownState extends State<MyDropdown> {
String _selected = 'りんご';
@override
Widget build(BuildContext context) {
return Center(
child: DropdownButton<String>(
value: _selected,
onChanged: (value) => setState(() => _selected = value!),
items: <String>['りんご', 'みかん', 'ぶどう'].map((String value) {
return DropdownMenuItem<String>(value: value, child: Text(value));
}).toList(),
),
);
}
}
アプリケーションが起動するとMaterialApp
ウィジェットを含む簡単なUIを構築します。Scaffold
ウィジェットを使用して基本的なアプリケーションの構造を提供し、そのbody
プロパティにカスタムウィジェットMyDropdown
を配置しています。MyDropdown
クラスはStatefulWidget
を継承しており、選択されたドロップダウンアイテムの状態を管理します。ユーザーがドロップダウンメニューからアイテムを選択すると、その選択は_selected
変数に保存され、ウィジェットが適切に更新されます。
動作確認
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
それでは実際の動作を見てみましょ〜
![【Flutter】DropdownButtonを簡単に作成_ボタン押下前](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】DropdownButtonを簡単に作成_ボタン押下前-461x1024.png)
![【Flutter】DropdownButtonを簡単に作成_ボタン押下前](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】DropdownButtonを簡単に作成_ボタン押下前-461x1024.png)
![【Flutter】DropdownButtonを簡単に作成_ボタン押下後](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】DropdownButtonを簡単に作成_ボタン押下後-461x1024.png)
![【Flutter】DropdownButtonを簡単に作成_ボタン押下後](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】DropdownButtonを簡単に作成_ボタン押下後-461x1024.png)
ボタンウィジェットについてもっと知りたいという方は、以下個人的に自信作の記事をぜひ!
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】簡単にボタンElevatedButtonを作成し、中央Center、上下左右に配置する方法-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】簡単にボタンElevatedButtonを作成し、中央Center、上下左右に配置する方法-300x169.jpg)
まとめ
いかがでしたでしょうか?この記事を通じて、ElevatedButton、TextButton、OutlinedButton、IconButton、FloatingActionButton、DropdownButtonの基本的な特徴、使用方法、そしてカスタマイズの方法について理解を深めることができたでしょう。効果的なUI設計にこれらのウィジェットを活用して、使いやすく、見た目にも魅力的なFlutterアプリケーションを開発してください。
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
![](https://memoriainc.com/wp-content/uploads/2024/01/icon_kuma-e1705915366290-150x150.png)
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不可にしプログレスバーを表示する方法を徹底解説-300x169.jpg)
![](https://memoriainc.com/wp-content/uploads/2024/02/【Flutter】ボタン押下時文字列を変更・ボタン押下後非同期処理中は操作不可にしプログレスバーを表示する方法を徹底解説-300x169.jpg)
コメント
コメント一覧 (4件)
[…] 【Flutter】主要6ボタンウィジェット(Elevated、Text、Outlined、Icon、Floating、Dro… […]
[…] 【Flutter】主要6ボタンウィジェット(Elevated、Text、Outlined、Icon、Floating、Dro… […]
[…] 【Flutter】主要6ボタンウィジェット(Elevated、Text、Outlined、Icon、Floating、Dro… […]
[…] 【Flutter】主要6ボタンウィジェット(Elevated、Text、Outlined、Icon、Floating、Dro… […]