flutter AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast 自定义 Dialog

 

Toast 消息提示插件安装及使用

// AlertDialog、SimpleDialog、showModalBottomSheet 和 showToast 是 Flutter 中的常用弹窗方式
// 使用showToast前，需先安装 fluttertoast 插件
https://pub.dev/packages/fluttertoast

// 示范如何使用 showToast 展示短消息
Fluttertoast.showToast(
  msg: "This is Short Toast",
  toastLength: Toast.LENGTH_SHORT,
  timeInSecForIos: 1
);

StatefulBuilder 的使用

// 使用 StatefulBuilder 可以在弹窗内部更改状态
StatefulBuilder(
  builder: (context, changeState) {
    return '内容'; // 你可能想返回一个具体的 widget，而不是字符串'内容'
  }
);

Dialog 显示方式

// 点击背景时，此弹窗会消失
showDialog(
    context: context,
    builder: (context) {
      return CupertinoDialog (
          child: Text('zxcvbnm123456',
              style: TextStyle(
                  fontSize: Screen.width(30),
                  decoration: TextDecoration.none,
                  color: Colors.black,
                  fontWeight: FontWeight.normal
              )
          )
      );
    }
);

// 点击背景时，此弹窗不会消失
showCupertinoDialog(
    context: context,
    builder: (context) {
      return CupertinoDialog (
          child: Text('zxcvbnm123456',
              style: TextStyle(
                  fontSize: Screen.width(30),
                  decoration: TextDecoration.none,
                  color: Colors.black,
                  fontWeight: FontWeight.normal
              )
          )
      );
    }
);

DialogPage 定义及 代码实现

import 'package:flutter/material.dart';
import 'myDialog.dart';

class DialogPage extends StatefulWidget{
  DialogPage({Key key});
  _Dialog createState() => _Dialog();
}

class _Dialog extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Dialog')),
        body: ListView(
          children: <Widget>[
            RaisedButton(
              child: Text('AlertDialog'),
              onPressed: () {
                showDialog(
                  context: context,
                  builder: (context) {
                    return AlertDialog(
                      title: Text('提示'),
                      content: Text('确定要取消吗'),
                      actions: <Widget>[
                        FlatButton(child: Text('取消'), onPressed: () {Navigator.pop(context, '222');},),
                        FlatButton(child: Text('确定'), onPressed: () {Navigator.pop(context, '222');},),
                      ],
                    );
                  }
                );
              }
            ),
            RaisedButton(
              child: Text('弹出选择卡'),
              onPressed: () {
                 showDialog(
                    context: context,
                    builder: (context) {
                      return SimpleDialog(
                        title: Text('选择卡'),
                        children: <Widget>[
                          SimpleDialogOption(child: Text('A'), onPressed: () { Navigator.pop(context);},),
                          SimpleDialogOption(child: Text('B'), onPressed: () { Navigator.pop(context);},),
                          SimpleDialogOption(child: Text('C'), onPressed: () { Navigator.pop(context);},),
                        ],
                      );
                    }
                );
              }
            ),
            RaisedButton(
              child: Text('弹出自定义'),
              onPressed: () {
               showDialog(
                    context: context,
                    builder: (context) {
                      return MyDialog(title:"关于我们", content:"关于我们");
                    }
                );
              }
            )
          ]
        )
    );
  }
}

自定义 Dialog 实现

import 'dart:async';
import 'package:flutter/material.dart';

// 自定义 MyDialog 的使用方式：MyDialog(title:"关于我们", content:"关于我们"); 在导入此文件后直接调用即可

class MyDialog extends Dialog {
  String title;
  String content;

  MyDialog({this.title="", this.content=""});

  _showTimer(context) {
    var timer;
    timer = Timer.periodic(
      Duration(milliseconds: 3000), (t) {
        Navigator.pop(context);
        t.cancel(); // 关闭定时器
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    _showTimer(context);

    return Material(
      type: MaterialType.transparency,
      child: Center(
          child: Container(
              height: 300,
              width: 300,
              color: Colors.white,
              child: Column(
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.all(10),
                      child: Stack(
                          children: <Widget>[
                            Align(
                              alignment: Alignment.center,
                              child: Text("${this.title}"),
                            ),
                            Align(
                              alignment: Alignment.centerRight,
                              child: InkWell(
                                child: Icon(Icons.close),
                                onTap: () {
                                  Navigator.pop(context);
                                }
                              )
                            )
                          ]
                      )
                    ),
                    Divider(),
                    Container(
                      padding: EdgeInsets.all(10),
                      width: double.infinity,
                      child: Text("${this.content}", textAlign: TextAlign.left)
                    )
                  ]
              )
          )
      )
    );
  }
}