前言
Q:你毕生中闻过最臭的货色,是什么?
A:我那早已腐烂的梦。
兄弟萌!!!我又来了!
这次,我能自信的对大家说:我终于给大家带了一个,能真正帮忙大家解决诸多坑比场景的 pub 包!
将之前的 flutter_smart_dialog,在放弃 api 稳固的根底上,进行了各种抓头重构,解决了一系列问题
当初,我终于能够说:它当初是一个 简洁,弱小,侵入性极低 的 pub 包!
对于侵入性问题
- 之前为了解决返回敞开弹窗,应用了一个很不优雅的解决办法,导致侵入性有点高
- 这真是让我坐立不安,如芒刺背,如鲠在喉,这个问题终于搞定了!
同时,我在 pub 包外部设计了一个弹窗栈,能主动移除栈顶弹窗,也能够定点移除栈内标记的弹窗。
存在的问题
应用零碎弹窗存在一系列坑,来和各位探讨探讨
-
必须传 BuildContext
- 在一些场景必须多做一些传参工作,蛋痛但不难的问题
-
loading 弹窗
-
应用零碎弹窗做 loading 弹窗,必定遇到过这个坑比问题
- loading 封装在网络库外面:申请网络时加载 loading,手贱按了返回按钮,敞开了 loading
- 而后申请完结后发现:特么我的页面怎么被关了!!!
-
零碎弹窗就是一个路由页面,关闭系统就是用 pop 办法,这很容易误关失常页面
- 当然必定有解决办法,路由监听的中央解决,此处就不细表了
-
-
某页面弹出了多个零碎 Dialog,很难定点敞开某个非栈顶弹窗
- 蛋蛋,这是路由入栈出栈机制导致的,了解的同时也一样要吐槽
-
零碎 Dialog,点击事件无奈穿透暗色背景
- 这个坑比问题,我是真没辙
相干思考
下面列举了一些比拟常见的问题,最重大的问题,应该就是 loading 的问题
- loading 是个超高频应用的弹窗,敞开 loading 弹窗的办法,同时也能敞开失常应用的页面,自身就是一个隐患
- 穿透 dialog 遮罩是个十分重要的性能,基于该性能,可能在理论业务中,实现很多骚操作
- 既然在零碎 dialog 难以解决各种痛点,加上零碎 dialog 也是基于 overlay 去实现的,这样的话,咱们也能够去高度定制 overlay!
这次,我要一次性帮各位解决:toast 音讯,loading 弹窗,以及更弱小的自定义 dialog!
疾速上手
初始化
- 引入(最新版本请点击 pub 查看):pub,github,web effect
dependencies:
flutter_smart_dialog: ^3.2.0
- 接入形式更加简洁😊
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(),);
}
}
极简应用
- 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)),
);
// here
SmartDialog.show(widget: custom, isLoadingTemp: false);
OK,下面展现了,只须要极少的代码,就能够调用相应的性能
当然,外部还有不少中央做了非凡优化,接下来,我会具体的向大家形容下
你可能会有的疑难
初始化框架的时候,相比以前,竟然让大家多写了一个参数,心田非常愧疚😩
敞开页面实质上是一个比较复杂的状况,波及到
- 物理返回按键
- AppBar 的 back 按钮
- 手动 pop
为了监控这些状况,不得已减少了一个路由监控参数
实体返回键
对返回按钮的监控,是十分重要的,根本能笼罩大多数状况
pop 路由
尽管对返回按钮的监控能笼罩大多数场景,然而一些手动 pop 的场景就须要新增参数监控
-
不加
FlutterSmartDialog.observer
- 如果关上了穿透参数(就能够和弹窗后的页面交互),而后手动敞开页面
- 就会呈现这种很难堪的状况
-
加了
FlutterSmartDialog.observer
,就能比拟正当的解决了- 当然,这里的过渡动画,也提供了参数管制是否开启 😉
对于 FlutterSmartDialog.init()
本办法不会占用你的 builder 参数,init 外部回调进去了 builder,你能够大胆释怀的持续套
- 例如:持续套 Bloc 全局实例😄
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!,
);
}
超实用的参数: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.35)
..maskWidget = null
..animationDuration = Duration(milliseconds: 260)
..isUseAnimation = true
..isLoading = true
..antiShake = false
..antiShakeTime = Duration(milliseconds: 300);
- 代码的正文写的很欠缺,某个参数不明确的,点进去看看就行了
Attach 篇
这是一个很重要的性能,原本早就想加进去了,然而比较忙,始终搁置了;除夕(2022.1.1)开了头,就花了一些工夫,实现了这个性能和相干 demo
定位
定位指标 widget 的坐标,这个做起来并不难;然而必须要拿到咱们传入的自定义 widget 大小,这样能力将自定义 widget 叠放到一个比拟适合的地位(通过一些计算,获取中心点)
- 实际上 Flutter 提供一个十分适合的组件
CustomSingleChildLayout
,这个组件还提供偏移坐标性能,按理来说十分适合 - 然而,
CustomSingleChildLayout
和SizeTransition
动画控件,存在占位面积抵触,只能应用AnimatedOpacity
渐隐动画 - 位移动画不能用,这我没法忍,摈弃
CustomSingleChildLayout
;应用了各种骚操作,终于拿到自定义 widget 的大小,比拟完满实现了成果
定位 dialog,应用 showAttach 办法,参数正文写的相当具体,不明确用法的看看正文就行了
弱小的定位性能
- 必须传指标 widget 的 BuildContext,须要通过它计算出指标 widget 的坐标和大小
var attach = (BuildContext context, AlignmentGeometry alignment) async {
SmartDialog.showAttach(
targetContext: context,
isPenetrateTemp: true,
alignmentTemp: alignment,
clickBgDismissTemp: false,
widget: Container(width: 100, height: 100, color: randomColor()),
);
await Future.delayed(Duration(milliseconds: 350));
};
//target widget
List<BuildContext> contextList = [];
List<Future Function()> funList = [() async => await attach(contextList[0], Alignment.topLeft),
() async => await attach(contextList[1], Alignment.topCenter),
() async => await attach(contextList[2], Alignment.topRight),
() async => await attach(contextList[3], Alignment.centerLeft),
() async => await attach(contextList[4], Alignment.center),
() async => await attach(contextList[5], Alignment.centerRight),
() async => await attach(contextList[6], Alignment.bottomLeft),
() async => await attach(contextList[7], Alignment.bottomCenter),
() async => await attach(contextList[8], Alignment.bottomRight),
];
var btn = ({
required String title,
required Function(BuildContext context) onTap,
}) {return Builder(builder: (context) {Color? color = title.contains('all') ? randomColor() : null;
contextList.add(context);
return Container(
width: 130,
child: ElevatedButton(
style: ButtonStyle(backgroundColor: ButtonStyleButton.allOrNull<Color>(color),
),
onPressed: () => onTap(context),
child: Text('$title'),
),
);
});
};
SmartDialog.show(
isLoadingTemp: false,
widget: Container(
width: 700,
padding: EdgeInsets.all(70),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: Wrap(
spacing: 50,
runSpacing: 50,
alignment: WrapAlignment.spaceEvenly,
children: [btn(title: 'topLeft', onTap: (context) => funList[0]()),
btn(title: 'topCenter', onTap: (context) => funList[1]()),
btn(title: 'topRight', onTap: (context) => funList[2]()),
btn(title: 'centerLeft', onTap: (context) => funList[3]()),
btn(title: 'center', onTap: (context) => funList[4]()),
btn(title: 'centerRight', onTap: (context) => funList[5]()),
btn(title: 'bottomLeft', onTap: (context) => funList[6]()),
btn(title: 'bottomCenter', onTap: (context) => funList[7]()),
btn(title: 'bottomRight', onTap: (context) => funList[8]()),
btn(
title: 'allOpen',
onTap: (_) async {for (var item in funList) {await item();
}
},
),
btn(
title: 'allClose',
onTap: (_) => SmartDialog.dismiss(status: SmartStatus.allAttach),
),
],
),
),
);
动画成果和 show 办法简直是统一的,为了这个统一的体验,外部做了相当多的针对性优化
自定义坐标点
- 大多数状况根本都是应用 targetContext
SmartDialog.showAttach(
targetContext: context,
widget: Container(width: 100, height: 100, color: Colors.red),
);
-
当然还有多数状况,须要应用自定义坐标,此处也提供 target 参数:设置了 target 参数,targetContext 将主动生效
- targetContext 是非常常见到场景,所以,这边设置为必传参数,然而你能够给它设置为 null
SmartDialog.showAttach(
targetContext: null,
target: Offset(100, 100);,
widget: Container(width: 100, height: 100, color: Colors.red),
);
- 看来下自定义坐标点成果
var attach = (Offset offset) {var random = Random().nextInt(100) % 5;
var alignment = Alignment.topCenter;
if (random == 0) alignment = Alignment.topCenter;
if (random == 1) alignment = Alignment.centerLeft;
if (random == 2) alignment = Alignment.center;
if (random == 3) alignment = Alignment.centerRight;
if (random == 4) alignment = Alignment.bottomCenter;
SmartDialog.showAttach(
targetContext: null,
target: offset,
isPenetrateTemp: true,
clickBgDismissTemp: false,
alignmentTemp: alignment,
keepSingle: true,
widget: ClipRRect(borderRadius: BorderRadius.circular(10),
child: Container(width: 100, height: 100, color: randomColor()),
),
);
};
SmartDialog.show(
isLoadingTemp: false,
widget: Container(
width: 600,
height: 400,
alignment: Alignment.center,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: GestureDetector(onTapDown: (detail) => attach(detail.globalPosition),
child: Container(
width: 500,
height: 300,
color: Colors.grey,
alignment: Alignment.center,
child: Text('click me', style: TextStyle(color: Colors.white)),
),
),
),
);
模拟 DropdownButton
-
实际上模拟 DropdownButton 挺不容易的
- 首先要计算 DropdownButton 控件的地位,在其地位上显示点击后的折叠控件
- 须要解决 DropdownButton 之外区域的点击事件(点击区域外敞开 DropdownButton)
- 还须要监听返回事件,手动 pop 路由事件;是这类事件的,须要敞开 DropdownButton
- 这玩意要自定义,挺让人头大的;然而,当初你能够应用
SmartDialog.showAttach
轻松模拟一个,上述须要留神的事项都帮你解决好了
// 模拟 DropdownButton
var imitate = (BuildContext context) {var list = ['小呆呆', '小菲菲', '小猪猪'];
SmartDialog.showAttach(
targetContext: context,
isPenetrateTemp: true,
widget: Container(margin: EdgeInsets.all(10),
decoration: BoxDecoration(
boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 8, spreadRadius: 0.2)
],
),
child: Column(children: List.generate(list.length, (index) {
return Material(
color: Colors.white,
child: InkWell(onTap: () => SmartDialog.dismiss(),
child: Container(
height: 50,
width: 100,
alignment: Alignment.center,
child: Text('${list[index]}'),
),
),
);
}),
),
),
);
};
//imitate widget
var dropdownButton = ({String title = 'Dropdown'}) {
return DropdownButton<String>(
value: '1',
items: [DropdownMenuItem(value: '1', child: Text('$title:小呆呆')),
DropdownMenuItem(value: '2', child: Text('小菲菲')),
DropdownMenuItem(value: '3', child: Text('小猪猪'))
],
onChanged: (value) {},);
};
var imitateDropdownButton = () {return Builder(builder: (context) {
return Stack(children: [dropdownButton(title: 'Attach'),
GestureDetector(onTap: () => imitate(context),
child: Container(height: 50, width: 140, color: Colors.transparent),
)
]);
});
};
SmartDialog.show(
isLoadingTemp: false,
widget: Container(
width: 600,
height: 400,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 100),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
child: MaterialApp(
debugShowCheckedModeBanner: false,
home: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [dropdownButton(), imitateDropdownButton()],
),
),
),
);
高亮
这次把遮罩特定区域高亮的性能加上了,这是一个十分实用的性能!
-
你只须要设置
highlight
参数即可-
定义高亮的区域,他必须是个不通透的 Widget,例如是 Contaienr,必须设置一个色彩(色值无要求)
- 应用各种奇形怪状的图片也行,这样就能显示各种简单图形的高亮区域
- highlight 类型是 Positioned,你能够在屏幕上定位任何须要高亮的区域
-
SmartDialog.showAttach(
targetContext: context,
alignmentTemp: Alignment.bottomCenter,
highlight: Positioned(
right: 190,
bottom: 190,
child: Container(
height: 120,
width: 120,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
color: Colors.white,
),
),
),
widget: Container(width: 100, height: 100, color: Colors.red),
);
理论的业务场景
- 这边举俩个常见的例子,代码有一点点多,就不贴了,感兴趣的请查看:flutter_use
下面俩个业务场景十分常见,有时候,咱们须要指标 widget 下面或上面或特定的区域,不被遮罩笼罩
本人去做的话,能够做进去,然而会很麻烦;当初你能够应用 showAttach
中的 highlight
参数轻松实现这个需要
疏导操作
疏导操作在 app 上还是十分常见的,须要指定区域高亮,而后介绍其性能
-
应用
showAttach
中的highlight
参数,也能够轻松实现这个需要,来看下成果- 代码同样有一点点多,感兴趣的请查看:flutter_use
Dialog 篇
花里胡哨
弹窗从不同地位弹出,动画是有区别的
- alignmentTemp:该参数设置不同,动画成果会有所区别
var location = ({
double width = double.infinity,
double height = double.infinity,
}) {return Container(width: width, height: height, color: randomColor());
};
//left
SmartDialog.show(widget: location(width: 70),
alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(widget: location(height: 70),
alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(widget: location(width: 70),
alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(widget: location(height: 70),
alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//center
SmartDialog.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('dialog $msg', style: TextStyle(color: Colors.white)),
);
};
//left
SmartDialog.show(
tag: 'A',
widget: stack(msg: 'A', width: 70),
alignmentTemp: Alignment.centerLeft,
);
await Future.delayed(Duration(milliseconds: 500));
//top
SmartDialog.show(
tag: 'B',
widget: stack(msg: 'B', height: 70),
alignmentTemp: Alignment.topCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//right
SmartDialog.show(
tag: 'C',
widget: stack(msg: 'C', width: 70),
alignmentTemp: Alignment.centerRight,
);
await Future.delayed(Duration(milliseconds: 500));
//bottom
SmartDialog.show(
tag: 'D',
widget: stack(msg: 'D', height: 70),
alignmentTemp: Alignment.bottomCenter,
);
await Future.delayed(Duration(milliseconds: 500));
//center:the stack handler
SmartDialog.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'),
),
]),
),
);
Loading 篇
避坑指南
-
开启 loading 后,能够应用以下形式敞开
- SmartDialog.dismiss():能够敞开 loading 和 dialog
- status 设置为 SmartStatus.loading:仅仅敞开 loading
// easy close
SmartDialog.dismiss();
// exact close
SmartDialog.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 color
Color randomColor() => Color.fromRGBO(Random().nextInt(256), Random().nextInt(256), Random().nextInt(256), 1);
- background:反对加载背景自定义
SmartDialog.showLoading(background: randomColor());
/// random color
Color 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();
Toast 篇
toast 的特殊性
严格来说,toast 是一个十分非凡的弹窗,我感觉理当具备下述的特色
toast 音讯理当一个个展现,后续音讯不应该顶掉后面的 toast
-
这是一个坑点,如果框架外部不做解决,很容易呈现前面 toast 会间接顶掉后面 toast 的状况
- 当然,外部提供了 type 参数,你能够抉择你想要的显示逻辑
展现在页面最上层,不应该被一些弹窗之类遮挡
- 能够发现 loading 和 dialog 的遮罩等布局,均未遮挡 toast 信息
对键盘遮挡状况做解决
-
键盘这玩意有点坑,会间接遮挡所有布局,只能曲线救国
- 在这里做了一个非凡解决,当唤起键盘的时候,toast 本人会动静的调整本人和屏幕底部的间隔
- 这样就能起到一个,键盘不会遮挡 toast 的成果
自定义 Toast
参数阐明
toast 的一些参数并未向外裸露,仅仅裸露了 msg 和 alignment
-
例如:toast 字体大小,字体色彩,toast 的背景色等等之类,都没提供参数
- 一是感觉提供了这些参数,会让整体参数输出变的十分多,乱花渐入迷人眼
- 二是感觉就算我提供了很多参数,也不肯定会满足那些奇奇怪怪的审美和需要
-
基于上述的思考,我间接提供了大量的底层参数
-
你能够得心应手的定制 toast
- 留神喔,不仅仅能够定制 toast,例如:胜利提醒,失败提醒,正告提醒等等
- Toast 做了很多的优化,type 参数,让你能领有多种显示逻辑,施展你的想象力吧
- 留神:应用了
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'));
- 成果
骚气的小技巧
有一种场景比拟蛋筒
- 咱们应用 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;
// display
SmartDialog.show(
alignmentTemp: Alignment.center,
widget: OtherTrick(onUpdate: (VoidCallback onInvoke) => callback = onInvoke,
),
);
await Future.delayed(Duration(milliseconds: 500));
// handler
SmartDialog.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 演示成果:在线体验
哎,人总是在一直的迷茫中前行。。。