Flutter加载指示器插件flutter_loadingindicator的使用

1. 简介

flutter_loadingindicator 是一个用于在Flutter应用中显示加载指示器的插件。它提供了多种样式和自定义选项，帮助开发者轻松实现不同场景下的加载效果。本文将详细介绍如何安装、导入和使用该插件，并提供一个完整的示例Demo。

2. 安装

首先，在 pubspec.yaml 文件中添加 flutter_loadingindicator 依赖：

dependencies:
  flutter_loadingindicator: ^1.0.0

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

3. 导入

在需要使用的Dart文件中导入 flutter_loadingindicator：

import 'package:flutter_loadingindicator/flutter_loadingindicator.dart';

4. 初始化

在 MaterialApp 或 CupertinoApp 中初始化 LoadingIndicator。通常在 MyApp 的 build 方法中进行初始化：

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

5. 使用方法

flutter_loadingindicator 提供了多种方法来显示不同的加载状态。以下是一些常用的方法：

显示加载中：

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();

6. 自定义

flutter_loadingindicator 提供了丰富的自定义选项，可以通过 EasyLoading.instance 进行全局配置。例如：

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();
}

7. 完整示例Demo

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_loadingindicator 插件：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_loadingindicator/flutter_loadingindicator.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;
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LoadingIndicator',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter LoadingIndicator'),
      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;
  double _progress = 0.0;

  [@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: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            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: [
                  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: [
                  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: [
                  Text('Toast Position'),
                  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: [
                  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: [
                  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.circleGrid: Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Text('circleGrid'),
                        ),
                        EasyLoadingIndicatorType.threeBounce: Padding(
                          padding: EdgeInsets.all(5.0),
                          child: Text('threeBounce'),
                        ),
                      },
                      onValueChanged: (value) {
                        EasyLoading.instance.indicatorType = value;
                      },
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

sinazl 1楼•8 天前

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

当然，以下是如何在Flutter项目中使用flutter_loadingindicator插件来显示加载指示器的代码示例。

首先，确保你已经在pubspec.yaml文件中添加了flutter_loadingindicator依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_loadingindicator: ^3.0.1  # 请根据需要检查最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用flutter_loadingindicator。

示例代码

导入包

在你的Dart文件中导入flutter_loadingindicator包：

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

创建加载指示器

你可以创建一个简单的页面，其中包括一个按钮，点击按钮时会显示加载指示器。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Loading Indicator Example'),
        ),
        body: Center(
          child: MyLoadingIndicatorWidget(),
        ),
      ),
    );
  }
}

class MyLoadingIndicatorWidget extends StatefulWidget {
  @override
  _MyLoadingIndicatorWidgetState createState() => _MyLoadingIndicatorWidgetState();
}

class _MyLoadingIndicatorWidgetState extends State<MyLoadingIndicatorWidget> {
  bool isLoading = false;

  void handleLoadData() async {
    setState(() {
      isLoading = true;
    });

    // 模拟一个耗时操作，例如网络请求
    await Future.delayed(Duration(seconds: 3));

    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: handleLoadData,
          child: Text('Load Data'),
        ),
        SizedBox(height: 20),
        if (isLoading)
          Container(
            width: double.infinity,
            child: LoadingIndicator(
              indicatorType: LinearProgressIndicatorType.pacman, // 可以选择其他类型
              color: Colors.blue,
            ),
          ),
      ],
    );
  }
}

解释

依赖导入：我们导入了flutter和flutter_loadingindicator包。
主应用：MyApp是一个简单的Flutter应用，包含一个带有标题的Scaffold。
加载指示器组件：MyLoadingIndicatorWidget是一个状态组件，它包含一个按钮，点击按钮时触发handleLoadData方法。
加载数据逻辑：handleLoadData方法设置isLoading状态为true，模拟一个耗时操作（例如网络请求），然后将isLoading设置回false。
UI构建：在build方法中，我们根据isLoading状态决定是否显示加载指示器。如果isLoading为true，则显示一个LoadingIndicator，你可以通过indicatorType属性选择不同的加载动画类型。

这样，你就成功地在Flutter应用中使用flutter_loadingindicator插件来显示加载指示器了。你可以根据需要调整加载指示器的样式和位置。