Flutter自定义对话框Dialog_flutter 自定义dialog-CSDN博客

本文链接：https://blog.csdn.net/weixin_43671125/article/details/105309083

本文详细介绍了一种在Flutter中自定义对话框的方法，通过创建SassDialog类并利用showDialog函数，实现了带有标题、内容及自定义按钮的弹窗，并提供了完整的代码示例和调用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter自定义对话框Dialog

一、展示

在这里插入图片描述

二、完整代码

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:js_app/utils/UIDataUtils.dart';

import 'SPDataUtils.dart';

class DialogUtil{
   
   
  static Widget show(BuildContext mContext,{
   
   String title='提示',bool onlyRight = false,String content='内容',String leftText='取消',String rightText='确定',Function okCallBack,Function cancelCallBack,String okRouteUri="",bool input = false}) {
   
   
    showDialog(
        context: mContext,
        builder: (BuildContext context) {
   
   
          return SassDialog(title:title,content:content,leftText:leftText,rightText:rightText,onlyRight:onlyRight,okCallBack:okCallBack,cancelCallBack:cancelCallBack,okRouteUri: okRouteUri,input:input);
        }
    );
  }
}

class SassDialog extends Dialog{
   
   
  final String title;               //标题
  final String content;             //内容
  final String leftText;            //左边按钮文字
  final String rightText;           //右边按钮文字
  final bool onlyRight;           //右边按钮文字
  final Function okCallBack;        //右边回调
  final Function cancelCallBack;    //左边回调
  final String okRouteUri;          //右边按钮跳转路由
  final bool input;          //是否展示输入框
  SassDialog({
   
   this.title,this.content,this.leftText,this.rightText,this.onlyRight,this.okCallBack,this.cancelCallBack,this.okRouteUri,this.input});
  @override
  Widget build(BuildContext dContext) {
   
   
    TextEditingController _controller = TextEditingController();
		
    return new Material( //创建透明层
      type: MaterialType.transparency, //透明类型
      //自定义dialog布局
      child: new Center( //保证控件居中效果
        child: Padding(
          padding: EdgeInsets.only(top: ScreenUtil().setHeight