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

4,841 阅读1分钟
项目地址: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中引用了。