23Flutter Dialog弹框

最新推荐文章于 2024-06-23 04:42:49 发布
最新推荐文章于 2024-06-23 04:42:49 发布
阅读量580 收藏
点赞数
分类专栏： Flutter 文章标签： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LJLThomson/article/details/115916934
版权

Dialog弹框

1.AlertDialog弹框

Flutter AlertDialog对话框是一个警报对话框，会通知用户需要确认的情况。警报对话框具有可选标题和可选的操作列表。

————————可以添加asyn和await来，同时间选择器一致，也可以不添加

属性说明
title标题
titlePadding标题内边距
titleTextStyle标题文字样式
content内容
contentPadding内容 内边距 默认EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
contentTextStyle内容文字样式
actions对话框下边的Widget组件集合
backgroundColor背景颜色
elevation阴影高度
semanticLabel
shape形状

barrierDismissible ——————默认退出

_alertDialog() async{//异步等待，值赋予result
    var result=await showDialog (
        context: context,
        builder: (context){
          return  AlertDialog (
            title: Text('System'),
            content: Text('你确定要删除吗？'),
            actions: <Widget>[
              RaisedButton(
                child: Text('取消'),
                onPressed: (){
                  Navigator.pop(context,'cancle'); // 退出
                },
              ),
              RaisedButton(
                child: Text('确定'),
                onPressed: (){
                  Navigator.pop(context);
                },
              )
            ],
          );
        }
    );
    print(result);//cancle
  }

2.simpleDialog

_simpleDialog() async{
    var result=await showDialog(
        context: context,
        builder: (context){
          return SimpleDialog(
            title: Text('选择了内容'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('one'),
                onPressed: (){
                  Navigator.pop(context,'one');
                },
              ),
              SimpleDialogOption(
                child: Text('two'),
                onPressed: (){
                  Navigator.pop(context,'two');
                },
              ),
              SimpleDialogOption(
                child: Text('three'),
                onPressed: (){
                  Navigator.pop(context,'three');
                },
              )
            ],
          );
        });
    print(result);
  }

3.showModalBottomSheet

_simpleDialog() async{
    var result=await showDialog(
        context: context,
        builder: (context){
          return SimpleDialog(
            title: Text('选择了内容'),
            children: <Widget>[
              SimpleDialogOption(
                child: Text('one'),
                onPressed: (){
                  Navigator.pop(context,'one');
                },
              ),
              SimpleDialogOption(
                child: Text('two'),
                onPressed: (){
                  Navigator.pop(context,'two');
                },
              ),
              SimpleDialogOption(
                child: Text('three'),
                onPressed: (){
                  Navigator.pop(context,'three');
                },
              )
            ],
          );
        });
    print(result);
  }

4. toast 和fluttertoast

  1. 搜索toast 查看说明使用

    toast: ^0.1.5

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0sN1mOYj-1618918665931)(C:\Users\jialiang.li\AppData\Roaming\Typora\typora-user-images\image-20201116234238779.png)]

  2. flutterToast

    fluttertoast: ^7.1.1

Fluttertoast.showToast(
        msg: "This is Center Short Toast",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIosWeb: 1,
        backgroundColor: Colors.red,
        textColor: Colors.white,
        fontSize: 16.0
    );

FToast fToast;

@override
void initState() {
    super.initState();
    fToast = FToast();
    fToast.init(context);
}

_showToast() {
    Widget toast = Container(
        padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
        decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(25.0),
        color: Colors.greenAccent,
        ),
        child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
            Icon(Icons.check),
            SizedBox(
            width: 12.0,
            ),
            Text("This is a Custom Toast"),
        ],
        ),
    );


    fToast.showToast(
        child: toast,
        gravity: ToastGravity.BOTTOM,
        toastDuration: Duration(seconds: 2),
    );
    
    // Custom Toast Position
    fToast.showToast(
        child: toast,
        toastDuration: Duration(seconds: 2),
        positionedToastBuilder: (context, child) {
          return Positioned(
            child: child,
            top: 16.0,
            left: 16.0,
          );
        });
}

5. 自定义Dialog

  1. 简单用法

    showDialog(
   context: context,
   barrierDismissible: false,
   builder: (_) {
     return CustomDialog(
       title: '这是一个标题',
       content: '这里是弹窗的提示内容',
     );
   }
 );

  2. 自定义确定按钮颜色

    showDialog(
  context: context,
  barrierDismissible: false,
  builder: (_) {
    return CustomDialog(
      title: '这是一个标题',
      content: '这里是弹窗的提示内容',
      isCancel: true,
      confirmColor: Colors.green[400]
    );
  }
);

  3. 带图片的Dialog

    
showDialog(
  context: context,
  barrierDismissible: false,
  builder: (_) {
    return CustomDialog(
      image: './images/ic_success.png',
      imageHintText: '数据加载成功'
    );
  }
);

  4. Dialog按钮点击回调监听

    
showDialog(
  context: context,
  barrierDismissible: false,
  builder: (_) {
    return CustomDialog(
      title: '这是一个标题',
      content: '这里是弹窗的提示内容',
      confirmCallback: () {
        print('-----------点击了确定按钮');
      },
    );
  }
);

案例：定时器，延迟3秒之后消失


import 'package:flutter/material.dart';

import 'dart:async';

class MyDialog extends Dialog {
  String title;
  String content;
  MyDialog(this.title, this.content);

  //定时器，3秒后自动关闭dialog
  _showTimer(context) {
    Timer.periodic(Duration(milliseconds: 3000), (t) {
      Navigator.pop(context);
      t.cancel();
    });
  }

  @override
  Widget build(BuildContext context) {

    _showTimer(context);
    // TODO: implement build
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          height: 200,
          width: 300,
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

案例：相片选择器



import 'package:flutter/material.dart';

class ImagePickerDialog extends StatefulWidget {
  @override
  _ImagePickerDialogState createState() => _ImagePickerDialogState();
}

class _ImagePickerDialogState extends State<ImagePickerDialog> {
  _dismissDialog() {
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Column(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: _dismissDialog,
              child: Container(),
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0)),
            ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '拍照',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                Divider(
                  color: Colors.red,
                  height: 1,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '从手机相册选择',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                Container(height: 10, color:Colors.black),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '取消',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

6. CupertinoAlertDialog IOS风格

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DialogPage(),
    );
  }
}

class DialogPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Demo'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            _showDialog2(context);
          },
          child: Text('点击显示弹窗'),
        ),
      ),
    );
  }
}

void _showDialog(widgetContext) {
  showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
      return CupertinoAlertDialog(
        title: Text('确认删除'),
        actions: [
          CupertinoDialogAction(
            child: Text('确认'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('取消'),
            isDestructiveAction: true,
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}
void _showDialog2(widgetContext) {
  showCupertinoDialog(
    context: widgetContext,
    builder: (context) {
      return CupertinoAlertDialog(
        title: Text('请评价'),
        content: Text('\n我们很重视您的评价！'),
        actions: <Widget>[
          CupertinoDialogAction(
            child: Text('非常好'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('一般'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('非常差'),
            isDestructiveAction: true,
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          CupertinoDialogAction(
            child: Text('非常差'),
            isDestructiveAction: true,
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

7.AboutDialog

8自定义Dialog

————————简单说，其实就是child来添加一个新的widget，如果Android中布局

案例一：


import 'package:flutter/material.dart';

import 'dart:async';

class MyDialog extends Dialog {
  String title;
  String content;
  MyDialog(this.title, this.content);

  //定时器，3秒后自动关闭dialog
  _showTimer(context) {
    Timer.periodic(Duration(milliseconds: 3000), (t) {
      Navigator.pop(context);
      t.cancel();
    });
  }

  @override
  Widget build(BuildContext context) {

    _showTimer(context);
    // TODO: implement build
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          height: 200,
          width: 300,
          color: Colors.white,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                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,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

案例二：

import 'package:flutter/material.dart';

class ImagePickerDialog extends StatefulWidget {
  @override
  _ImagePickerDialogState createState() => _ImagePickerDialogState();
}

class _ImagePickerDialogState extends State<ImagePickerDialog> {
  _dismissDialog() {
    Navigator.of(context).pop();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Column(
        children: <Widget>[
          Expanded(
            child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              onTap: _dismissDialog,
              child: Container(),
            ),
          ),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20.0),
                  topRight: Radius.circular(20.0)),
            ),
            child: Column(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '拍照',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                Divider(
                  color: Colors.red,
                  height: 1,
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '从手机相册选择',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
                Container(height: 10, color:Colors.black),
                Padding(
                  padding: const EdgeInsets.symmetric(vertical: 20),
                  child: Text(
                    '取消',
                    style: TextStyle(fontSize: 18),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
LJLThomson
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter 自定义dialog工具类
01-07
* 自定义Loading等待弹框 * @params text 提示内容 */ class LoadingDialog extends Dialog { final String text; LoadingDialog({Key key, @required this.text}) : super(key: key); @override Widget bu
Flutter 自定义Dialog
01-07
import 'package:flutter/material.dart'; import './components/MyDialog.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { ...
Flutter 组件之AlertDialog、SimpleDialog、showModalBottomSheet、showToast、自定义Dialog
热门推荐
June.1
03-28 1万+
AlertDialog dialog弹框 在 showDialog中 定义 AlertDialog _alertDialog () async { var result = showDialog<void>( context: context, barrierDismissible: true, // false = user mu...
flutter 处理dialog点击事件回调
weixin_30470643的博客
09-25 1540
flutter 处理dialog点击事件回调 import 'package:flutter/material.dart'; import 'package:scoped_model/scoped_model.dart'; void main() { runApp(new RootLayout()); } class RootLayout extends St...
Flutter开发之——AlertDialog
最新发布
2401_85730911的博客
06-23 588
小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！资料⬅专栏获取效漫长且无助**。
flutter组件_AlertDialog
freeman_xv1的博客
04-07 637
flutter组件 AlertDialog组件的使用
全局UI方法-弹窗一警告弹窗（AlertDialog）
yyxhzdm的博客
03-27 944
当设置autoCancel为false时，点击弹窗之外的空白区域时，弹窗不消失。当不设置该属性时，它的默认值是true，即点击弹窗之外的空白区域时，弹窗关闭。AlertDialogParamWithButtons：按钮最多可以设置两个。AlertDialogParamWithConfirm：显示的按钮只有一个。显示警告弹窗组件，可设置文本内容与响应回调。点击遮障层（弹窗之外的空白区域）时，是否关闭弹窗。点击遮障层（弹窗之外的空白区域）时，是否关闭弹窗。5.alignment：设置弹窗弹出的位置。
flutter 弹窗队列封装，里面的自定义回调值得学习
weixin_44911775的博客
10-12 486
里面的这里回调TaskCallback Function学习一下，挺重要的。task1，task2 为模拟的耗时任务。
Flutter之自定义Dialog实现版本更新弹窗功能的实现
08-18
Flutter之自定义Dialog实现版本更新弹窗功能的实现 Flutter是一款跨平台的移动应用开发框架，它提供了非常多的组件和功能，使得开发者可以快速构建高质量的应用程序。在实际开发中，我们经常需要实现一些自定义的...
flutter_dialog.zip
06-08
这个项目资源是flutter自定义dialog 的源码 主要讲到flutter里面的dialog 的各种用法 还有一些三方的dialog配合使用 以及自定义的dialog的实现和使用 希望能帮助到各位同学
Flutter软件包，可轻松集成dialogflow和支持dialogflow v2-Flutter开发
05-27
Flutter应用程序的Dialogflow v1和v2。 :red_heart:Star:red_heart:支持该项目的仓库。 谢谢！ 一个新的Flutter程序包。 Flutter和Dialogflow v1和v2（适用于Flutter应用）的示例真棒教程示例。 :red_heart:Star:red...
Flutter AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast、自定义 Dialog
manerzi的博客
01-10 152
Flutter AlertDialog 、SimpleDialog、 showModalBottomSheet、showToast、自定义 Dialog
Flutter中展示dialog 并将dialog中的数据回传到界面上 更新界面显示 用到类：future await async
情怀中的释然~
12-31 2340
大致操作如动图所示 布局代码 // 选择部门 InkWell( // 包裹后设置点击事件 onTap: _pickDept, child: Row( children: <Widget>[ Image( image: AssetImage( "assets/images/ic_login_select_depar...
Flutter进阶—质感设计之模态底部面板
咖啡花园
03-07 5797
模态底部面板是菜单或对话框的替代方案，可防止用户与其他控件进行互动，可以使用showModalBottomSheet函数创建和显示模态底部面板。import 'package:flutter/material.dart';class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {
解决AlertDialog自定义布局没有dismiss（）方法的问题
杰森丶郭达斯坦森的博客
08-16 1561
final AlertDialog.Builder builder = new AlertDialog.Builder(XitongMessagesMoreActivity.this); builder.setTitle("标题"); LayoutInflater inflater = LayoutInflater.from(XitongMessagesMoreActivity.this); f...
Flutter Dialog 对话框
马志武的博客
07-06 6312
Flutter 提供了很多Dialog 弹窗，如：AboutDialog、AlertDialog、SimpleDialog、CupertinoAlertDialog、CupertinoFullscreenDialogTransition、BottomSheet。 在没有比官网介绍的更贴切了 AboutDialog 这是一个对话框，其中包含应用程序的图标，名称，版本号和版权，以及显示应...
flutter -自定义dialog弹窗
ifredom
10-15 3070
弹窗内容需要超出本身时 这里定位有个小技巧，还可以使用 Align()来替代Positioned(),便于定位到中间位置，但是超出内容本身得区域，比如蓝色小圆，具体位置还需要计算 import 'package:flutter/material.dart'; class CustomDialog extends StatelessWidget { final String title,...
flutter listview 滚动到底部_Flutter 入门指北之弹窗和提示（干货）
weixin_39906192的博客
11-28 441
码个蛋(codeegg)第 607 次推文Flutter系列文章:《Flutter 入门指北(Part 1)之 Dart》《Flutter 入门指北(Part 2)之基础部件》《Flutter 入门指北(Part 3)之 Appbar，Scaffold 填坑》《Flutter 入门指北(Part 4)之容器部件》《Flutter 入门指北(Part 5)之输入处理及实战》《Flutter 入门指北...
Flutter入门学习--(16)布局定位控件Positioned
游响云停专栏
01-25 4081
 Positioned控件主要用来设置绝对布局，必须配合Stack控件来使用， Positioned控件 通过设置left和top属性可以设置控件的绝对位置   import 'package:flutter/material.dart'; void main() =&gt; runApp(MyApp()); class MyApp extends StatelessWidget ...
flutter dialog
10-13
Flutter中的Dialog是一种常用的弹窗组件，可以用于展示提示信息、警告信息、确认信息等。Flutter中提供了多种Dialog类型，如AlertDialog、SimpleDialog、BottomSheet等。 AlertDialog是最常用的Dialog类型之一，它可以展示一个标题、一段内容和一些操作按钮。下面是一个简单的AlertDialog示例： ``` showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: Text('提示'), content: Text('确定要删除吗？'), actions: <Widget>[ FlatButton( child: Text('取消'), onPressed: () => Navigator.of(context).pop(), ), FlatButton( child: Text('确定'), onPressed: () { // 执行删除操作 Navigator.of(context).pop(); }, ), ], ); }, ); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值