Dialog AlertDialog 、SimpleDialog、showModalBottomSheet、showToast Flutter 自定义 Dialog

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:untitled/pages/itying/DialogPage.dart';

class DialogDemo extends StatefulWidget {
  const DialogDemo({Key? key}) : super(key: key);

  @override
  State<DialogDemo> createState() => _DialogDemoState();
}

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

                    });
                },
              ),
          ],
        ),
      ),
    );
    
  }

  _alertDialog() async{
    var result = await showDialog(
      context: context, 
      builder: (BuildContext context){
        return AlertDialog(
          title: Text("提示信息!"),
          content: Text("您确定要删除吗?"),
          actions: [
            TextButton(
             child: Text("取消"),
                onPressed: (){
                   print("取消");
                  Navigator.pop(context,'Cancle');
                }, 
            ),
            TextButton(
              child: Text("确定"),
              onPressed: (){
                  print("确定");
                  Navigator.pop(context,"Ok");
                },
              )
          ],

        );
      }
    );
    print(result);
  }

  _simpleDialog() async{
    var result = await showDialog(
      barrierDismissible:false,   //表示点击灰色背景的时候是否消失弹出框
      context: context, 
      builder: (BuildContext context){
        return SimpleDialog(
          title: Text("选择内容"),
          children: [
            SimpleDialogOption(
              child: Text("Option A"),
              onPressed: (){
                print("Option A");
                 Navigator.pop(context,"A");
              },
            ),
             Divider(),
              SimpleDialogOption(
               child: Text("Option B"),
               onPressed: (){
                 print("Option B");
                 Navigator.pop(context,"B");
               },
             ),
             Divider(),
             SimpleDialogOption(
               child: Text("Option C"),
               onPressed: (){
                 print("Option C");
                 Navigator.pop(context,"C");
               },
             ),
             Divider(),
          ],
        );
      });
      print(result);
  }

  _modelBottomSheet() async{
    var result=await showModalBottomSheet(
        context:context,
        builder: (context){
            return Container(
              height: 220,
              child: Column(
                children: <Widget>[

                  ListTile(
                    title: Text("分享 A"),
                    onTap: (){
                      Navigator.pop(context,"分享 A");
                    },
                  ),
                  Divider(),
                   ListTile(
                    title: Text("分享 B"),
                    onTap: (){
                       Navigator.pop(context,"分享 B");
                    },
                  ),
                  Divider(),
                   ListTile(
                    title: Text("分享 C"),
                    onTap: (){
                      Navigator.pop(context,"分享 C");
                    },
                  )                
                ],
              ),
            );
        }
      );
  
      print(result);

  }

  _toast(){
    Fluttertoast.showToast(
      msg: "提示信息",
      toastLength: Toast.LENGTH_SHORT,
      gravity: ToastGravity.BOTTOM,
      timeInSecForIosWeb: 1,
      backgroundColor: Colors.black,
      textColor: Colors.white,
      fontSize: 16.0
    );

  }
}

Flutter 自定义 Dialog

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);
        timer.cancel();   //取消定时器   t.cancel();
    });
  }

  @override
  Widget build(BuildContext context) {

    _showTimer(context);
    // TODO: implement build
    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),
              )
            ],
          ),
         
      )),
    );
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值