Flutter 组件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定义Dialog

AlertDialog dialog弹框

在 showDialog中 定义 AlertDialog

 _alertDialog () async {
    var result =  showDialog<void>(
      context: context,
      barrierDismissible: true,
      // false = user must tap button, true = tap outside dialog
      builder: (BuildContext dialogContext) {
        return AlertDialog(//定义AlertDialog
          title: Text('标题'),
          content: Text('dialog内容'),
          actions: <Widget>[
            FlatButton(
              child: Text('取消'),
              onPressed: () {
                Navigator.of(dialogContext).pop(); // 就像前面的抽屉一样来关闭弹框
              },
            ),FlatButton(
              child: Text('确认'),
              onPressed: () {
                Navigator.of(dialogContext).pop(); // Dismiss alert dialog
              },
            ),
          ],
        );
      },
    );
  }

SimpleDialog 下拉选框

  _simpleDialog() async{
    showDialog<void>(
      context: context,
      barrierDismissible: true,
      // false = user must tap button, true = tap outside dialog
      builder: (BuildContext dialogContext) {
        return SimpleDialog(//定义SimpleDialog
          title:Text("选择内容"),
          children: <Widget>[
            SimpleDialogOption(//选框子元素
              child: Text("option A"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option A");
              },
            ),
            Divider(),//分割线
            SimpleDialogOption(
              child: Text("option b"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option b");
              },
            ),
            Divider(),//分割线
            SimpleDialogOption(
              child: Text("option c"),
              onPressed: (){
                Navigator.of(dialogContext).pop();
                print("option c");
              },
            ),
          ],
        );
      },
    );
  }

showModalBottomSheet

 _showModalBottomSheet() async{
    showModalBottomSheet(
        context: context,
        builder:(context) {
          return Container(
            height: 200,
           child: Column(
             children: <Widget>[
               ListTile(
                 title: Text("分享 A"),
                 onTap: (){
                   print("分享 A");
                   Navigator.of(context).pop();
                 },
               ),
               Divider(),
               ListTile(
                 title: Text("分享 b"),
                 onTap: (){
                   print("分享 b");
                   Navigator.of(context).pop();
                 },
               ),
               Divider(),
               ListTile(
                 title: Text("分享 c"),
                 onTap: (){
                   print("分享 c");
                   Navigator.of(context).pop();
                 },
               ),

             ],
           ),
          );
        }
    );
  }
  

fluttertoast 第三方库

import 'package:fluttertoast/fluttertoast.dart';

  _showToast() {
    Fluttertoast.showToast(
        msg: "吐司内容",
        toastLength: Toast.LENGTH_LONG,
        gravity: ToastGravity.BOTTOM,//显示位置
        timeInSecForIosWeb: 1,//显示时长苹果
        backgroundColor: Colors.black,//背景颜色
        textColor: Colors.white,//文字颜色
        fontSize: 16.0//文字大小
    );
  }

 Column(
      children: <Widget>[
         RaisedButton(
           child: Text("alert弹出框-AlertDialog"),
           onPressed: _alertDialog,
         ),
         RaisedButton(
           child: Text("弹出框-SimpleDialog"),
           onPressed: _simpleDialog,
         ),
         RaisedButton(
           child: Text("底部弹出框-showModalBottomSheet"),
           onPressed: _showModalBottomSheet,
         ),
         RaisedButton(
           child: Text("吐司-showToast"),
           onPressed: _showToast,
         ),
         RaisedButton(
              child: Text("自定义Dialog"),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (context) {
                      return MyDialog();//必须先引入你的组件
                    });
              },
            ),
     ]
 )

自定义Dialog

创建 MyDialog组件

import 'package:flutter/material.dart';

/*
* Dialog Template
* 自定义dialog
*/
class MyDialog extends Dialog {
  @override
  Widget build(BuildContext context) {
    return Material(//定义全局大小的元素
      type: MaterialType.transparency, //设置整个元素是透明的
      child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,//居中显示
        children: <Widget>[
          Padding(//边距组件
            padding: EdgeInsets.all(10),//设置内边距
            child: Container(//这里就可以实现一些自定义功能
              height: 200,
              width: 200,
              color: Colors.white,
              child: RaisedButton(child: Text("关闭自定义Dialog"),onPressed: (){
                Navigator.of(context).pop();
              },),
            ),
          ),
        ],
      )),
    );
  }
}