Flutter EasyLoading 使用教程

Flutter EasyLoading 使用教程

flutter_easyloading项目地址:https://gitcode.com/gh_mirrors/flut/flutter_easyloading

项目介绍

Flutter EasyLoading 是一个简单易用的 Flutter 插件，旨在简化全局 Toast 和 Loading 框的展示。该插件包含 23 种 loading 动画效果、进度条展示和 Toast 展示，完全在 Flutter 端实现，支持 iOS、Android 和 Web 平台。

项目快速启动

安装

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

dependencies:
  flutter_easyloading: ^3.0.5

导入

在您的 Dart 文件中导入包:

import 'package:flutter_easyloading/flutter_easyloading.dart';

使用

使用 FlutterEasyLoading 组件包裹您的 MaterialApp 或 CupertinoApp:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterEasyLoading(
      child: MaterialApp(
        title: 'Flutter EasyLoading',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

显示 Toast 和 Loading

在您的应用中使用以下方法显示 Toast 和 Loading:

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 样式、指示器类型、遮罩类型等。以下是一些常用的自定义属性:

EasyLoading.instance
  ..loadingStyle = EasyLoadingStyle.dark
  ..indicatorType = EasyLoadingIndicatorType.fadingCircle
  ..maskType = EasyLoadingMaskType.black
  ..indicatorSize = 40.0
  ..radius = 5.0;

全局配置

您可以在应用启动时进行全局配置，以确保整个应用中使用一致的样式:

void main() {
  runApp(MyApp());
  configLoading();
}

void configLoading() {
  EasyLoading.instance
    ..displayDuration = const Duration(milliseconds: 2000)
    ..indicatorType = EasyLoadingIndicatorType.fadingCircle
    ..loadingStyle = EasyLoadingStyle.dark
    ..indicatorSize = 45.0
    ..radius = 10.0
    ..progressColor = Colors.yellow
    ..backgroundColor = Colors.green
    ..indicatorColor = Colors.yellow
    ..textColor = Colors.yellow
    ..maskColor = Colors.blue.withOpacity(0.5)
    ..userInteractions = true
    ..dismissOnTap = false;
}

典型生态项目

Flutter Toast

Flutter Toast 是另一个流行的 Flutter 插件，用于显示 Toast 消息。虽然它不支持 loading 动画和进度条，但在某些场景下可能更适合您的需求。

Flutter Spinkit

Flutter Spinkit 是一个包含多种加载动画的库，可以与 Flutter EasyLoading 结合使用，以提供更多样化的加载效果。

通过以上步骤，您可以快速集成和使用 Flutter EasyLoading 插件，为您的 Flutter 应用添加全局 Toast 和 Loading 功能。希望本教程对您有所帮助！

flutter_easyloading项目地址:https://gitcode.com/gh_mirrors/flut/flutter_easyloading