flutter_easyloading

一个干净轻量级的 Flutter 应用加载 Widget，易于使用且无需 Context。

gif01

gif02

gif03

安装

将此添加到您的包的 pubspec.yaml 文件中

dependencies:
  flutter_easyloading: ^1.0.1

导入

import 'package:flutter_easyloading/flutter_easyloading.dart';

如何使用

首先，用FlutterEasyLoading包装你的应用widget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// child should be [MaterialApp] or [CupertinoApp].
    /// make sure that loading can be displayed in front of all other widgets
    return FlutterEasyLoading(
      child: MaterialApp(
        title: 'Flutter EasyLoading',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(title: 'Flutter EasyLoading'),
      ),
    );
  }
}

然后，尽情享受吧

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

EasyLoading.showSuccess('Great Success!');

EasyLoading.showError('Failed with Error');

EasyLoading.showInfo('Useful Information.');

EasyLoading.dismiss();

自定义

/// loading style, default [EasyLoadingStyle.dark].
EasyLoadingStyle loadingStyle;

/// loading indicator type, default [EasyLoadingIndicatorType.fadingCircle].
EasyLoadingIndicatorType indicatorType;

/// loading mask type, default [EasyLoadingMaskType.none].
EasyLoadingMaskType maskType;

/// textAlign of status, default [TextAlign.center].
TextAlign textAlign;

/// content padding of loading.
EdgeInsets contentPadding;

/// padding of [status].
EdgeInsets textPadding;

/// size of indicator, default 40.0.
double indicatorSize;

/// radius of loading, default 5.0.
double radius;

/// fontSize of loading, default 15.0.
double fontSize;

/// display duration of [showSuccess] [showError] [showInfo], default 2000ms.
Duration displayDuration;

/// color of loading status, only used for [EasyLoadingStyle.custom].
Color textColor;

/// color of loading indicator, only used for [EasyLoadingStyle.custom].
Color indicatorColor;

/// background color of loading, only used for [EasyLoadingStyle.custom].
Color backgroundColor;

/// mask color of loading, only used for [EasyLoadingMaskType.custom].
Color maskColor;

/// should allow user interactions while loading is displayed.
bool userInteractions;

/// success widget of loading
Widget successWidget;

/// error widget of loading
Widget errorWidget;

/// info widget of loading
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)
  ..userInteractions = true;

更多指示器类型可以在 flutter_spinkit showcase 中查看

待办事项

  • [ ] 添加进度指示器

  • [ ] 添加自定义动画

GitHub

https://github.com/huangjianke/flutter_easyloading