Flutter EasyLoading - 让全局Toast/Loading更简单

flutter_easyloading: 一个简单易用的Flutter插件,包含23种loading动画效果、进度条展示、Toast展示。纯Flutter端实现,支持iOS、Android。

开源地址https://github.com/huangjianke/flutter_easyloading

前言

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

探索

起初,我也在pub上找到了几个比较优秀的插件:

  • FlutterToast: 这个插件应该是很多刚入坑Flutter的同学们都使用过的,它依赖于原生,但对于UI层级的问题,最好在Flutter端解决,这样便于后期维护,也可以减少兼容性问题;
  • flutter_oktoast: 纯Flutter端实现,调用方便。但缺少loading、进度条展示,仍可自定义实现;

试用过后,发现这些插件都或多或少不能满足我们的产品需求,于是便结合自己产品的需求来造了这么个轮子,也希望可以帮到有需要的同学们。效果预览:

flutter_easyloading

实现

showDialog 实现

先看看初期我们实现弹窗的方式showDialog,部分源码如下:

Future<T> showDialog<T>({
  @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方法中:创建StatelessWidgetbuild方法
  • State对象中:创建StatefulWidgetState对象的build方法中,另一个是State的成员变量

有关BuildContext更深入的探讨不在此文的探讨范围内,如果使用showDialog实现弹窗操作,那么我们所考虑的问题便是,如何方便快捷的在任意地方去获取BuildContext,从而实现弹窗。如果有同学恰巧也用了showDialog这种方式的话,我相信,你也会发现,在任意地方获取BuildContext并不是那么简单,而且会产生很多不必要的代码量。

那么,我们就只能使用这种体验极其不友好的方法么?

当然不是的,请继续看。

Flutter EasyLoading 介绍

Flutter EasyLoading是一个简单易用的Flutter插件,包含23loading动画效果、进度条展示、Toast展示。纯Flutter端实现,兼容性好,支持iOSAndroid。先简单看下如何使用Flutter EasyLoading

安装

将以下代码添加到您项目中的 pubspec.yaml 文件:

dependencies:
  flutter_easyloading: ^1.1.0 // 请使用最新版

导入

import 'package:flutter_easyloading/flutter_easyloading.dart';

如何使用

首先, 使用 FlutterEasyLoading 组件包裹您的App组件:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// 子组件通常为 [MaterialApp] 或者 [CupertinoApp].
    /// 这样做是为了确保 loading 组件能覆盖在其他组件之上.
    return FlutterEasyLoading(
      child: MaterialApp(
        title: 'Flutter EasyLoading',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter EasyLoading'),
      ),
    );
  }
}

然后, 请尽情使用吧:

EasyLoading.show(status: 'loading...'); 

EasyLoading.showProgress(0.3, status: 'downloading...');

EasyLoading.showSuccess('Great Success!');

EasyLoading.showError('Failed with Error');

EasyLoading.showInfo('Useful Information.');

EasyLoading.dismiss();

自定义样式

首先,我们看下Flutter EasyLoading目前支持的自定义属性:

/// loading的样式, 默认[EasyLoadingStyle.dark].
EasyLoadingStyle loadingStyle;

/// loading的指示器类型, 默认[EasyLoadingIndicatorType.fadingCircle].
EasyLoadingIndicatorType indicatorType;

/// loading的遮罩类型, 默认[EasyLoadingMaskType.none].
EasyLoadingMaskType maskType;

/// 文本的对齐方式 , 默认[TextAlign.center].
TextAlign textAlign;

/// loading内容区域的内边距.
EdgeInsets contentPadding;

/// 文本的内边距.
EdgeInsets textPadding;

/// 指示器的大小, 默认40.0.
double indicatorSize;

/// loading的圆角大小, 默认5.0.
double radius;

/// 文本大小, 默认15.0.
double fontSize;

/// 进度条指示器的宽度, 默认2.0.
double progressWidth;

/// [showSuccess] [showError] [showInfo]的展示时间, 默认2000ms.
Duration displayDuration;

/// 文本的颜色, 仅对[EasyLoadingStyle.custom]有效.
Color textColor;

/// 指示器的颜色, 仅对[EasyLoadingStyle.custom]有效.
Color indicatorColor;

/// 进度条指示器的颜色, 仅对[EasyLoadingStyle.custom]有效.
Color progressColor;

/// loading的背景色, 仅对[EasyLoadingStyle.custom]有效.
Color backgroundColor;

/// 遮罩的背景色, 仅对[EasyLoadingMaskType.custom]有效.
Color maskColor;

/// 当loading展示的时候,是否允许用户操作.
bool userInteractions;

/// 展示成功状态的自定义组件
Widget successWidget;

/// 展示失败状态的自定义组件
Widget errorWidget;

/// 展示信息状态的自定义组件
Widget infoWidget;

因为 EasyLoading 是一个全局单例, 所以我们可以在任意一个地方自定义它的样式:

EasyLoading.instance
  ..displayDuration = const Duration(milliseconds: 2000)
  ..indicatorType = EasyLoadingIndicatorType.fadingCircle
  ..loadingStyle = EasyLoadingStyle.dark
  ..indicatorSize = 45.0
  ..radius = 10.0
  ..backgroundColor = Colors.green
  ..indicatorColor = Colors.yellow
  ..textColor = Colors.yellow
  ..maskColor = Colors.blue.withOpacity(0.5);

更多的指示器动画类型可查看 flutter_spinkit showcase

可以看到,Flutter EasyLoading的集成以及使用相当的简单,而且有丰富的自定义样式,总会有你满意的。

接下来,我们来看看Flutter EasyLoading的代码实现。

Flutter EasyLoading 的实现

本文将通过以下两个知识点来介绍Flutter EasyLoading的主要实现过程及思路:

  • OverlayOverlayEntry实现全局弹窗
  • CustomPaintCanvas实现圆形进度条绘制

Overlay、OverlayEntry 实现全局弹窗

先看看官方关于Overlay的描述:

/// A [Stack] of entries that can be managed independently.
///
/// Overlays let independent child widgets "float" visual elements on top of
/// other widgets by inserting them into the overlay's [Stack]. The overlay lets
/// each of these widgets manage their participation in the overlay using
/// [OverlayEntry] objects.
///
/// Although you can create an [Overlay] directly, it's most common to use the
/// overlay created by the [Navigator] in a [WidgetsApp] or a [MaterialApp]. The
/// navigator uses its overlay to manage the visual appearance of its routes.
///
/// See also:
///
///  * [OverlayEntry].
///  * [OverlayState].
///  * [WidgetsApp].
///  * [MaterialApp].
class Overlay extends StatefulWidget {}

也就是说,Overlay是一个StackWidget,可以将OverlayEntry插入到Overlay中,使独立的child窗口悬浮于其他Widget之上。利用这个特性,我们可以用OverlayMaterialAppCupertinoApp包裹起来,这样做的目的是为了确保 loading 组件能覆盖在其他组件之上,因为在Flutter中只会存在一个MaterialAppCupertinoApp根节点组件。(注:这里的做法参考于flutter_oktoast插件,感谢)。

另外,这样做的目的还可以解决另外一个核心问题:将 context 缓存到内存中,后续所有调用均不需要提供context。实现如下:

@override
Widget build(BuildContext context) {
  return Directionality(
    child: Overlay(
      initialEntries: [
        OverlayEntry(
          builder: (BuildContext _context) {
            // 缓存 context
            EasyLoading.instance.context = _context;
            // 这里的child必须是MaterialApp或CupertinoApp
            return widget.child;
          },
        ),
      ],
    ),
    textDirection: widget.textDirection,
  );
}
// 创建OverlayEntry
OverlayEntry _overlayEntry = OverlayEntry(
  builder: (BuildContext context) => LoadingContainer(
    key: _key,
    status: status,
    indicator: w,
    animation: _animation,
  ),
);

// 将OverlayEntry插入到Overlay中
// 通过Overlay.of()我们可以获取到App根节点的Overlay
Overlay.of(_getInstance().context).insert(_overlayEntry);

// 调用OverlayEntry自身的remove()方法,从所在的Overlay中移除自己
_overlayEntry.remove();

OverlayOverlayEntry的使用及理解还是很简单,我们也可以再更多的使用场景使用他们,比如说,类似PopupWindow的弹窗效果、全局自定义Dialog弹窗等等。只要灵活运用,我们可以实现很多我们想要的效果。

CustomPaintCanvas实现圆形进度条绘制

几乎所有的UI系统都会提供一个自绘UI的接口,这个接口通常会提供一块2D画布CanvasCanvas内部封装了一些基本绘制的API,我们可以通过Canvas绘制各种自定义图形。在Flutter中,提供了一个CustomPaint组件,它可以结合一个画笔CustomPainter来实现绘制自定义图形。接下来我将简单介绍下圆形进度条的实现。

我们先来看看CustomPaint构造函数:

const CustomPaint({
  Key key,
  this.painter,
  this.foregroundPainter,
  this.size = Size.zero,
  this.isComplex = false,
  this.willChange = false,
  Widget child,
})
  • painter: 背景画笔,会显示在子节点后面;
  • foregroundPainter: 前景画笔,会显示在子节点前面
  • size:当childnull时,代表默认绘制区域大小,如果有child则忽略此参数,画布尺寸则为child尺寸。如果有child但是想指定画布为特定大小,可以使用SizeBox包裹CustomPaint实现。
  • isComplex:是否复杂的绘制,如果是,Flutter会应用一些缓存策略来减少重复渲染的开销。
  • willChange:和isComplex配合使用,当启用缓存时,该属性代表在下一帧中绘制是否会改变。

可以看到,绘制时我们需要提供前景或背景画笔,两者也可以同时提供。我们的画笔需要继承CustomPainter类,我们在画笔类中实现真正的绘制逻辑。

接下来,我们看下怎么通过CustomPainter绘制圆形进度条:

class _CirclePainter extends CustomPainter {
  final Color color;
  final double value;
  final double width;

  _CirclePainter({
    @required this.color,
    @required this.value,
    @required this.width,
  });

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = color
      ..strokeWidth = width
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;
    canvas.drawArc(
      Offset.zero & size,
      -math.pi / 2,
      math.pi * 2 * value,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(_CirclePainter oldDelegate) => value != oldDelegate.value;
}

从上面我们可以看到,CustomPainter中定义了一个虚函数paint:

void paint(Canvas canvas, Size size);

这个函数是绘制的核心所在,它包含了以下两个参数:

  • canvas: 画布,包括各种绘制方法, 如 drawLine(画线)drawRect(画矩形)drawCircle(画圆)
  • size: 当前绘制区域大小

画布现在有了,那么接下来我们就需要一支画笔了。Flutter提供了Paint类来实现画笔。而且可以配置画笔的各种属性如粗细、颜色、样式等,比如:

final paint = Paint()
  ..color = color // 颜色
  ..strokeWidth = width // 宽度
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round;

最后,我们就是需要使用drawArc方法进行圆弧的绘制了:

canvas.drawArc(
  Offset.zero & size,
  -math.pi / 2,
  math.pi * 2 * value,
  false,
  paint,
);

到此,我们就完成了进度条的绘制。另外我们也需要注意下绘制性能问题。好在类中提供了重写shouldRepaint的方法,这个方法决定了画布什么时候会重新绘制,在复杂的绘制中对提升绘制性能是相当有成效的。

@override
bool shouldRepaint(_CirclePainter oldDelegate) => value != oldDelegate.value;

结语

毫无疑问,Flutter的前景是一片光明的,也许现在还存在诸多问题,但我相信更多的人会愿意陪着Flutter一起成长。期待着Flutter的生态圈的完善。后期我也会逐步完善Flutter EasyLoading,期待您的宝贵意见。

最后,希望Flutter EasyLoading对您有所帮助。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,312评论 5 473
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,578评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,337评论 0 333
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,134评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,161评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,303评论 1 280
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,761评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,421评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,609评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,450评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,504评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,194评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,760评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,836评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,066评论 1 257
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,612评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,178评论 2 341

推荐阅读更多精彩内容