Flutter加载提示插件gugor_easyloading的使用

插件简介

gugor_easyloading 是一个用于在 Flutter 应用中快速实现加载提示的插件。它支持多种加载样式和动画效果，并且可以通过简单的配置来满足各种需求。

Live Preview

访问以下链接查看在线演示： 👉 https://nslog11.github.io/gugor_easyloading

安装

将插件添加到你的 pubspec.yaml 文件中：

dependencies:
  gugor_easyloading: ^3.0.3

然后运行以下命令安装依赖：

flutter pub get

导入

在 Dart 文件中导入插件：

import 'package:gugor_easyloading/gugor_easyloading.dart';

如何使用

初始化

在 MaterialApp 或 CupertinoApp 中初始化 EasyLoading：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EasyLoading',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter EasyLoading'),
      builder: EasyLoading.init(), // 初始化 EasyLoading
    );
  }
}

基本用法

显示加载提示

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

显示进度条

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

显示成功提示

EasyLoading.showSuccess('Great Success!');

显示错误提示

EasyLoading.showError('Failed with Error');

显示信息提示

EasyLoading.showInfo('Useful Information.');

显示 Toast 提示

EasyLoading.showToast('Toast');

隐藏加载提示

EasyLoading.dismiss();

添加状态回调

监听加载状态的变化：

EasyLoading.addStatusCallback((status) {
  print('EasyLoading Status $status');
});

移除状态回调

移除单个回调或所有回调：

// 移除单个回调
EasyLoading.removeCallback(statusCallback);

// 移除所有回调
EasyLoading.removeAllCallbacks();

自定义样式

通过配置 EasyLoading.instance 来自定义加载提示的样式：

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 // 是否点击屏幕后关闭
  ..customAnimation = CustomAnimation(); // 自定义动画

自定义动画

你可以创建自定义动画并应用到 EasyLoading 中。例如：

class CustomAnimation extends EasyLoadingAnimation {
  [@override](/user/override)
  Widget build(BuildContext context, double progress) {
    return Transform.rotate(
      angle: progress * 2 * pi,
      child: Icon(Icons.circle, size: 40, color: Colors.blue),
    );
  }
}

完整示例

以下是完整的示例代码，展示了如何使用 gugor_easyloading 插件：

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:gugor_easyloading/gugor_easyloading.dart';

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
    ..customAnimation = CustomAnimation();
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter EasyLoading',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter EasyLoading'),
      builder: EasyLoading.init(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Timer? _timer;
  late double _progress;

  [@override](/user/override)
  void initState() {
    super.initState();
    EasyLoading.addStatusCallback((status) {
      print('EasyLoading Status $status');
      if (status == EasyLoadingStatus.dismiss) {
        _timer?.cancel();
      }
    });
    EasyLoading.showSuccess('Use in initState');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title ?? ''),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              TextField(),
              Wrap(
                runAlignment: WrapAlignment.center,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: <Widget>[
                  TextButton(
                    child: Text('open test page'),
                    onPressed: () {
                      _timer?.cancel();
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (BuildContext context) => TestPage(),
                        ),
                      );
                    },
                  ),
                  TextButton(
                    child: Text('dismiss'),
                    onPressed: () async {
                      _timer?.cancel();
                      await EasyLoading.dismiss();
                      print('EasyLoading dismiss');
                    },
                  ),
                  TextButton(
                    child: Text('show'),
                    onPressed: () async {
                      _timer?.cancel();
                      await EasyLoading.show(
                        status: 'loading...',
                        maskType: EasyLoadingMaskType.black,
                      );
                      print('EasyLoading show');
                    },
                  ),
                  TextButton(
                    child: Text('showToast'),
                    onPressed: () {
                      _timer?.cancel();
                      EasyLoading.showToast(
                        'Toast',
                      );
                    },
                  ),
                  TextButton(
                    child: Text('showSuccess'),
                    onPressed: () async {
                      _timer?.cancel();
                      await EasyLoading.showSuccess('Great Success!');
                      print('EasyLoading showSuccess');
                    },
                  ),
                  TextButton(
                    child: Text('showError'),
                    onPressed: () {
                      _timer?.cancel();
                      EasyLoading.showError('Failed with Error');
                    },
                  ),
                  TextButton(
                    child: Text('showInfo'),
                    onPressed: () {
                      _timer?.cancel();
                      EasyLoading.showInfo('Useful Information.');
                    },
                  ),
                  TextButton(
                    child: Text('showProgress'),
                    onPressed: () {
                      _progress = 0;
                      _timer?.cancel();
                      _timer = Timer.periodic(const Duration(milliseconds: 100), (Timer timer) {
                        EasyLoading.showProgress(_progress,
                            status: '${(_progress * 100).toStringAsFixed(0)}%');
                        _progress += 0.03;

                        if (_progress >= 1) {
                          _timer?.cancel();
                          EasyLoading.dismiss();
                        }
                      });
                    },
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Column(
                  children: <Widget>[
                    Text('Style'),
                    Padding(
                      padding: EdgeInsets.only(top: 10.0),
                      child: CupertinoSegmentedControl<EasyLoadingStyle>(
                        selectedColor: Colors.blue,
                        children: {
                          EasyLoadingStyle.dark: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('dark'),
                          ),
                          EasyLoadingStyle.light: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('light'),
                          ),
                          EasyLoadingStyle.custom: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('custom'),
                          ),
                        },
                        onValueChanged: (value) {
                          EasyLoading.instance.loadingStyle = value;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Column(
                  children: <Widget>[
                    Text('MaskType'),
                    Padding(
                      padding: EdgeInsets.only(top: 10.0),
                      child: CupertinoSegmentedControl<EasyLoadingMaskType>(
                        selectedColor: Colors.blue,
                        children: {
                          EasyLoadingMaskType.none: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('none'),
                          ),
                          EasyLoadingMaskType.clear: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('clear'),
                          ),
                          EasyLoadingMaskType.black: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('black'),
                          ),
                          EasyLoadingMaskType.custom: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('custom'),
                          ),
                        },
                        onValueChanged: (value) {
                          EasyLoading.instance.maskType = value;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Column(
                  children: <Widget>[
                    Text('Toast Positon'),
                    Padding(
                      padding: EdgeInsets.only(top: 10.0),
                      child: CupertinoSegmentedControl<EasyLoadingToastPosition>(
                        selectedColor: Colors.blue,
                        children: {
                          EasyLoadingToastPosition.top: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('top'),
                          ),
                          EasyLoadingToastPosition.center: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('center'),
                          ),
                          EasyLoadingToastPosition.bottom: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('bottom'),
                          ),
                        },
                        onValueChanged: (value) {
                          EasyLoading.instance.toastPosition = value;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20.0),
                child: Column(
                  children: <Widget>[
                    Text('Animation Style'),
                    Padding(
                      padding: EdgeInsets.only(top: 10.0),
                      child: CupertinoSegmentedControl<EasyLoadingAnimationStyle>(
                        selectedColor: Colors.blue,
                        children: {
                          EasyLoadingAnimationStyle.opacity: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('opacity'),
                          ),
                          EasyLoadingAnimationStyle.offset: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('offset'),
                          ),
                          EasyLoadingAnimationStyle.scale: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('scale'),
                          ),
                          EasyLoadingAnimationStyle.custom: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('custom'),
                          ),
                        },
                        onValueChanged: (value) {
                          EasyLoading.instance.animationStyle = value;
                        },
                      ),
                    ),
                  ],
                ),
              ),
              Padding(
                padding: EdgeInsets.only(
                  top: 20.0,
                  bottom: 50.0,
                ),
                child: Column(
                  children: <Widget>[
                    Text('IndicatorType(total: 23)'),
                    Padding(
                      padding: EdgeInsets.only(top: 10.0),
                      child: CupertinoSegmentedControl<EasyLoadingIndicatorType>(
                        selectedColor: Colors.blue,
                        children: {
                          EasyLoadingIndicatorType.circle: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('circle'),
                          ),
                          EasyLoadingIndicatorType.wave: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('wave'),
                          ),
                          EasyLoadingIndicatorType.ring: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('ring'),
                          ),
                          EasyLoadingIndicatorType.pulse: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('pulse'),
                          ),
                          EasyLoadingIndicatorType.cubeGrid: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('cubeGrid'),
                          ),
                          EasyLoadingIndicatorType.threeBounce: Padding(
                            padding: EdgeInsets.all(5.0),
                            child: Text('threeBounce'),
                          ),
                        },
                        onValueChanged: (value) {
                          EasyLoading.instance.indicatorType = value;
                        },
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter加载提示插件gugor_easyloading的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼

更多关于Flutter加载提示插件gugor_easyloading的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gugor_easyloading 是一个用于在 Flutter 应用中显示加载提示的插件。它可以帮助你在应用中进行异步操作时显示加载动画，并在操作完成后自动隐藏。以下是如何在 Flutter 项目中使用 gugor_easyloading 的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 gugor_easyloading 依赖：

dependencies:
  flutter:
    sdk: flutter
  gugor_easyloading: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 初始化 EasyLoading

在你的应用的入口文件（通常是 main.dart）中初始化 EasyLoading：

import 'package:flutter/material.dart';
import 'package:gugor_easyloading/gugor_easyloading.dart';

void main() {
  runApp(MyApp());
  EasyLoading.init();  // 初始化 EasyLoading
}

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

3. 使用 EasyLoading

在你的应用中使用 EasyLoading 来显示和隐藏加载提示。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:gugor_easyloading/gugor_easyloading.dart';

class MyHomePage extends StatelessWidget {
  void _showLoading() async {
    EasyLoading.show(status: '加载中...');  // 显示加载提示

    // 模拟一个异步操作
    await Future.delayed(Duration(seconds: 2));

    EasyLoading.dismiss();  // 隐藏加载提示
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasyLoading 示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showLoading,
          child: Text('显示加载提示'),
        ),
      ),
    );
  }
}

4. 自定义 EasyLoading

你可以通过 EasyLoading 提供的各种方法来自定义加载提示的外观和行为。例如：

EasyLoading.show(
  status: '加载中...',
  maskType: EasyLoadingMaskType.black,  // 背景遮罩类型
  dismissOnTap: false,  // 点击屏幕是否关闭加载提示
);

// 自定义加载动画
EasyLoading.show(
  indicator: CircularProgressIndicator(),  // 自定义加载动画
  status: '加载中...',
);

// 显示成功提示
EasyLoading.showSuccess('操作成功！');

// 显示错误提示
EasyLoading.showError('操作失败！');

// 显示信息提示
EasyLoading.showInfo('这是一个信息提示');

5. 全局配置

你还可以在初始化时对 EasyLoading 进行全局配置：

EasyLoading.init(
  indicatorType: EasyLoadingIndicatorType.fadingCircle,  // 加载动画类型
  maskType: EasyLoadingMaskType.custom,  // 背景遮罩类型
  backgroundColor: Colors.black.withOpacity(0.5),  // 背景颜色
  textColor: Colors.white,  // 文字颜色
  loadingStyle: EasyLoadingStyle.dark,  // 加载提示样式
);