はじめに
FlutterのshowDialogは、ユーザーとアプリケーションの間で対話を行うために使用されるポップアップウィンドウ（モーダルダイアログ）を表示する機能です。初心者でも理解しやすいように、基本的な使い方から応用的な利用例まで網羅的に解説します。
showDialogの概要
showDialogは、モーダルウィンドウとして現在の画面の上に表示される小さなポップアップを作成します。ユーザーがこれに応答するまでアプリは操作をブロックします。
主な用途
- ユーザーへの確認（例: 削除確認）
- エラーや警告の表示
- カスタムフォームの入力
- 簡単な選択肢の提示
基本構文
以下はshowDialogの基本的な構文です。
Dart
showDialog(
context: context, // ダイアログを表示するコンテキスト
builder: (BuildContext context) {
return AlertDialog( // ダイアログの内容
title: Text("タイトル"),
content: Text("メッセージ内容をここに記載します。"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(); // ダイアログを閉じる
},
child: Text("OK"),
),
],
);
},
);
主なプロパティ
- context
BuildContextを指定します。通常はウィジェットのcontextを使用します。 - builder
表示するダイアログのUIを返す関数を指定します。 - barrierDismissible（オプション）
デフォルトはtrueで、ユーザーがダイアログ外をタップして閉じることを許可します。これをfalseに設定すると、ダイアログ外をタップしても閉じません。
AlertDialogのカスタマイズ
Flutterでは、AlertDialogを使用して標準的なダイアログを簡単に作成できます。
基本例
Dart
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("削除しますか？"),
content: Text("この操作は元に戻せません。"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(); // ダイアログを閉じる
},
child: Text("キャンセル"),
),
TextButton(
onPressed: () {
// 削除処理を追加
Navigator.of(context).pop();
},
child: Text("削除"),
),
],
);
},
);
カスタムダイアログの作成
AlertDialogの代わりにDialogや完全にカスタムなウィジェットを使用して、自由なデザインのダイアログを作成できます。
カスタムウィジェットを使用した例
Dart
showDialog(
context: context,
builder: (BuildContext context) {
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("カスタムダイアログ", style: TextStyle(fontSize: 18.0)),
SizedBox(height: 20),
Text("これはカスタマイズされたダイアログの例です。"),
SizedBox(height: 20),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("閉じる"),
),
],
),
),
);
},
);
showDialogで使用される一般的なダイアログ
SimpleDialog
選択肢のリストを表示する際に便利です。
Dart
showDialog(
context: context,
builder: (BuildContext context) {
return SimpleDialog(
title: Text("選択してください"),
children: [
SimpleDialogOption(
onPressed: () {
Navigator.of(context).pop("選択1");
},
child: Text("選択1"),
),
SimpleDialogOption(
onPressed: () {
Navigator.of(context).pop("選択2");
},
child: Text("選択2"),
),
],
);
},
);
BottomSheet
画面の下部からスライドして表示されるダイアログのようなUIです。
Dart
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("Bottom Sheetのタイトル", style: TextStyle(fontSize: 18)),
SizedBox(height: 10),
Text("内容をここに記載します。"),
SizedBox(height: 20),
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text("閉じる"),
),
],
),
);
},
);
showDialogのポイント
- 非同期処理との連携
showDialogはFutureを返します。そのため、ユーザーのアクションを待つ処理を実装できます。
Dart
Future<void> showConfirmationDialog(BuildContext context) async {
final result = await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text("確認"),
content: Text("続行しますか？"),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop(false); // キャンセル
},
child: Text("いいえ"),
),
TextButton(
onPressed: () {
Navigator.of(context).pop(true); // 続行
},
child: Text("はい"),
),
],
);
},
);
if (result == true) {
print("続行が選択されました。");
} else {
print("キャンセルが選択されました。");
}
}
初心者がつまずきやすいポイント
- Navigatorの理解
Navigator.of(context).pop()を忘れるとダイアログが閉じません。 - 非同期処理の注意
非同期処理中にダイアログを閉じるときは、UIの状態管理に注意が必要です。 - デザインの適用
標準的なダイアログはシンプルですが、アプリに合わせたデザインを実装する場合はカスタマイズが必要です。
まとめ
FlutterのshowDialogは、ユーザーとの対話を簡単に実現できる便利な機能です。標準的な使い方からカスタムダイアログの作成まで柔軟に対応可能で、アプリケーションの使い勝手を大きく向上させます。
初心者はまず基本的なAlertDialogを試し、慣れてきたらカスタムデザインや非同期処理との連携に挑戦してみましょう！
コメント