【Flutter】ダイアログ(AlertDialog、SimpleDialog、CupertinoAlertDialog)を簡単に実装！ダイアログ以外操作できなくするまでの完全ガイド！

2024年2月13日2024年4月2日

【Flutter】ダイアログ(AlertDialog、SimpleDialog、CupertinoAlertDialog)を簡単に実装！ダイアログ以外操作できなくするまでの完全ガイド！

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事を読むことでわかること

FlutterでのAlertDialog、SimpleDialog、CupertinoAlertDialogの基本的な実装方法
ダイアログ表示中に背景の操作を不可能にする方法
実践的なサンプルコードを通じた理解

開発環境

Dart 3.0.0
Flutter 3.10.0

AlertDialogの実装

AlertDialogは、ユーザーに情報を伝えるだけでなく、確認を求める際にも使われます。以下は、AlertDialogを実装するためのサンプルコードです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AlertDialog Demo'),
        ),
        body: AlertDialogDemo(),
      ),
    );
  }
}

class AlertDialogDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return AlertDialog(
                title: Text('ダイアログのタイトル'),
                content: Text('ダイアログ内メッセージ'),
                actions: <Widget>[
                  TextButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text('閉じる'),
                  ),
                ],
              );
            },
          );
        },
        child: Text('ダイアログを表示する'),
      ),
    );
  }
}

解説

showDialog関数（ダイアログを表示するための関数）を使用してAlertDialogを表示します。
context（現在のウィジェットツリーの場所を示すパラメータ）を渡し、builderでダイアログの構造を定義します。
TextButtonを使用して、ダイアログを閉じるボタンを提供します。

動作確認

いちの

それでは実際の動作を見てみましょ〜

showModalBottomSheetを使用したモーダル作成にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

SimpleDialogの実装

SimpleDialogは、ユーザーからの選択を求める際に便利です。以下はSimpleDialogのサンプルコードです。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SimpleDialog Demo'),
        ),
        body: SimpleDialogDemo(),
      ),
    );
  }
}

class SimpleDialogDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          showDialog(
            context: context,
            builder: (BuildContext context) {
              return SimpleDialog(
                title: Text('どちらの花が好きですか？'),
                children: <Widget>[
                  SimpleDialogOption(
                    onPressed: () { /* Handle option 1 */ },
                    child: Text('ひまわり'),
                  ),
                  SimpleDialogOption(
                    onPressed: () { /* Handle option 2 */ },
                    child: Text('ハナミズキ'),
                  ),
                ],
              );
            },
          );
        },
        child: Text('ダイアログを表示する'),
      ),
    );
  }
}

解説

SimpleDialogウィジェットを使用して、ユーザーに複数の選択肢を提供します。
SimpleDialogOptionウィジェットで各選択肢を定義し、onPressedで選択時の処理を記述します。

動作確認

いちの

それでは実際の動作を見てみましょ〜

CupertinoAlertDialogの実装

iOSスタイルのダイアログを実装したい場合、CupertinoAlertDialogが適しています。以下はCupertinoAlertDialogのサンプルコードです。

サンプルコード

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CupertinoAlertDialog Demo'),
        ),
        body: CupertinoAlertDialogDemo(),
      ),
    );
  }
}

class CupertinoAlertDialogDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CupertinoButton(
        onPressed: () {
          showCupertinoDialog(
            context: context,
            builder: (BuildContext context) {
              return CupertinoAlertDialog(
                title: Text('注意！！'),
                content: Text('削除すると復元できません'),
                actions: <Widget>[
                  CupertinoDialogAction(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text('削除する'),
                  ),
                ],
              );
            },
          );
        },
        child: Text('ダイアログを表示する'),
      ),
    );
  }
}

解説

showCupertinoDialog関数を使用してCupertinoAlertDialogを表示します。
CupertinoDialogActionウィジェットでダイアログのボタンを定義します。

動作確認

いちの

それでは実際の動作を見てみましょ〜

【Flutter】ダイアログ(CupertinoAlertDialog)を表示する

ダイアログ以外操作できなくする

ダイアログ表示中に背景のウィジェットを操作不可能にするには、showDialogやshowCupertinoDialog関数のbarrierDismissibleプロパティをfalseに設定します。これにより、ダイアログ外のタップ操作を無効にし、ダイアログのアクションボタンを押すまで、ユーザーが他のUI要素と対話することができなくなります。

サンプルコード

showDialog(
  context: context,
  barrierDismissible: false, // ダイアログ外のタップ操作を無効にする
  builder: (BuildContext context) {
    // ダイアログの定義
  },
);

解説

この設定により、アプリケーションのユーザビリティを向上させることができます。特に、ユーザーに重要な選択を強いる場合や情報を確認させたい場合に有効です。

まとめ

Flutterを使用したAlertDialog、SimpleDialog、CupertinoAlertDialogの実装方法を紹介しました。また、ダイアログ表示中に背景の操作を不可能にする方法についても説明しました。これらの知識を活用することで、FlutterアプリのUI/UXを大幅に向上させることができます。ダイアログはユーザーとアプリケーションの対話を促進する重要なツールであり、適切に使用することでアプリケーションの使い勝手を大きく改善することができます。

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。