ダイアログの表示

下の画像のようなダイアログの表示方法に関しての説明になります。

例として今回初期の値増加アプリを改造し、ダイアログを表示し値を増加させるか確認を取るアプリを作成していきます。

ダイアログの追加

下記のようなコードを追加します。

  Future<void> dialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (_) {
        return AlertDialog(
          title: Text('増減確認'),
          content: Text('値を増やしますか？'),
          actions: <Widget>[
            FlatButton(
              child: Text("はい"),
              onPressed: () => _incrementCounter(),
            ),
            FlatButton(
              child: Text("いいえ"),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  }

AlertDialogを使用するために適当な関数を作成します。
barrierDismissibleをfalseにすることで、FlatButtonでのみダイアログが閉じるようになります。
builderでダイアログの生成を行います。
titleで見出しを作成、contentでtitleの下に表示される内容を作成します。

今回は、はいを選択した場合値が1増加するようになっています。
また、いいえを選択した場合はダイアログが閉じるようになっています。

完成

最終的なソースコードはこちらになります。
_incrementCounter()にも、数値の増加処理が終了したらダイアログが閉じるようにNavigator.pop(context);を記述しました。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ボタン配置',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
    Navigator.pop(context);
  }

  Future<void> dialog() async {
    return showDialog<void>(
      context: context,
      barrierDismissible: false,
      builder: (_) {
        return AlertDialog(
          title: Text('増減確認'),
          content: Text('値を増やしますか？'),
          actions: <Widget>[
            FlatButton(
              child: Text("はい"),
              onPressed: () => _incrementCounter(),
            ),
            FlatButton(
              child: Text("いいえ"),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ダイアログ'),
        actions: [
          IconButton(
            icon: Icon(Icons.add),
            onPressed: () => dialog(),
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '+ボタンでダイアログが表示されます',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

選択肢が今回のように2択ではなく、複数ある場合はAlertDialogよりもSimpleDialogを使用するほうが良いようです。

お疲れ様でした。
ここまでご覧いただきありがとうございます。