30 Flutter自定义Dialog

MyDialog.dart

import 'dart:async';

import 'package:flutter/material.dart';

class MyDialog extends Dialog {
  String title;
  String content;

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

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


  @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),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Dialog.dart

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

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

  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  _alertDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text('提示信息'),
            content: Text('你确定要删除吗?'),
            actions: <Widget>[
              FlatButton(
                child: Text('取消'),
                onPressed: () {
                  print('取消');
                  Navigator.pop(context, "Cancle");
                },
              ),
              FlatButton(
                child: Text('确定'),
                onPressed: () {
                  Navigator.pop(context, "Ok");
                  print('确定');
                },
              )
            ],
          );
        });
    print(result);
  }

  _simpleDialog() async {
    var result = await showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("选择内容"),
            children: <Widget>[
              SimpleDialogOption(
                child: Text("Option A"),
                onPressed: () {
                  print("Options A");
                  Navigator.pop(context, "A");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option B"),
                onPressed: () {
                  print("Options B");
                  Navigator.pop(context, "B");
                },
              ),
              Divider(),
              SimpleDialogOption(
                child: Text("Option C"),
                onPressed: () {
                  print("Options C");
                  Navigator.pop(context, "C");
                },
              )
            ],
          );
        });
    print(result);
  }

  _modelBottomSheet() async {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return Container(
            height: 220,
            child: Column(
              children: <Widget>[
                ListTile(
                  title: Text("分享 A"),
                  onTap: () {
                    print("分享 A");
                    Navigator.pop(context, "A");
                  },
                ),
                Divider(),
                ListTile(
                  title: Text("分享 B"),
                  onTap: () {
                    print("分享 B");
                    Navigator.pop(context, "B");
                  },
                ),
                Divider(),
                ListTile(
                  title: Text("分享 C"),
                  onTap: () {
                    print("分享 C");
                    Navigator.pop(context, "C");
                  },
                )
              ],
            ),
          );
        });
  }

  _toast() async {
    Fluttertoast.showToast(
        msg: '提示信息',
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 3,
        backgroundColor: Colors.black87,
        textColor: Colors.white,
        fontSize: 16.0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('alert弹出框-AlertDialog'),
              onPressed: _alertDialog,
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('select弹出框-SimpleDialog'),
              onPressed: _simpleDialog,
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('ActionSheet弹出框-showModalBottomSheet'),
              onPressed: _modelBottomSheet,
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('toast-fluttertoast第三方库'),
              onPressed: _toast,
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('显示自定义Dialog'),
              onPressed:(){
                showDialog(
                  context: context,
                  builder: (context){
                    return MyDialog(title:'关于我们',content:'z这是内容部分');
                  }
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}