描述
一个干净轻巧的Flutter App加载小部件,易于使用,无需上下文,支持iOS和Android。
安装
将以下代码添加到您项目中的 pubspec.yaml
文件:
dependencies:
flutter_easyloading: ^1.1.3
导入
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.showToast('Toast');
EasyLoading.dismiss();
自定义
/// 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;
/// 指示器的宽度, 默认4.0, 仅对[EasyLoadingIndicatorType.ring, EasyLoadingIndicatorType.dualRing]有效.
double lineWidth;
/// [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;
❗️注意:
-
textColor
、indicatorColor
、progressColor
、backgroundColor
仅对EasyLoadingStyle.custom
有效。 -
maskColor
仅对EasyLoadingMaskType.custom
有效。 -
如果你想在
initState
方法里面使用EasyLoading
, 你应该这样做:/// 帧绘制完成回调通知 WidgetsBinding.instance.addPostFrameCallback((_) { EasyLoading.showSuccess('Great Success!'); });
因为 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)
..userInteractions = true;
更多的指示器类型可查看 flutter_spinkit showcase
待完成
-
新增进度条指示器
-
新增自定义动画
下载
开源
项目地址: https://github.com/huangjianke/flutter_easyloading 项目分类: Flutter 提 交 者 : 李金山 授权协议 : Apache-2.0