前言
Q：你毕生中闻过最臭的货色，是什么？
A：我那早已腐烂的梦。
兄弟萌！！！我又来了！
这次，我能自信的对大家说：我终于给大家带了一个，能真正帮忙大家解决诸多坑比场景的pub包！
将之前的flutter_smart_dialog，在放弃api稳固的根底上，进行了各种抓头重构，解决了一系列问题
当初，我终于能够说：它当初是一个简洁，弱小，侵入性极低的pub包！
对于侵入性问题
- 之前为了解决返回敞开弹窗，应用了一个很不优雅的解决办法，导致侵入性有点高
- 这真是让我坐立不安，如芒刺背，如鲠在喉，这个问题终于搞定了！
同时，我在pub包外部设计了一个弹窗栈，能主动移除栈顶弹窗，也能够定点移除栈内标记的弹窗。
问题
应用零碎弹窗存在一系列坑，来和各位探讨探讨
必须传BuildContext
- 在一些场景必须多做一些传参工作，蛋痛但不难的问题
loading弹窗
应用零碎弹窗做loading弹窗，必定遇到过这个坑比问题
- loading封装在网络库外面：申请网络时加载loading，手贱按了返回按钮，敞开了loading
- 而后申请完结后发现：特么我的页面怎么被关了！！！
零碎弹窗就是一个路由页面，关闭系统就是用pop办法，这很容易误关失常页面
- 当然必定有解决办法，路由监听的中央解决，此处就不细表了
某页面弹出了多个零碎Dialog，很难定点敞开某个非栈顶弹窗
- 蛋蛋，这是路由入栈出栈机制导致的，了解的同时也一样要吐槽
零碎Dialog，点击事件无奈穿透暗色背景
- 这个坑比问题，我是真没辙
思考
下面列举了一些比拟常见的问题，最重大的问题，应该就是loading的问题
- loading是个超高频应用的弹窗，敞开loading弹窗的办法，同时也能敞开失常应用的页面，自身就是一个隐患
- 本菜狗不具备大厂大佬们魔改flutter的能力，菜则思变，我只能从其它方向切入，寻求解决方案
零碎的Page就是基于Overlay去实现的，咱们也要骚起来，从Overlay动手
这次，我要一次性帮各位解决：toast音讯，loading弹窗，以及更弱小的自定义dialog！
疾速上手
初始化
- 引入（最新版本请点击pub查看）：pub，github，click me to experience it
dependencies: flutter_smart_dialog: ^3.0.0初始化形式一：强力举荐
- 配置更加简洁
void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( initialRoute: RouteConfig.main, getPages: RouteConfig.getPages, // here navigatorObservers: [FlutterSmartDialog.observer], // here builder: FlutterSmartDialog.init(), ); }}初始化形式二：兼容老版本❤
- 老版本初始化形式依然无效，区别是：须要在就加载
MaterialApp之前，调用下FlutterSmartDialog.monitor()
void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // here FlutterSmartDialog.monitor(); return MaterialApp( home: SmartDialogPage(), // here navigatorObservers: [FlutterSmartDialog.observer], /// here builder: (BuildContext context, Widget? child) { return FlutterSmartDialog(child: child); }, ); }}功败垂成
下面俩种初始化形式，任选一种即可；而后，就能够残缺应用本库的所有性能了
我十分举荐第一种初始化的形式，因为足够简洁；简洁明了的货色用起来，会让人情绪愉悦
极简应用
- toast应用
SmartDialog.showToast('test toast');- loading应用⏳
SmartDialog.showLoading();await Future.delayed(Duration(seconds: 2));SmartDialog.dismiss(); - dialog应用
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，你能够大胆释怀的持续套
- 例如：持续套Bloc全局实例
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( initialRoute: RouteConfig.main, getPages: RouteConfig.getPages, 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的场景就须要新增参数监控
不加
FlutterSmartDialog.observer- 如果关上了穿透参数（就能够和弹窗后的页面交互），而后手动敞开页面
- 就会呈现这种很难堪的状况
加了
FlutterSmartDialog.observer，就能比拟正当的解决了- 当然，这里的过渡动画，也提供了参数管制是否开启❤
超实用的参数：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('再会！'), ) ], ), ), ),);从下面的效果图能够看进去
- 点击遮罩，无奈敞开弹窗
- 点击返回按钮无奈敞开弹窗
- 只能点咱们本人的按钮，能力敞开弹窗，点击按钮的逻辑能够间接写成敞开app之类
只须要俩个简略的参数设置，就能实现这样一个很棒的应急弹窗
设置全局参数
SmartDialog的全局参数都有着一个比拟正当的默认值
为了应酬多变的场景，你能够批改合乎你本人要求的全局参数
设置合乎你的要求的数据，放在app入口就行初始化就行
- 注：如果没有特殊要求，齐全能够不必初始化全局参数
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;- 代码的正文写的很欠缺，某个参数不明确的，点进去看看就行了
Toast篇
toast的特殊性
严格来说，toast是一个十分非凡的弹窗，我感觉理当具备下述的特色
toast音讯理当一个个展现，后续音讯不应该顶掉后面的toast
- 这是一个坑点，如果框架外部不做解决，很容易呈现前面toast会间接顶掉后面toast的状况
展现在页面最上层，不应该被一些弹窗之类遮挡
- 能够发现loading和dialog的遮罩等布局，均未遮挡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
- 首先，整一个自定义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篇
避坑指南
开启loading后，能够应用以下形式敞开
- SmartDialog.dismiss()：能够敞开loading和dialog
- status设置为SmartStatus.loading：仅仅敞开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参数，必能胸有成竹
- 如果大家了解这个参数的含意，那对于何时增加
参数阐明
参数在正文外面写的非常具体，就不赘述了，来看看成果
- maskWidgetTemp：弱小的遮罩自定义性能，施展你的脑洞吧。。。
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);- maskColorTemp：反对快捷自定义遮罩色彩
SmartDialog.showLoading(maskColorTemp: randomColor().withOpacity(0.3));/// random colorColor randomColor() => Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);- background：反对加载背景自定义
SmartDialog.showLoading(background: randomColor());/// random colorColor randomColor() => Color.fromRGBO( Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);- isLoadingTemp：动画成果切换
SmartDialog.showLoading(isLoadingTemp: false);- isPenetrateTemp：交互事件能够穿透遮罩，这是个非常有用的性能，对于一些非凡的需要场景非常要害
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篇
花里胡哨
弹窗从不同地位弹出，动画是有区别的
- alignmentTemp：该参数设置不同，动画成果会有所区别
var location = ({ double width = double.infinity, double height = double.infinity,}) { return Container(width: width, height: height, color: randomColor());};//leftSmartDialog.show( widget: location(width: 50), alignmentTemp: Alignment.centerLeft,);await Future.delayed(Duration(milliseconds: 500));//topSmartDialog.show( widget: location(height: 50), alignmentTemp: Alignment.topCenter,);await Future.delayed(Duration(milliseconds: 500));//rightSmartDialog.show( widget: location(width: 50), alignmentTemp: Alignment.centerRight,);await Future.delayed(Duration(milliseconds: 500));//bottomSmartDialog.show( widget: location(height: 50), alignmentTemp: Alignment.bottomCenter,);await Future.delayed(Duration(milliseconds: 500));//centerSmartDialog.show( widget: location(height: 100, width: 100), alignmentTemp: Alignment.center, isLoadingTemp: false,);- isPenetrateTemp：交互事件穿透遮罩
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('弹窗$msg', style: TextStyle(color: Colors.white)), );};//leftSmartDialog.show( tag: 'A', widget: stack(msg: 'A', width: 60), alignmentTemp: Alignment.centerLeft,);await Future.delayed(Duration(milliseconds: 500));//topSmartDialog.show( tag: 'B', widget: stack(msg: 'B', height: 60), alignmentTemp: Alignment.topCenter,);await Future.delayed(Duration(milliseconds: 500));//rightSmartDialog.show( tag: 'C', widget: stack(msg: 'C', width: 60), alignmentTemp: Alignment.centerRight,);await Future.delayed(Duration(milliseconds: 500));//bottomSmartDialog.show( tag: 'D', widget: stack(msg: 'D', height: 60), 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('敞开弹窗A'), onPressed: () => SmartDialog.dismiss(tag: 'A'), ), ElevatedButton( child: Text('敞开弹窗B'), onPressed: () => SmartDialog.dismiss(tag: 'B'), ), ElevatedButton( child: Text('敞开弹窗C'), onPressed: () => SmartDialog.dismiss(tag: 'C'), ), ElevatedButton( child: Text('敞开弹窗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(), ), ),);- 来看下成果
最初
相干地址
- github：flutter_smart_dialog
- 文中demo地址：flutter_use
- demo演示成果：在线体验
哎，人总是在一直的迷茫中前行。。。