아래 그림과 같은 대화창의 표시 방법에 관한 설명이 됩니다.

예를 들면 이번 초기의 값 증가 앱을 개조해, 다이얼로그를 표시해 값을 증가시킬까 확인을 취하는 앱을 작성해 갑니다.

대화 상자 추가

아래와 같은 코드를 추가합니다.

  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 에서 제목 아래에 표시되는 내용을 만듭니다.

이번에는 예를 선택한 경우 값이 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 를 사용하는 편이 좋은 것 같습니다.

수고하셨습니다.
여기까지 봐 주셔서 감사합니다.