Flutter 弹窗Dialog使用汇总

1.AlertDialog使用

代码

//删除点击
  showDialog<Null>(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return new AlertDialog(
        title: new Text(
          '请确认当前操作',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        content: new SingleChildScrollView(
          child: Text('确认后，将从当前好友列表中删除该对象目前不支持找回，请慎重操作'),
        ),
        actions: <Widget>[
          new FlatButton(
            child: new Text('取消'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          new FlatButton(
            child: new Text('确认'),
            onPressed: () {
              Navigator.of(context).pop();
              Toast.show('删除确认');
              FriendsDao.hideFriend(
                  uid: currentItem.friendUid);
              allFriendsList.remove(currentItem);
              setState(() {});
            },
          )
        ],
      );
    },
  ).then((val) {
    print(val);
  });

效果图

效果图

2.showModalBottomSheet使用

代码

showModalBottomSheet(
context: context,
builder: (BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min, // 设置最小的弹出
    children: <Widget>[
      new ListTile(
        title: Center(
          child: Text(
            "删除",
            style: TextStyle(
                fontSize: ScreenUtil().setSp(30),
                fontWeight: FontWeight.bold),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
          //删除点击
          },
      ),
      Container(
        height: ScreenUtil().setHeight(2),
        color: Color(0xFFf2f2f2),
      ),
      new ListTile(
        title: Center(
          child: Text("取消"),
        ),
        onTap: () async {
          Navigator.pop(context);
        },
      ),
    ],
  );
});

效果图

效果图

3.SimpleDialog

向用户传递确定信息并提供选项的弹出层

代码

showDialog<Null>(
    context: context,
    builder: (BuildContext context) {
        return new SimpleDialog(
            title: new Text('选择'),
            children: <Widget>[
                new SimpleDialogOption(
                    child: new Text('选项 1'),
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                ),
                new SimpleDialogOption(
                    child: new Text('选项 2'),
                    onPressed: () {
                        Navigator.of(context).pop();
                    },
                ),
            ],
        );
    },
).then((val) {
    print(val);
});

效果图

效果图

4.SnackBar

代码

import 'package:flutter/material.dart';

enum DialogDemoAction {
  cancel,
  agree,
}

const String _alertWithoutTitleText = '是否加入购物车？';

class AlertDialogWidget extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  void showDemoDialog<T>({BuildContext context, Widget child}) {
    showDialog<T>(
      context: context,
      builder: (BuildContext context) => child,
    ).then<void>((T value) {
      // The value passed to Navigator.pop() or null.
      if (value != null) {
        _scaffoldKey.currentState.showSnackBar(SnackBar(
          content: Text('你选择了: $value'),
        ));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final TextStyle dialogTextStyle =
        theme.textTheme.subhead.copyWith(color: theme.textTheme.caption.color);

    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text("Alert Dialog"),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            color: Colors.blue,
            child: Text("RaisedButton"),
            textColor: Colors.white,
            onPressed: () {
              showDemoDialog<DialogDemoAction>(
                context: context,
                child: AlertDialog(
                  content: Text(
                    _alertWithoutTitleText,
                    style: dialogTextStyle,
                  ),
                  actions: <Widget>[
                    FlatButton(
                      child: const Text('否'),
                      onPressed: () {
                        Navigator.pop(context, DialogDemoAction.cancel);
                      },
                    ),
                    FlatButton(
                      child: const Text('是'),
                      onPressed: () {
                        Navigator.pop(context, DialogDemoAction.agree);
                      },
                    ),
                  ],
                ),
              );
            },
          ),
        ],
      ),
    );
  }

  void _onClick() {}
}

效果图

SnackBar.gif