Flutter中 EasyLoading - 让全局Toast或Loading更简单

本文介绍了如何在Flutter中使用Flutter EasyLoading插件实现全局的Toast和Loading功能,包括安装、导入和自定义样式。Flutter EasyLoading提供23种加载动画,兼容iOS和Android,使得在任意位置调用变得简单。文章还讨论了使用Overlay和OverlayEntry实现全局弹窗,以及CustomPaint和Canvas绘制圆形进度条的技术细节。
摘要由CSDN通过智能技术生成

前言

Flutter是Google在2017年推出的一套开源跨平台UI框架,可以快速地在iOS、Android和Web平台上构建高质量的原生用户界面。Flutter发布至今,不可谓不说是大受追捧,吸引了大批App原生开发者、Web开发者前赴后继的投入其怀抱,也正由于Flutter是跨平台领域的新星,总的来说,其生态目前还不是十分完善,我相信对于习惯了原生开发的同学们来说,找轮子肯定没有了那种章手就莱的感觉。比如说这篇文章即将讲到的,如何在Flutter应用内简单、方便的展示Toast或者Loading框呢?

探索

起初,我也在pub上找到了几个比较优秀的插件:
FlutterToast: 这个插件应该是很多刚入坑Flutter的同学们都使用过的,它依赖于原生,但对于UI层级的问题,最好在Flutter端解决,这样便于后期维护,也可以减少兼容性问题;
flutter_oktoast: 纯Flutter端实现,调用方便。但缺少loading、进度条展示,仍可自定义实现;
试用过后,发现这些插件都或多或少不能满足我们的产品需求,于是便结合自己产品的需求来造了这么个轮子,也希望可以帮到有需要的同学们。效果预览:

在这里插入图片描述

实现

showDialog 实现

先看看初期我们实现弹窗的方式showDialog,部分源码如下:
Future showDialog({
@required BuildContext context,
bool barrierDismissible = true,
@Deprecated(
'Instead of using the “child” argument, return the child from a closure ’
'provided to the “builder” argument. This will ensure that the BuildContext ’
'is appropriate for widgets built in the dialog. ’
‘This feature was deprecated after v0.2.3.’
)
Widget child,
WidgetBuilder builder,
bool useRootNavigator = true,
})
这里有个必传参数context,想必接触过Flutter开发一段时间的同学,都会对BuildContext有所了解。简单来说BuildContext就是构建Widget中的应用上下文,是Flutter的重要组成部分。BuildContext只出现在两个地方:
StatelessWidget.build方法中:创建StatelessWidget的build方法
State对象中:创建StatefulWidget的State对象的build方法中,另一个是State的成员变量
有关BuildContext更深入的探讨不在此文的探讨范围内,如果使用showDialog实现弹窗操作,那么我们所考虑的问题便是,如何方便快捷的在任意地方去获取BuildContext,从而实现弹窗。如果有同学恰巧也用了showDialog这种方式的话,我相信,你也会发现,在任意地方获取BuildContext并不是那么简单,而且会产生很多不必要的代码量。
那么,我们就只能使用这种体验极其不友好的方法么?
当然不是的,请继续看。

Flutter EasyLoading 介绍

Flutter EasyLoading是一个简单易用的Flutter插件࿰

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值