Flutter应用加载指示器插件flutter_app_loading_indicator的使用

AppLoading

pub package license AppLoading Demo

A customizable, easy-to-use loading overlay for Flutter applications using Lottie animations.

特性

  • 🎭 支持Lottie动画，视觉效果吸引人。
  • 🎨 可自定义背景颜色。
  • 🔄 使用单例模式，确保在整个应用中的一致性。
  • 🚀 提供简单的show/dismiss API，并扩展了BuildContext以方便使用。
  • 🛡️ 处理边缘情况，如多次调用show或尝试关闭不存在的overlay。
  • 📏 可调整动画大小。

开始使用

要使用此包，请在pubspec.yaml文件中添加app_loading作为依赖项：

dependencies:
  app_loading: ^1.0.0

然后运行以下命令获取依赖：

flutter pub get

同时，你需要将你的Lottie动画文件添加到pubspec.yaml中：

assets:
  - assets/your_loading_animation.json

使用方法

初始化

首先，在main.dart文件中初始化AppLoading：

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

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

  /// 初始化加载器
  AppLoading.initialize(
    lottieAssetName: 'assets/your_loading_animation.json', // Lottie动画文件路径
    backgroundColor: Colors.black.withOpacity(0.5), // 背景颜色
  );
}

显示加载覆盖层

你可以在应用程序的任何位置通过BuildContext扩展来显示加载覆盖层：

context.showLoading(); // 默认大小

如果需要自定义Lottie动画的大小：

context.showLoading(width: 200, height: 200); // 自定义宽度和高度

关闭加载覆盖层

要关闭加载覆盖层：

context.dismissLoading();

示例代码

以下是一个简单的示例，展示如何在按钮点击时使用AppLoading：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AppLoading Example')),
      body: Center(
        child: ElevatedButton(
          child: Text('Load Data'), // 按钮文字
          onPressed: () async {
            context.showLoading(); // 显示加载指示器
            try {
              await Future.delayed(Duration(seconds: 3)); // 模拟异步操作
              // 在此处执行实际的数据加载逻辑
            } finally {
              context.dismissLoading(); // 确保无论成功与否都关闭加载指示器
            }
          },
        ),
      ),
    );
  }
}

高级用法

自定义初始化

你可以通过传递额外的参数进一步定制AppLoading实例：

AppLoading.initialize(
  lottieAssetName: 'assets/your_loading_animation.json',
  backgroundColor: Colors.blue.withOpacity(0.3),
  defaultWidth: 150, // 默认宽度
  defaultHeight: 150, // 默认高度
);

检查覆盖层状态

你可以检查当前是否正在显示加载覆盖层：

bool isVisible = AppLoading.instance.isOverlayVisible; // 返回布尔值

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

1 回复

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


flutter_app_loading_indicator 是一个用于在 Flutter 应用中显示加载指示器的插件。它可以帮助你在应用执行耗时操作时，显示一个加载动画，以提升用户体验。

安装插件

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

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

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

基本用法

  1. 导入插件：

    在你的 Dart 文件中导入插件：

    import 'package:flutter_app_loading_indicator/flutter_app_loading_indicator.dart';

  2. 显示加载指示器：

    你可以使用 AppLoadingIndicator.show() 来显示加载指示器：

    AppLoadingIndicator.show(context);

  3. 隐藏加载指示器：

    使用 AppLoadingIndicator.hide() 来隐藏加载指示器：

    AppLoadingIndicator.hide();

示例代码

以下是一个简单的示例，展示了如何在按钮点击时显示加载指示器，并在 3 秒后隐藏它：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading Indicator Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 显示加载指示器
              AppLoadingIndicator.show(context);

              // 模拟耗时操作
              await Future.delayed(Duration(seconds: 3));

              // 隐藏加载指示器
              AppLoadingIndicator.hide();
            },
            child: Text('Show Loading Indicator'),
          ),
        ),
      ),
    );
  }
}

自定义加载指示器

flutter_app_loading_indicator 允许你自定义加载指示器的样式。你可以通过传递 indicator 参数来使用自定义的加载指示器：

AppLoadingIndicator.show(
  context,
  indicator: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
  ),
);

其他功能

  • 设置背景颜色：你可以通过 backgroundColor 参数设置加载指示器的背景颜色。
  • 设置指示器大小：通过 indicatorSize 参数可以设置指示器的大小。
AppLoadingIndicator.show(
  context,
  backgroundColor: Colors.black.withOpacity(0.5),
  indicatorSize: 50.0,
);
回到顶部