Flutter自定义Dialog，简洁好看，丰富多样

最新推荐文章于 2024-08-16 15:30:00 发布

weixin_33922670

最新推荐文章于 2024-08-16 15:30:00 发布

阅读量5.6k

点赞数

文章标签：移动开发

原文链接：https://juejin.im/post/5cc7dca3518825253d0348f3

版权

项目地址： flutter_dialog

部分效果图

参数说明

用法

把项目中的CustomDialog.dart文件复制到你的项目中。

1、带有标题的Dialog

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('-----------点击了确定按钮');
      },
    );
  }
);复制代码

更多用例请参考项目中MyHomePage.dart文件。后续也会整理成Dart Package包发布到Pub上，这样就可以直接在pubspec.yaml中引用了。

转载于:https://juejin.im/post/5cc7dca3518825253d0348f3