Flutter Dialog（弹出框）

showDialog()

showDialog()是Material组件库提供的一个用于弹出Material风格对话框的方法，签名如下

Future<T> showDialog<T>({
@required BuildContext context,
bool barrierDismissible = true, //点击对话框barrier(遮罩)时是否关闭它
WidgetBuilder builder, // 对话框UI的builder
})

SimpleDialog

SimpleDialog也是Material组件库提供的对话框，它会展示一个列表，用于列表选择的场景。

import 'package:flutter/material.dart';
import 'dart:async';
class SimpleDialonDemo extends StatefulWidget {
  @override
  _SimpleDialonDemoState createState() => _SimpleDialonDemoState();
}
enum Options{A,B,C}
class _SimpleDialonDemoState extends State<SimpleDialonDemo> {
//  选项框的值
String _optionsValue='暂无选择';
Future _openSimpleDialog() async{

  //弹出框，返回的是一个类似JS的Promise对象，选中的值在这个返回的变量中
  var result=await showDialog(context: context,builder: (BuildContext context){
    return SimpleDialog(
      //标题
      title: Text('showDialog弹出框'),
      //子元素
      children: <Widget>[
        SimpleDialogOption(
          child: Text('options1'),
          //点击选项的回调
          onPressed: (){
            //点击后关闭当前选项，传递值
            Navigator.pop(context,Options.A);
          },
        ),
        SimpleDialogOption(
          child: Text('options1'),
          //点击选项的回调
          onPressed: (){
            //点击后关闭当前选项，传递值
            Navigator.pop(context,Options.B);
          },
        ),
      ],
    );
  });
  //根据传递的值，设置value；
  switch(result){
    case Options.A:
      setState(() {
        _optionsValue='A';
      });
      break;
    case Options.B:
      setState(() {
        _optionsValue='B';
      });
      break;
  }
}
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('对话框'),
      ),
      body: Column(
        children: <Widget>[
          FlatButton(
            child: Text('showDialog弹出框,选择的值是$_optionsValue'),
            onPressed: _openSimpleDialog,

          ),

        ],
      ),

    );
  }
}

参考文章：对话框详解