Flutter加载提示插件loading_plus的使用

Flutter加载提示插件loading_plus的使用

loading_plus 是一个Flutter插件，它简化了在Flutter应用程序中添加加载覆盖层和加载小部件的过程。加载指示器是增强用户体验的重要UI组件，可以指示正在进行的进程或数据检索。

功能特性

• 易于集成：loading_plus 提供了简单的集成过程。只需几行代码，开发者就可以快速将加载指示器添加到应用中，而无需进行繁琐的手动设置。
• 可自定义的加载：该插件提供了预设计的加载覆盖层，可以轻松自定义以匹配应用的主题和品牌。开发者可以调整加载覆盖层的外观、颜色、大小和动画，以创建无缝的用户体验。
• 灵活性和控制：该插件为开发者提供了灵活控制加载指示器何时何地出现的功能。他们可以在数据获取、API调用或其他异步过程中轻松触发加载覆盖层，确保用户了解正在进行的操作。
• 平滑动画：loading_plus 确保加载动画平滑且响应迅速，为用户提供视觉上令人愉悦的体验，同时等待内容或进程加载。
• 防止返回按钮：在显示加载覆盖层时阻止返回按钮的按下。
• 文档和示例：为了帮助开发者有效使用该插件，提供了详细的文档和示例。这有助于减少学习曲线，并使开发者能够轻松实现加载指示器。

快速开始

1. 安装：在 pubspec.yaml 文件中添加以下依赖项：

   dependencies:
     loading_plus: ^2.0.2
   

   然后，在Dart代码中导入该包：

   import 'package:loading_plus/loading_plus.dart';
   

2. 初始化：要使用加载覆盖层，将主小部件包裹在 LoadingPlus 中，并提供主内容作为子小部件：

   Android 13兼容性：为了使其在Android 13及以上版本上正常工作，请在 AndroidManifest.xml 文件中的 MainActivity 块中设置 android:enableOnBackInvokedCallback="false"：

   <activity
       android:name=".MainActivity"
       android:enableOnBackInvokedCallback="false">
   

   默认加载覆盖层：

   LoadingPlus(
     child: YourMainWidget(),
   )
   

   自定义加载覆盖层小部件：

   LoadingPlus(
     child: YourMainWidget(),
     loadingWidget: YourCustomLoadingWidget(),
   )
   

3. 使用：现在你可以在应用的任何地方使用 loading_plus 插件来显示加载覆盖层和加载小部件。例如：

   // 显示加载覆盖层
   LoadingPlusController().show();
   
   // 隐藏加载覆盖层
   LoadingPlusController().dismiss();
   
   // 使用默认加载小部件
   LoadingPlusWidget()
   
   // 使用自定义加载小部件
   LoadingPlusWidget(
     child: Center(
       child: Text('Loading...'),
     ),
   );
   

完整示例

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

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

// 应用入口点
void main() {
  // 运行 MyApp 小部件作为 widget 树的根
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Loading Example',
      // 在 MaterialApp 中添加 (LoadingPlus)，它必须位于 widget 树中所有其他屏幕之上
      home: LoadingPlus(
        child: HomePage(),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Future<void> fetchData() async {
    // 显示默认加载
    LoadingPlusController().show();
    
    // 模拟耗时操作
    await Future.delayed(const Duration(seconds: 3));
    
    // 当进程完成时隐藏加载
    LoadingPlusController().dismiss();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Loading Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FilledButton(
              onPressed: fetchData,
              child: const Text('Fetch data'), // 触发 fetchData 函数的按钮
            ),
            FilledButton(
              onPressed: () {
                // 导航到 LoadingPage
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (_) => const LoadingPage()),
                );
              },
              child: const Text('Go to loading page'), // 导航到 LoadingPage 的按钮
            ),
          ],
        ),
      ),
    );
  }
}

class LoadingPage extends StatelessWidget {
  const LoadingPage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Loading Page'),
      ),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            LoadingPlusWidget(), // 显示默认加载小部件
            SizedBox(height: 120.0),
            LoadingPlusWidget(
              customLoadingWidget: Center(
                child: Text('Loading...'), // 自定义加载小部件
              ),
            ),
          ],
        ),
      ),
    );
  }
}