【5分でわかる】ダイアログ(dialog)を表示する方法 | Flutter入門

ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterでダイアログ(dialog)を表示する方法を説明します。

Flutterでダイアログ(dialog)を表示する方法

Flutterでダイアログを表示したい場合は複数のアプローチが存在します。

以下のような便利なダイアログ(dialog)ウィジェットが用意されているので、この中から好みのデザインのものを選択すると良いでしょう。

SimpleDialogの画面イメージ

AlertDialogの画面イメージ

SimpleDialogの実装方法

今回はSimpleDialogの実装方法をご紹介します。

Flutterアプリの新規に作成したら、デフォルトのカウンターアプリが生成されてかと思います。

main.dartのfloatingActionButtonを以下のように書き換えてください。

floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (childContext) {
                return SimpleDialog(
                  backgroundColor: Colors.white,
                  title: Text("Title"),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () {
                        print("First Item");
                      },
                      child: Text("・First Item"),
                    ),
                    SimpleDialogOption(
                      onPressed: () {
                        print("Second Item");
                      },
                      child: Text("・Second Item"),
                    ),
                  ],
                );
              });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),

重要なポイント

showDialog()のreturnにSimpleDialogを設定することによりダイアログを表示できるようにしています。

showDialog(
              context: context,
              builder: (childContext) {
                return SimpleDialog( //★ダイアログの種類を設定
                  backgroundColor: Colors.white,
                  title: Text("Title"),

SimpleDialogOption()でダイアログの選択肢を設定することができます。

SimpleDialogOption(
                      onPressed: () {
                        print("First Item"); // ボタンを押した時の処理
                      },
                      child: Text("・First Item"), //選択肢の文言
                    ),

ソースコードの全文

全体のソースコードは以下になります。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showDialog(
              context: context,
              builder: (childContext) {
                return SimpleDialog(
                  backgroundColor: Colors.white,
                  title: Text("Title"),
                  children: <Widget>[
                    SimpleDialogOption(
                      onPressed: () {
                        print("First Item");
                      },
                      child: Text("・First Item"),
                    ),
                    SimpleDialogOption(
                      onPressed: () { 
                        print("Second Item");
                      },
                      child: Text("・Second Item"),
                    ),
                  ],
                );
              });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

まとめ

いかがでしたか？

Fluuterならダイアログの設定がとっても簡単に実装できます。

ぜひこの機会に習得してみてください！