13.Flutter(Widget)-Dialog

截屏2022-06-28 18.47.55.png

  flutter_easyloading: 3.0.3
  fluttertoast: ^8.0.9

Flutter AlertDialog SimpleDialog showModalBottomSheet 自定义Dialog

1.DialogPage

import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:fluttertoast/fluttertoast.dart';

import 'ZFLDialog.dart';
class DialogPage extends StatefulWidget {
  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("dialog标题"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: Column(
          children: [
            RaisedButton(
              onPressed: tAlertDialog,
              child: Text("系统AlertDialog"),
            ),
            RaisedButton(
              onPressed: tSimpleDialog,
              child: Text("系统SimpleDialog"),
            ),
            RaisedButton(
              onPressed: tShowModalBottomSheet,
              child: Text("系统ShowModalBottomSheet"),
            ),
            RaisedButton(
              onPressed: tZFLDialog,
              child: Text("自定义Dialog"),
            ),
            RaisedButton(
              onPressed: toastDialog,
              child: Text("fluttertoast的toast"),
            ),
            RaisedButton(
              onPressed: easyLoadingToast,
              child: Text("easyloading的toast"),
            ),
          ],
        ),
      ),
    );
  }

  tAlertDialog() {
    showDialog(
        context: context,
        builder: (context) {
          return AlertDialog(
              title: Text("AlertDialog标题"),
              content: Text("内容"),
              actions: [
                RaisedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("取消"),
                ),
                RaisedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text("确定"),
                )
              ]);
        });
  }

  tSimpleDialog() {
    showDialog(
        context: context,
        builder: (context) {
          return SimpleDialog(
            title: Text("SimpleDialog标题"),
            children: [
              SimpleDialogOption(
                onPressed: () {},
                child: Text("男"),
              ),
              SimpleDialogOption(
                onPressed: () {},
                child: Text("女"),
              )
            ],
          );
        });
  }

  tShowModalBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Container(
            width: 200,
            height: 200,
            child: Column(
              children: [
                ListTile(
                  title: Text("性别0"),
                  onTap: () {},
                ),
                Divider(),
                ListTile(
                  title: Text("性别1"),
                  onTap: () {},
                ),
                Divider(),
                ListTile(
                  title: Text("性别2"),
                  onTap: () {},
                ),
              ],
            ),
          );
        });
  }

  tZFLDialog(){
    showDialog(context: context, builder: (context){
      return ZFLDialog("dasda", "ada");
    });
  }

  toastDialog(){
    Fluttertoast.showToast(msg: "你好");
  }

  easyLoadingToast(){
    EasyLoading.showToast("hhhhh");
  }
}

2.ZFLDialog

import 'package:flutter/material.dart';
class ZFLDialog extends Dialog {
  String title;
  String content;

  ZFLDialog(this.title, this.content);

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
            width: 200,
            height: 200,
            color: Colors.white,
            child: Column(
              children: [
                Stack(
                  children: [
                    Align(
                      alignment: Alignment.center,
                      child: Text("$title"),
                    ),
                    Align(
                        alignment: Alignment.centerRight,
                        child: InkWell(
                          child: Icon(Icons.close),
                          onTap: () {
                            Navigator.pop(context);
                          },
                        )),
                  ],
                ),
                Divider(),
                Container(
                  padding: EdgeInsets.all(10),
                  alignment: Alignment.topLeft,
                  child: Text("$content"),
                )
              ],
            )),
      ),
    );
  }
}

Flutter_Dialog.gif