【flutter】完全自定义样式模态对话框

 示例完成结果展示:

 

示例组件代码:

context:上下文

title:提示标题,null时不显示

content:提示内容,null时不显示

cancelText:取消按钮文字,null时不显示取消按钮

confirmText:确认按钮文字

//lib\widgets\my.dart
class My {
static Future<bool> dialog(
    BuildContext context, {
    String? title = "提示",
    String? content,
    String? cancelText = "Cancel",
    String confirmText = "Confirm",
  }) async {
    final bool? isConfirm = await showDialog<bool>(
      context: context,
      //点击背景灰色区域是否关闭对话框
      barrierDismissble: false,
      builder: (BuildContext context) => Dialog(
        //这部分是对话框样式,可以完全自定义
        child: Container(
          width: 560.w,
          padding: EdgeInsets.only(top: 40.w),
          clipBehavior: Clip.hardEdge,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16.w),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              if (title != null)
                Padding(
                  padding: EdgeInsets.
      ),only(bottom: 34.w, left: 30.w, right: 30.w),
                  child: Text(
                    title,
                    style: TextStyle(
                      color: const Color(0xFF353A37),
                      fontSize: 36.w,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              if (content != null)
                Padding(
                  padding: EdgeInsets.only(bottom: 40.w, left: 30.w, 
                  child: Text(
                    content,
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: const Color(0xFF858786),
                      fontSize: 28.w,
                    ),
                  ),
                ),
              Row(
                children: [
                  if (cancelText != null)
                    Expanded(
                      child: GestureDetector(
                        //点击取消按钮
                        onTap: () {
                          Navigator.pop(context, false);
                        },
                        child: Container(
                          height: 100.w,
                          decoration: const BoxDecoration(
                            border: Border(
                              top: BorderSide(color: Color(0xFFE5E5E5)),
                              right: BorderSide(
                                color: Color(0xFFE5E5E5),
                              ),
                            ),
                          ),
                          child: Center(
                            child: Text(
                              cancelText,
                              style: TextStyle(
                                fontSize: 36.w,
                                color: const Color(0xFF858786),
                                fontWeight: FontWeight.w700,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  Expanded(
                    child: GestureDetector(
                      //点击确认按钮
                      onTap: () {
                        Navigator.pop(context, true);
                      },
                      child: Container(
                        height: 100.w,
                        decoration: const BoxDecoration(
                          border: Border(
                            top: BorderSide(color: Color(0xFFE5E5E5)),
                          ),
                        ),
                        child: Center(
                          child: Text(
                            confirmText,
                            style: TextStyle(
                              fontSize: 36.w,
                              color: const Color(0xFF40B169),
                              fontWeight: FontWeight.w700,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
    //返回结果
    return isConfirm ?? false;
  }
}

页面上使用:

//导入包
import 'package:app_hongxin/widgets/my.dart';

......

onTap()async{
    if(await My.dialog(
      context,
      title: "提示",
      content: "提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容提示内容",
    )){
      print("点击确认");
    }else{
      print("点击取消");
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/336393.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

每日一练【最大连续1的个数】

一、题目描述 给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 二、题目解析 本题同样是利用滑动窗口的解法。 首先进入窗口&#xff0c;如果是1&#xff0c;就直接让right&#xff0c;但是如果是…

Android双击图片放大移动图中双击点到ImageView区域中心,Kotlin

Android双击图片放大移动图中双击点到ImageView区域中心&#xff0c;Kotlin 初始化状态&#xff0c;ImageView里面只是显示一张fitcenter被缩放的原图&#xff0c;当手指在图片上双击后&#xff08;记录双击点位置&#xff1a;mCurX&#xff0c;mCurY&#xff09;画一个红色小圆…

html5实现好看的年会邀请函源码模板

文章目录 1.设计来源1.1 邀请函主界面1.2 诚挚邀请界面1.3 关于我们界面1.4 董事长致词界面1.5 公司合作方界面1.6 活动流程界面1.7 加盟支持界面1.8 加盟流程界面1.9 加盟申请界面1.10 活动信息界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLei…

SpringMVC 文件上传和下载

文章目录 1、文件下载2、文件上传3. 应用 Spring MVC 提供了简单而强大的文件上传和下载功能。 下面是对两者的简要介绍&#xff1a; 文件上传&#xff1a; 在Spring MVC中进行文件上传的步骤如下&#xff1a; 在表单中设置 enctype“multipart/form-data”&#xff0c;这样…

logstack 日志技术栈-04-opensource 开源工具 Syslog-ng+Highlight.io

5. Syslog-ng Syslog-ng 是一个开源的日志管理解决方案&#xff0c;主要用于收集和处理日志数据。它可以从多种源收集日志&#xff0c;包括系统日志、网络设备日志和第三方应用日志。 然后将日志解析、分类、重写和关联到统一格式中&#xff0c;然后将其存储或安全地传输到不同…

Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)

1. 需求&#xff1a; 有多个&#xff08;不确定具体数量&#xff09;的upload组件&#xff0c;每个都需要单独上传获取文件&#xff08;JS File类型&#xff09;&#xff0c;不需要action上传到指定url&#xff0c;自定义上传动作和http操作。而且因为不确定组件数量&#xff0…

vscode配置web开发环境(WampServer)

这里直接去下载了集成的服务器组件wampserver&#xff0c;集成了php&#xff0c;MySQL&#xff0c;Apache 可能会出现安装问题&#xff0c;这里说只有图上这些VC包都安装了才能继续安装&#xff0c;进入报错里提供的链接 在页面内搜索相关信息 github上不去可以去镜像站 下载…

ChatGPT 和文心一言,各有优劣

目录 前言 具体比较 智能回复能力 语言准确性 知识库丰富度 生成内容风格 总结 前言 近年来&#xff0c;随着人工智能技术的不断进步&#xff0c;AI助手已成为人机交互的重要载体。其中代表性的两个AI助手系统分别是OpenAI推出的ChatGPT,以及腾讯研发的文心一言。这两个…

实战纪实 | 某配送平台zabbix 未授权访问 + 弱口令

本文由掌控安全学院 - 17828147368 投稿 找到一个某src的子站&#xff0c;通过信息收集插件wappalyzer&#xff0c;发现ZABBIX-监控系统&#xff1a; 使用谷歌搜索历史漏洞&#xff1a;zabbix漏洞 通过目录扫描扫描到后台&#xff0c;谷歌搜索一下有没有默认弱口令 成功进去了…

Ubuntu安装mysql8详细步骤

1、拉取镜像 docker pull mysql:8.0.20 2、启动镜像 docker run -p 3307:3306 --name mysql8 -e MYSQL_ROOT_PASSWORD123456 -d mysql:8.0.20 检查是否启动成功 docker ps 3、配置挂载 创建挂载目录&#xff08;请检查保证创建成功&#xff09; mkdir -p /docker/mysql8.0.20/…

3d渲染软件有哪些?3d云渲染推荐

目前市面上的3D渲染软件非常多&#xff0c;不同的建模软件都有自己的渲染方式&#xff0c;根据所处行业的不同和项目需要&#xff0c;设计师可以选择不同的软件帮助展示最终效果。 主流的渲染软件有&#xff1a;VRay和Corona&#xff1a;一般用于室内效果图渲染&#xff0c;与3…

009 Linux_文件系统 | 软硬链接

前言 本文将会向你介绍文件系统与软硬链接 文章重点 本文将会先向你介绍文件是如何在磁盘上进行管理的&#xff0c;关于文件的管理将会从管理属性和管理内容两方面来谈&#xff0c;最后会向你介绍软硬链接的概念 文件在磁盘中的管理 首先&#xff0c;假设一个磁盘200GB&#…

小样本跨域(cross-domain)系列工作(超级详细)

小样本跨域&#xff08;cross-domain&#xff09;系列工作 本文记录近期阅读过的小样本跨域相关论文&#xff0c;每一篇文章都经过了自己的深入思考和总结&#xff0c;按照&#xff1a;解决什么问题、动机、方法、数据集、结论和启发的顺序进行总结&#xff0c;同时会有部分细…

SaaS多租户篇

文章目录 1. 多租户是什么2. 技术组件2.1 如何实现多租户的DB封装2.2 如何实现多租户的redis封装2.3 如何实现多租户的Web和Security封装 1. 多租户是什么 2. 技术组件 2.1 如何实现多租户的DB封装 2.2 如何实现多租户的redis封装 2.3 如何实现多租户的Web和Security封装

消息中间件之Kafka(二)

1.Kafka线上常见问题 1.1 为什么要对topic下数据进行分区存储? 1.commit log文件会受到所在机器的文件系统大小的限制&#xff0c;分区之后可以将不同的分区放在不同的机器上&#xff0c; 相当于对数据做了分布式存储&#xff0c;理论上一个topic可以处理任意数量的数据2.提…

初识计算机图形学

初识计算机图形学 笔记来源&#xff1a;【老奇】阴差阳错 撼动世界的游戏引擎 1.MVP Transformation 详见本人博客&#xff1a; 1.Transformation 2.梳理从MVP变换到光栅化的过程 MVP变换将空间中3D物体投影到2D屏幕 2.Rasterization 详见本人博客&#xff1a; 1.Rasteri…

教您如何下载保存钉钉视频到电脑本地

教您如何下载保存钉钉视频到电脑和手机相册地瓜网络技术 大家好&#xff0c;我们这边是地瓜网络技术&#xff01;30秒教会你下载钉钉视频&#xff01;现在很多群管理员把视频设置为禁止下载&#xff0c;导致我们无法正常的下载群直播回放视频&#xff0c; 今天我们就教大家如何…

【核心复现】基于改进鲸鱼优化算法的微网系统能量优化管理matlab

目录 一、主要内容 1 冷热电联供型微网系统 2 长短期记忆网络(Long Short Term Memory, LSTM) 3 改进鲸鱼优化算法 二、部分代码 三、运行结果 四、下载链接 一、主要内容 该程序为《基于改进鲸鱼优化算法的微网系统能量优化管理》matlab代码&#xff0c;主要内容如下&…

易优demo网站测试结果

易优demo网站测试结果-06 1、信息收集 网站账号&#xff1a;admin 密码&#xff1a;Aa123456 2、存在的漏洞 2.1 后台弱口令漏洞 http://eyoucms-s347fqn.gxalabs.com/login.php?sAdmin/login网站账号&#xff1a;admin 密码&#xff1a;Aa123456 成功登陆 2.2 代码远程…

51单片机8*8点阵屏

8*8点阵屏 8*8点阵屏是一种LED显示屏&#xff0c;它由8行和8列的LED灯组成。每个LED灯的开闭状态都可以独立控制&#xff0c;从而可以显示出数字、字母、符号、图形等信息。 8*8点阵屏的原理是通过行列扫描的方式&#xff0c;控制LED灯的亮灭&#xff0c;从而显示出所需的图案或…
最新文章