功能更新频繁，请以 github 上都中文介绍为准：https://github.com/fluttercandies/flutter_smart_dialog
前言
Q：你一生中闻过最臭的东西，是什么？
A：我那早已腐烂的梦。
兄弟萌！！！我又来了！
这次，我能自信的对大家说：我终于给大家带了一个，能真正帮助大家解决诸多坑比场景的 pub 包！
将之前的 flutter_smart_dialog，在保持 api 稳定的基础上，进行了各种抓头重构，解决了一系列问题
现在，我终于可以说：它现在是一个简洁，强大，侵入性极低的 pub 包！
关于侵入性问题
同时，我在 pub 包内部设计了一个弹窗栈，能自动移除栈顶弹窗，也可以定点移除栈内标记的弹窗。
问题
使用系统弹窗存在一系列坑，来和各位探讨探讨
必须传 BuildContext
在一些场景必须多做一些传参工作，蛋痛但不难的问题
loading 弹窗
使用系统弹窗做 loading 弹窗，肯定遇到过这个坑比问题
loading 封装在网络库里面：请求网络时加载 loading，手贱按了返回按钮，关闭了 loading
然后请求结束后发现：特么我的页面怎么被关了！！！
系统弹窗就是一个路由页面，关闭系统就是用 pop 方法，这很容易误关正常页面
当然肯定有解决办法，路由监听的地方处理，此处就不细表了
某页面弹出了多个系统 Dialog，很难定点关闭某个非栈顶弹窗
蛋蛋，这是路由入栈出栈机制导致的，理解的同时也一样要吐槽
系统 Dialog，点击事件无法穿透暗色背景
这个坑比问题，我是真没辙
思考
上面列举了一些比较常见的问题，最严重的问题，应该就是 loading 的问题
系统的 Page 就是基于 Overlay 去实现的，咱们也要骚起来，从 Overlay 入手
这次，我要一次性帮各位解决：toast 消息，loading 弹窗，以及更强大的自定义 dialog！
快速上手
初始化
dependencies: flutter_smart_dialog: ^3.0.1
复制代码
初始化方式一：强力推荐😃
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage, // here navigatorObservers: [FlutterSmartDialog.observer], // here builder: FlutterSmartDialog.init(), ); }}
复制代码
初始化方式二：兼容老版本😊
老版本初始化方式仍然有效；为了确保低侵入性，你需要额外增加俩个参数
实例MaterialApp之前，调用下FlutterSmartDialog.monitor()
增加FlutterSmartDialog.observer
void main() => runApp(MyApp());
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // here FlutterSmartDialog.monitor(); return MaterialApp( home: HomePage, // here navigatorObservers: [FlutterSmartDialog.observer], /// here builder: (BuildContext context, Widget? child) { return FlutterSmartDialog(child: child); }, ); }}
复制代码
大功告成🚀
上面俩种初始化方式，任选一种即可；然后，就可以完整使用本库的所有功能了
我非常推荐第一种初始化的方式，因为足够简洁；简洁明了的东西用起来，会让人心情愉悦🌞
极简使用
SmartDialog.showToast('test toast');
复制代码
SmartDialog.showLoading();await Future.delayed(Duration(seconds: 2));SmartDialog.dismiss();
复制代码
var custom = Container( height: 80, width: 180, decoration: BoxDecoration( color: Colors.black, borderRadius: BorderRadius.circular(20), ), alignment: Alignment.center, child: Text('easy custom dialog', style: TextStyle(color: Colors.white)),);// hereSmartDialog.show(widget: custom, isLoadingTemp: false);
复制代码
OK，上面展示了，只需要极少的代码，就可以调用相应的功能
当然，内部还有不少地方做了特殊优化，接下来，我会详细的向大家描述下
你可能会有的疑问
初始化框架的时候，相比以前，居然让大家多写了一个参数，内心十分愧疚😩
关闭页面本质上是一个比较复杂的情况，涉及到
物理返回按键
AppBar 的 back 按钮
手动 pop
为了监控这些情况，不得已增加了一个路由监控参数
关于 FlutterSmartDialog.init()
本方法不会占用你的 builder 参数，init 内部回调出来了 builder，你可以大胆放心的继续套
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: HomePage, navigatorObservers: [FlutterSmartDialog.observer], builder: FlutterSmartDialog.init(builder: _builder), ); }}
Widget _builder(BuildContext context, Widget? child) { return MultiBlocProvider( providers: [ BlocProvider.value(value: BlocSpanOneCubit()), ], child: child!, );}
复制代码
实体返回键
对返回按钮的监控，是非常重要的，基本能覆盖大多数情况
pop 路由
虽然对返回按钮的监控能覆盖大多数场景，但是一些手动 pop 的场景就需要新增参数监控
超实用的参数：backDismiss
这个参数是默认设置为 true，返回的时候会默认关闭弹窗；如果设置为 false，将不会关闭页面
这样就可以十分轻松的做一个紧急弹窗，禁止用户的下一步操作
我们来看一个场景：假定某开源作者决定弃坑软件，不允许用户再使用该软件的弹窗
SmartDialog.show( // here backDismiss: false, clickBgDismissTemp: false, isLoadingTemp: false, widget: Container( height: 480, width: 500, padding: EdgeInsets.all(20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: Colors.white, ), alignment: Alignment.topCenter, child: SingleChildScrollView( child: Wrap( direction: Axis.vertical, crossAxisAlignment: WrapCrossAlignment.center, spacing: 10, children: [ // title Text( '特大公告', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold), ), // content Text('鄙人日夜钻研下面秘籍，终于成功钓到富婆'), Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211102213746.jpeg', height: 200, width: 400, ), Text('鄙人思考了三秒钟，怀着\'沉重\'的心情，决定弃坑本开源软件'), Text('本人今后的生活是富婆和远方，已无\'精力\' 再维护本开源软件了'), Text('各位叼毛，有缘江湖再见！'), // button (only method of close the dialog) ElevatedButton( onPressed: () => SmartDialog.dismiss(), child: Text('再会！'), ) ], ), ), ),);
复制代码
从上面的效果图可以看出来
只需要俩个简单的参数设置，就能实现这样一个很棒的应急弹窗
设置全局参数
SmartDialog 的全局参数都有着一个比较合理的默认值
为了应付多变的场景，你可以修改符合你自己要求的全局参数
SmartDialog.config ..alignment = Alignment.center ..isPenetrate = false ..clickBgDismiss = true ..maskColor = Colors.black.withOpacity(0.3) ..maskWidget = null ..animationDuration = Duration(milliseconds: 260) ..isUseAnimation = true ..isLoading = true ..antiShake = false ..antiShakeTime = Duration(milliseconds: 300);
复制代码
Toast 篇
toast 的特殊性
严格来说，toast 是一个非常特殊的弹窗，我觉得理应具备下述的特征
toast 消息理应一个个展示，后续消息不应该顶掉前面的 toast
展示在页面最上层，不应该被一些弹窗之类遮挡
对键盘遮挡情况做处理
键盘这玩意有点坑，会直接遮挡所有布局，只能曲线救国
在这里做了一个特殊处理，当唤起键盘的时候，toast 自己会动态的调整自己和屏幕底部的距离
这样就能起到一个，键盘不会遮挡 toast 的效果
自定义 Toast
参数说明
toast 暴露的参数其实并不多，只提供了四个参数
例如：toast 字体大小，字体颜色，toast 的背景色等等之类，我都没提供参数
一是觉得提供了这些参数，会让整个参数输入变的非常多，乱花渐入迷人眼
二是觉得就算我提供了很多参数，也不一定会满足那些奇奇怪怪的审美和需求
基于上述的考虑，我直接提供了底层参数，直接将widget参数提供出来
你可以随心所欲的定制 toast 了
注意：使用了widget参数，msg和alignment参数会失效
调整 toast 显示的位置
SmartDialog.showToast('the toast at the bottom');SmartDialog.showToast('the toast at the center', alignment: Alignment.center);SmartDialog.showToast('the toast at the top', alignment: Alignment.topCenter);
复制代码
更强大的自定义 toast
class CustomToast extends StatelessWidget { const CustomToast(this.msg, {Key? key}) : super(key: key);
final String msg;
@override Widget build(BuildContext context) { return Align( alignment: Alignment.bottomCenter, child: Container( margin: EdgeInsets.only(bottom: 30), padding: EdgeInsets.symmetric(horizontal: 20, vertical: 7), decoration: BoxDecoration( color: _randomColor(), borderRadius: BorderRadius.circular(100), ), child: Row(mainAxisSize: MainAxisSize.min, children: [ //icon Container( margin: EdgeInsets.only(right: 15), child: Icon(Icons.add_moderator, color: _randomColor()), ),
//msg Text('$msg', style: TextStyle(color: Colors.white)), ]), ), ); }
Color _randomColor() { return Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1, ); }}
复制代码
SmartDialog.showToast('', widget: CustomToast('custom toast'));
复制代码
Loading 篇
避坑指南
// easy closeSmartDialog.dismiss();// exact closeSmartDialog.dismiss(status: SmartStatus.loading);
复制代码
一般来说，loading 弹窗是封装在网络库里面的，随着请求状态的自动开启和关闭
基于这种场景，我建议：使用 dismiss 时，加上 status 参数，将其设置为：SmartStatus.loading
坑比场景
网络请求加载的时候，loading 也随之打开，这时很容易误触返回按钮，关闭 loading
当网络请求结束时，会自动调用 dismiss 方法
因为 loading 已被关闭，假设此时页面又有 SmartDialog 的弹窗，未设置 status 的 dismiss 就会关闭 SmartDialog 的弹窗
当然，这种情况很容易解决，封装进网络库的 loading，使用：SmartDialog.dismiss(status: SmartStatus.loading); 关闭就行了
status参数，是为了精确关闭对应类型弹窗而设计的参数，在一些特殊场景能起到巨大的作用
如果大家理解这个参数的含义，那对于何时添加status参数，必能胸有成竹
参数说明
参数在注释里面写的十分详细，就不赘述了，来看看效果
var maskWidget = Container( width: double.infinity, height: double.infinity, child: Opacity( opacity: 0.6, child: Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101103911.jpeg', fit: BoxFit.fill, ), ),);SmartDialog.showLoading(maskWidgetTemp: maskWidget);
复制代码
SmartDialog.showLoading(maskColorTemp: randomColor().withOpacity(0.3));
/// random colorColor randomColor() => Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
复制代码
SmartDialog.showLoading(background: randomColor());
/// random colorColor randomColor() => Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
复制代码
SmartDialog.showLoading(isLoadingTemp: false);
复制代码
SmartDialog.showLoading(isPenetrateTemp: true);
复制代码
自定义 Loading
使用showLoading可以轻松的自定义出强大的 loading 弹窗；鄙人脑洞有限，就简单演示下
自定义一个 loading 布局
class CustomLoading extends StatefulWidget { const CustomLoading({Key? key, this.type = 0}) : super(key: key);
final int type;
@override _CustomLoadingState createState() => _CustomLoadingState();}
class _CustomLoadingState extends State<CustomLoading> with TickerProviderStateMixin { late AnimationController _controller;
@override void initState() { _controller = AnimationController( duration: const Duration(milliseconds: 800), vsync: this, ); _controller.forward(); _controller.addStatusListener((status) { if (status == AnimationStatus.completed) { _controller.reset(); _controller.forward(); } }); super.initState(); }
@override Widget build(BuildContext context) { return Stack(children: [ // smile Visibility(visible: widget.type == 0, child: _buildLoadingOne()),
// icon Visibility(visible: widget.type == 1, child: _buildLoadingTwo()),
// normal Visibility(visible: widget.type == 2, child: _buildLoadingThree()), ]); }
Widget _buildLoadingOne() { return Stack(alignment: Alignment.center, children: [ RotationTransition( alignment: Alignment.center, turns: _controller, child: Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101174606.png', height: 110, width: 110, ), ), Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101181404.png', height: 60, width: 60, ), ]); }
Widget _buildLoadingTwo() { return Stack(alignment: Alignment.center, children: [ Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101162946.png', height: 50, width: 50, ), RotationTransition( alignment: Alignment.center, turns: _controller, child: Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101173708.png', height: 80, width: 80, ), ), ]); }
Widget _buildLoadingThree() { return Center( child: Container( height: 120, width: 180, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), ), alignment: Alignment.center, child: Column(mainAxisSize: MainAxisSize.min, children: [ RotationTransition( alignment: Alignment.center, turns: _controller, child: Image.network( 'https://cdn.jsdelivr.net/gh/xdd666t/MyData@master/pic/flutter/blog/20211101163010.png', height: 50, width: 50, ), ), Container( margin: EdgeInsets.only(top: 20), child: Text('loading...'), ), ]), ), ); }
@override void dispose() { _controller.dispose(); super.dispose(); }}
复制代码
来看看效果
SmartDialog.showLoading(isLoadingTemp: false, widget: CustomLoading());await Future.delayed(Duration(seconds: 2));SmartDialog.dismiss();
复制代码
SmartDialog.showLoading( isLoadingTemp: false, widget: CustomLoading(type: 1),);await Future.delayed(Duration(seconds: 2));SmartDialog.dismiss();
复制代码
SmartDialog.showLoading(widget: CustomLoading(type: 2));await Future.delayed(Duration(seconds: 2));SmartDialog.dismiss();
复制代码
Dialog 篇
花里胡哨
弹窗从不同位置弹出，动画是有区别的
var location = ({ double width = double.infinity, double height = double.infinity,}) { return Container(width: width, height: height, color: randomColor());};
//leftSmartDialog.show( widget: location(width: 70), alignmentTemp: Alignment.centerLeft,);await Future.delayed(Duration(milliseconds: 500));//topSmartDialog.show( widget: location(height: 70), alignmentTemp: Alignment.topCenter,);await Future.delayed(Duration(milliseconds: 500));//rightSmartDialog.show( widget: location(width: 70), alignmentTemp: Alignment.centerRight,);await Future.delayed(Duration(milliseconds: 500));//bottomSmartDialog.show( widget: location(height: 70), alignmentTemp: Alignment.bottomCenter,);await Future.delayed(Duration(milliseconds: 500));//centerSmartDialog.show( widget: location(height: 100, width: 100), alignmentTemp: Alignment.center, isLoadingTemp: false,);
复制代码
SmartDialog.show( alignmentTemp: Alignment.centerRight, isPenetrateTemp: true, clickBgDismissTemp: false, widget: Container( width: 80, height: double.infinity, color: randomColor(), ),);
复制代码
dialog 栈
这是一个强大且实用的功能！
可以很轻松的定点关闭某个弹窗
var stack = ({ double width = double.infinity, double height = double.infinity, String? msg,}) { return Container( width: width, height: height, color: randomColor(), alignment: Alignment.center, child: Text('dialog $msg', style: TextStyle(color: Colors.white)), );};
//leftSmartDialog.show( tag: 'A', widget: stack(msg: 'A', width: 70), alignmentTemp: Alignment.centerLeft,);await Future.delayed(Duration(milliseconds: 500));//topSmartDialog.show( tag: 'B', widget: stack(msg: 'B', height: 70), alignmentTemp: Alignment.topCenter,);await Future.delayed(Duration(milliseconds: 500));//rightSmartDialog.show( tag: 'C', widget: stack(msg: 'C', width: 70), alignmentTemp: Alignment.centerRight,);await Future.delayed(Duration(milliseconds: 500));//bottomSmartDialog.show( tag: 'D', widget: stack(msg: 'D', height: 70), alignmentTemp: Alignment.bottomCenter,);await Future.delayed(Duration(milliseconds: 500));
//center：the stack handlerSmartDialog.show( alignmentTemp: Alignment.center, isLoadingTemp: false, widget: Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15)), padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20), child: Wrap(spacing: 20, children: [ ElevatedButton( child: Text('close dialog A'), onPressed: () => SmartDialog.dismiss(tag: 'A'), ), ElevatedButton( child: Text('close dialog B'), onPressed: () => SmartDialog.dismiss(tag: 'B'), ), ElevatedButton( child: Text('close dialog C'), onPressed: () => SmartDialog.dismiss(tag: 'C'), ), ElevatedButton( child: Text('close dialog D'), onPressed: () => SmartDialog.dismiss(tag: 'D'), ), ]), ),);
复制代码
骚气的小技巧
有一种场景比较蛋筒
我们使用 StatefulWidget 封装了一个小组件
在某个特殊的情况，我们需要在这个组件外部，去触发这个组件内部的一个方法
对于这种场景，有不少实现方法，但是弄起来可能有点麻烦
这里提供一个简单的小思路，可以非常轻松的触发，组件内部的某个方法
class OtherTrick extends StatefulWidget { const OtherTrick({Key? key, this.onUpdate}) : super(key: key);
final Function(VoidCallback onInvoke)? onUpdate;
@override _OtherTrickState createState() => _OtherTrickState();}
class _OtherTrickState extends State<OtherTrick> { int _count = 0;
@override void initState() { // here widget.onUpdate?.call(() { _count++; setState(() {}); });
super.initState(); }
@override Widget build(BuildContext context) { return Center( child: Container( padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(10), ), child: Text('Counter： $_count ', style: TextStyle(fontSize: 30.0)), ), ); }}
复制代码
VoidCallback? callback;
// displaySmartDialog.show( alignmentTemp: Alignment.center, widget: OtherTrick( onUpdate: (VoidCallback onInvoke) => callback = onInvoke, ),);
await Future.delayed(Duration(milliseconds: 500));
// handlerSmartDialog.show( alignmentTemp: Alignment.centerRight, maskColorTemp: Colors.transparent, widget: Container( height: double.infinity, width: 150, color: Colors.white, alignment: Alignment.center, child: ElevatedButton( child: Text('add'), onPressed: () => callback?.call(), ), ),);
复制代码
最后
相关地址
哎，人总是在不断的迷茫中前行。。。
评论