Flutter弹框,自定义弹框, toast弹框

AlertDialog

确定取消通用 弹框,长按

  _alertDioalog () async {
    var result= await  showDialog(
      context: context,
      builder:  (context)=>AlertDialog(
        title: Text('提示信息'),
        content: Text('您确定要删除吗'),
        actions: <Widget>[
          FlatButton(onPressed: (){
            Navigator.pop(context,'0');
          }, child: Text('取消')),
          FlatButton(onPressed: (){
             Navigator.pop(context,'1');
          }, child: Text('确定',))
        ],
      ));
      print(result);
  }

SimpleDialog

方案选择通用弹框

_simpleDialog () async {
    var result= await  showDialog(
      context: context,
      builder: (context)=>SimpleDialog(
      title:new Text('请选择'),
      children: <Widget>[
        SimpleDialogOption(
          child: new Text('方案一'),
          onPressed: (){
            Navigator.pop(context,1);
        }),
        Divider(),
        SimpleDialogOption(
          child: new Text('方案二'),
          onPressed: (){
             Navigator.pop(context,2);
        }),
        Divider(),
        SimpleDialogOption(
          child: new Text('方案三'),
          onPressed: (){
             Navigator.pop(context,3);
        }),
      ])
    );

showModalBottomSheet

底部弹框,可以用来作为分享,底部自定义公功能,方案选择等等

_modeBottomSheet () async {
    var reslut= await showModalBottomSheet(
      context: context, 
      builder: (context)=>Container(
        height: 200,
        child: Column(
          children:<Widget>[
            ListTile(
              title: new Text('分享 A'),
              onTap: (){
                Navigator.pop(context,'A');
              },
            ),
            Divider(height: 3,),
            ListTile(
              title: new Text('分享 B'),
              onTap: (){
                Navigator.pop(context,'B');
              },
            ),
            Divider(),
            ListTile(
              title: new Text('分享 C'),
              onTap: (){
                Navigator.pop(context,'C');
              },
            ),
          ]
        ),
      )
    );
    print(reslut);
  }

toast插件

用来登陆注册成功,操作成功或者失败给的提示信息

_toast() {
    Fluttertoast.showToast(
        msg: "操作成功",//提示信息
        toastLength: Toast.LENGTH_SHORT,//大小
        gravity: ToastGravity.BOTTOM,//方位
        timeInSecForIos: 1,//ios可以设置时间
        backgroundColor: Colors.black,//背景颜色
        textColor: Colors.white,
        fontSize: 16.0
    );
  }

自定义Dialog

ShowDialog里面的widget默认会铺满整个屏幕,如果想采用Dialog风格的弹出框,我们需要去创建一个继承Dialog的类,重写Build方法

import 'package:flutter/material.dart';
import 'dart:async';
class CustomDialog extends Dialog {
  _showTimer(BuildContext context){
    Timer.periodic(Duration(milliseconds: 3000), (t){
      print('3秒后触发');
      Navigator.pop(context);
      t.cancel();//关闭定时器
    });
  }
  @override
  Widget build(BuildContext context){
    _showTimer(context);
    return Material(
      type : MaterialType.transparency,
      child : Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.white,
          child: Column(children: <Widget>[
          Padding(padding: EdgeInsets.all(10.0),
            child: Stack(
              children:<Widget>[
                Align(
                  child:Text ('关于我们'),
                  alignment: Alignment.center,
                ),
                Align(
                  child: InkWell(
                    child:Icon(Icons.close),
                    onTap: (){
                      print('colse');
                      Navigator.pop(context,'colse');
                    },
                  ),
                  alignment: Alignment.centerRight,
                )
              ],
            ),
          ),
          Divider(),
          Container(
            padding: EdgeInsets.all(10),
            width: double.infinity,
            child:new Text('嘎嘎嘎',textAlign:TextAlign.left)
          )
          ],),
        )
      ),
    );
  }
}

你可能感兴趣的:(Flutter)