Flutter之Dialog

目录

 

1、AlertDialog

2、SimpleDialog

3、showModalBottomSheet

4、showToast

5、自定义Dialog

---

1、AlertDialog

  _alertDialog() async {
    var alertDialogs = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("确定要删除吗"),
            actions: [
              FlatButton(
                  child: Text("取消"),
                  onPressed: () => Navigator.pop(context, "cancel")),
              FlatButton(
                  child: Text("确定"),
                  onPressed: () => Navigator.pop(context, "yes")),
            ],
          );
        });
    return alertDialogs;
  }

2、SimpleDialog

  _alertSimpleDialog() async {
    var alertDialogs = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("提示"),
            children: [
              FlatButton(
                child: Text("Option1"),
                onPressed: () => Navigator.pop(context, "Option1"),
              ),
              FlatButton(
                child: Text("Option2"),
                onPressed: () => Navigator.pop(context, "Option2"),
              ),
              FlatButton(
                child: Text("Option3"),
                onPressed: () => Navigator.pop(context, "Option3"),
              ),
            ],
          );
        });
    return alertDialogs;
  }

3、showModalBottomSheet

  _modalButtomSheet() async {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 200,
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text("设置"),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text("主页"),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  leading: Icon(Icons.message),
                  title: Text("信息"),
                  onTap: () => Navigator.pop(context),
                ),
              ],
            ),
          );
        });
  }

4、showToast

这里我们使用的组件是fluttertoast

fluttertoast: ^3.1.3

  _showToast() {
    Fluttertoast.showToast(
        msg: "这是一个Toast",
        gravity: ToastGravity.CENTER,
        backgroundColor: Colors.blue,
        fontSize: 16,
        toastLength: Toast.LENGTH_SHORT,
        textColor: Colors.red);
  }

 

5、自定义Dialog

import 'dart:async';

import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  final String title;
  final String content;

  _showTimer(context) {
    var timer;
    timer = Timer.periodic(Duration(seconds: 3), (t) {
      print("关闭");
      Navigator.pop(context);
      timer.cancel();
    });
  }

  MyDialog(this.title, this.content);

  @override
  Widget build(BuildContext context) {
    _showTimer(context);
    return Material(
      child: Center(
          child: Container(
        height: 200,
        width: 200,
        color: Colors.white,
        child: Column(
          children: [
            Padding(
              padding: EdgeInsets.all(10),
              child: Stack(
                children: [
                  Align(
                    child: Text(title),
                    alignment: Alignment.topCenter,
                  ),
                  Align(
                    child: InkWell(
                      child: Icon(Icons.close),
                      onTap: () => Navigator.pop(context),
                    ),
                    alignment: Alignment.topRight,
                  ),
                ],
              ),
            ),
            Divider(),
            Container(
              width: double.infinity,
              child: Text(
                content,
                textAlign: TextAlign.left,
              ),
              padding: EdgeInsets.all(10),
            )
          ],
        ),
      )),
      type: MaterialType.transparency,
    );
  }
}

 Dialog.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/wechat/components/MyDialog.dart';
import 'package:fluttertoast/fluttertoast.dart';

class DialogPage extends StatefulWidget {
  DialogPage({Key key}) : super(key: key);

  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State {  
  _alertDialog() async {
    var alertDialogs = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("确定要删除吗"),
            actions: [
              FlatButton(
                  child: Text("取消"),
                  onPressed: () => Navigator.pop(context, "cancel")),
              FlatButton(
                  child: Text("确定"),
                  onPressed: () => Navigator.pop(context, "yes")),
            ],
          );
        });
    return alertDialogs;
  }

  _alertSimpleDialog() async {
    var alertDialogs = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("提示"),
            children: [
              FlatButton(
                child: Text("Option1"),
                onPressed: () => Navigator.pop(context, "Option1"),
              ),
              FlatButton(
                child: Text("Option2"),
                onPressed: () => Navigator.pop(context, "Option2"),
              ),
              FlatButton(
                child: Text("Option3"),
                onPressed: () => Navigator.pop(context, "Option3"),
              ),
            ],
          );
        });
    return alertDialogs;
  }

  _modalButtomSheet() async {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 200,
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.settings),
                  title: Text("设置"),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  leading: Icon(Icons.home),
                  title: Text("主页"),
                  onTap: () => Navigator.pop(context),
                ),
                ListTile(
                  leading: Icon(Icons.message),
                  title: Text("信息"),
                  onTap: () => Navigator.pop(context),
                ),
              ],
            ),
          );
        });
  }

  _showToast() {
    Fluttertoast.showToast(
        msg: "这是一个Toast",
        gravity: ToastGravity.CENTER,
        backgroundColor: Colors.blue,
        fontSize: 16,
        toastLength: Toast.LENGTH_SHORT,
        textColor: Colors.red);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dialog"),
      ),
      body: Center(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RaisedButton(
            onPressed: _alertDialog,
            child: Text("AlertDialog"),
          ),
          RaisedButton(
            onPressed: _alertSimpleDialog,
            child: Text("SimpleDialog"),
          ),
          RaisedButton(
            onPressed: _modalButtomSheet,
            child: Text("showModalButtomSheet"),
          ),
          RaisedButton(
            onPressed: _showToast,
            child: Text("showToast"),
          ),          
          RaisedButton(
            onPressed: (){
              showDialog(context: context,builder: (context) => MyDialog("title","content"),);
            },
            child: Text("自定义Dialog"),
          ),
        ],
      )),
    );
  }
}