Flutter对话框

AlertDialog

const AlertDialog({
  Key key,
  this.title, //标题
  this.titlePadding, // 标题内边距
  this.titleTextStyle, //标题样式
  this.content, // 内容
  this.contentPadding,//内容内边距
  this.contentTextStyle,// 内容样式
  this.actions, // 按钮数组
  this.backgroundColor, // 背景色
  this.elevation,// 阴影
  this.shape, // 外形
})

//AlertDialog
Future showExitDialog() {
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text("提示"),
        content: Text("您确定要退出吗?"),
        actions: <Widget>[
          FlatButton(
            child: Text("取消"),
            onPressed: () => Navigator.of(context).pop(false), // 关闭对话框返回false
          ),
          FlatButton(
            child: Text("退出"),
            onPressed: () {
              //关闭对话框并返回true
              Navigator.of(context).pop(true);
            },
          ),
        ],
      );
    },
  );
}

效果

SimpleDialog

展示一个列表，用于列表选择的场景。

//SimpleDialog选择框
Future<void> changeLanguage() async {
  var i = await showDialog<int>(
      context: context,
      builder: (context){
        return SimpleDialog(
          title: Text("选择语言"),
          children: <Widget>[
            SimpleDialogOption(
              child: Text("英文"),
              onPressed: (){
                Navigator.pop(context,1);
              },
            ),
            SimpleDialogOption(
              child: Text("简体中文"),
              onPressed: (){
                Navigator.pop(context,2);
              },
            ),
            SimpleDialogOption(
              child: Text("繁体中文"),
              onPressed: (){
                Navigator.pop(context,3);
              },
            ),
          ],
        );
      }) ;
  switch(i){
    case 1:
      print("英文");
      break;
    case 2:
      print("简体中文");
      break;
    case 3:
      print("繁体中文");
      break;
  }

}

效果

Dialog

弹出一个有100个列表项的对话框

//ListDialog
Future<void> showListDialog() async{
  var index = await showDialog<int>(
    context: context,
    builder: (context){
      var child = Container(
        child: Column(
          children: <Widget>[
            ListTile(title: Text("请选择"),),
            Expanded(
              child: ListView.builder(
                itemBuilder: (context,index){
                  return ListTile(
                    title: Text("第 $index 个"),
                    onTap: (){
                      Navigator.of(context).pop(index);
                    },
                  );
                },
                itemCount: 100,
              ),
            ),
          ],
        ),
        height: 400,
      );
      return Dialog(child: child,);
    }
  ) ;
  if(index != null){
    print("选了第$index个");
  }
}

效果

状态管理

bool checked = false; // 复选框选中状态

Future showCheckDialog() {
  checked = false;
  return showDialog<bool>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text("提示"),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text("您确定要退出吗?"),
            Row(
              children: <Widget>[
                Text("同时删除缓存?"),
                Builder(builder: (BuildContext context){
                 return Checkbox(
                      value: checked,
                      onChanged: (value){
                        (context as Element).markNeedsBuild();
                        checked = !checked;
                      }
                  );
                })

              ],
            ),
          ],
        ),
        actions: <Widget>[
          FlatButton(
            child: Text("取消"),
            onPressed: () => Navigator.of(context).pop(),
          ),
          FlatButton(
            child: Text("退出"),
            onPressed: () {
              //关闭对话框并返回true
              Navigator.of(context).pop(checked);
            },
          ),
        ],
      );
    },
  );
}


TextButton(
  onPressed: () async {
     var checked = await showCheckDialog();
     if (checked == null) {
       print("取消");
     } else {
       checked as bool;
       print("是否删除缓存? $checked");
     }
   },
   child: Text("复选对话框")),

效果

底部菜单列表

showModalBottomSheet方法可以弹出一个Material风格的底部菜单列表模态对话框

//底部菜单列表
Future showBottomSheetDialog() {
  return showModalBottomSheet<int>(
      context: context,
      builder: (context) {
        return ListView.builder(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text("漩涡鸣人 $index"),
              onTap: () {
                Navigator.of(context).pop(index);
              },
            );
          },
          itemCount: 20,
        );
      });
}

效果

全屏底部菜单列表

TextButton(
  onPressed: () async {
    Scaffold.of(context)
        .showBottomSheet((BuildContext context) {
      return ListView.builder(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text("佐助 $index"),
            onTap: () {
              Navigator.of(context).pop(index);
              print(index);
            },
          );
        },
        itemCount: 50,
      );
    });
  },
  child: Text("全屏底部菜单列表")),

效果

注意：
调用showBottomSheet方法就必须得保证父级组件中有Scaffold。

Loading框

Loading框可以直接通过showDialog+AlertDialog

TextButton(
  onPressed: () {
    showDialog(
        context: context,
        barrierDismissible: false, //点击遮罩不关闭对话框
        builder: (context) {
          return UnconstrainedBox(
            constrainedAxis: Axis.vertical,
            child: SizedBox(
                width: 240,
                child: AlertDialog(
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      CircularProgressIndicator(),
                      //progress
                      Padding(
                        padding:
                            const EdgeInsets.only(top: 20),
                        child: Text("正在加载中..."),
                      )
                    ],
                  ),
                )),
          );
        });
  },
  child: Text("加载框")),

效果

日历选择框

TextButton(
  onPressed: () async {
     var date = DateTime.now();
     Locale myLocale = Localizations.localeOf(context);
     DateTime? time = await showDatePicker(
       context: context,
       initialDate: date,
       firstDate: DateTime(date.year - 1),
       locale: myLocale,
       lastDate: date.add(
         Duration(days: 100),
       ),
     );
     print(time.toString());
   },
   child: Text("日期选择"),
 ),

效果

此处引入了flutter_localizations
1， pubspec.yaml中添加

flutter_localizations:
    sdk: flutter

2，MaterialApp中添加

localizationsDelegates: [
  GlobalMaterialLocalizations.delegate,
],
supportedLocales: [
  const Locale('zh', 'CH'),
],