【Flutter】 ダイアログを出す方法

image

FlutterのダイアログにはAlertDialogSimpleDialogの二つがあります。
AlertDialogはいわゆる普通のダイアログで、確認をする場合などに使います。
SimpleDialogは複数の選択肢から選んでもらう場合などに使います。
どちらのダイアログもshowDialogメソッドを使って呼び出します。

Version

  • Flutter 2.8.1
  • Dart 2.15.1

AlertDialogの使い方

AlertDialogデモ

1)AlertDialogを作る

まずはAlertDialogウィジェットを使ってダイアログを作ります。

class AlertDialogSample extends StatelessWidget {
  const AlertDialogSample({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('データを消してしまってもいいですか?'),
      content: Text('こうかいしませんね?'),
      actions: <Widget>[
        GestureDetector(
          child: Text('いいえ'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        GestureDetector(
          child: Text('はい'),
          onTap: () {},
        )
      ],
    );
  }
}

2)showDialogメソッドでダイアログを呼び出す

showDialogを使ってダイアログに移動します。これだけです。

  ElevatedButton(
    child: Text('アラートダイアログを表示'),
    onPressed: () {
showDialog<void>(
context: context,
builder: (_) {
return AlertDialogSample();
});
}, )

SimpleDialogの使い方

SimpleDialogデモ

1)SimpleDialogの定義

SimpleDialogウィジェットを使ってダイアログを作ります。
今回はString型の値を遷移元のページに返すようにしています。

class SimpleDialogSample extends StatelessWidget {
  const SimpleDialogSample({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return SimpleDialog(
      title: Text('選んでね'),
      children: [
        SimpleDialogOption(
          child: Text('選択肢1'),
          onPressed: () {
Navigator.pop(context, '1が選択されました');
}, ), SimpleDialogOption( child: Text('選択肢2'), onPressed: () {
Navigator.pop(context, '2が選択されました');
}, ) ], ); } }

2)showDialogメソッドでダイアログを呼び出す

showDialogメソッドを呼び出す際にこのように書けば、ダイアログで選択した値がselectedTextに入ってきます。

  ElevatedButton(
    child: Text('シンプルダイアログを表示'),
    onPressed: () async {
final String? selectedText = await showDialog<String>(
context: context,
builder: (_) {
return SimpleDialogSample();
});
print(selectedText); }, )

【参考】画面外タップでダイアログが閉じないようにする方法

showDialogメソッド内でreturn以下を次のように変更するだけです。

showDialog<void>(
    context: context,
    builder: (_) {
return WillPopScope(
child: AlertDialogSample(),
onWillPop: () async => false,
);
});

コード全文

まずはこれをコピペして動かしてみてから中身を見ていくとわかりやすいかもしれません!

import 'package:flutter/material.dart';

class DialogPage extends StatefulWidget {
  const DialogPage({Key? key}) : super(key: key);

  
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ダイアログの出し方サンプル'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('アラートダイアログを表示'),
              onPressed: () {
                showDialog<void>(
                    context: context,
                    builder: (_) {
                      return AlertDialogSample();
                    });
              },
            ),
            ElevatedButton(
              child: Text('シンプルダイアログを表示'),
              onPressed: () async {
                final String? selectedText = await showDialog<String>(
                    context: context,
                    builder: (_) {
                      return SimpleDialogSample();
                    });
                print(selectedText);
              },
            ),
          ],
        ),
      ),
    );
  }
}

class AlertDialogSample extends StatelessWidget {
  const AlertDialogSample({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('データを消してしまってもいいですか?'),
      content: Text('こうかいしませんね?'),
      actions: <Widget>[
        GestureDetector(
          child: Text('いいえ'),
          onTap: () {
            Navigator.pop(context);
          },
        ),
        GestureDetector(
          child: Text('はい'),
          onTap: () {},
        )
      ],
    );
  }
}

class SimpleDialogSample extends StatelessWidget {
  const SimpleDialogSample({Key? key}) : super(key: key);

  
  Widget build(BuildContext context) {
    return SimpleDialog(
      title: Text('選んでね'),
      children: [
        SimpleDialogOption(
          child: Text('選択肢1'),
          onPressed: () {
            Navigator.pop(context, '1が選択されました');
          },
        ),
        SimpleDialogOption(
          child: Text('選択肢2'),
          onPressed: () {
            Navigator.pop(context, '2が選択されました');
          },
        )
      ],
    );
  }
}

さいごに

ダイアログに移動するメソッドであるshowDialogと、
ダイアログそのものであるAlertDialogSimpleDialogの区別がわかりやすいように意識しました。
誰かのお役に立てば幸いです。

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日開催のアプリ開発講座の参加者募集中!!

5月28日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More