Flutter进度加载覆盖层插件progress_loader_overlay的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter进度加载覆盖层插件 progress_loader_overlay 的使用

progress_loader_overlay 是一个用于在Flutter应用中显示易于使用且完全可定制的进度加载器作为覆盖层的插件。它简化了状态管理，确保不会同时显示两个加载器，并允许用户自定义加载器的内容，甚至可以在加载过程中播放视频或音频。

主要特点

  • 自动状态管理：避免重复调用show方法时出现多个加载器。
  • 高度可定制：可以使用任何Widget作为加载器内容，包括动画、视频等。
  • 便捷的导航控制：提供了一个修改版的PopScope来处理当加载器显示时用户的导航手势（如防止返回或允许返回并关闭加载器）。

使用示例

初始化Loader Builder

首先，在应用启动时初始化ProgressLoader的widgetBuilder属性，指定默认使用的加载器Widget。这一步需要在首次显示加载器之前完成。

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

void main() {
  ProgressLoader().widgetBuilder = (context, loaderWidgetController) =>
      SimpleProgressLoaderWidget(loaderWidgetController);
  
  runApp(MyApp());
}

显示和隐藏加载器

通过调用ProgressLoader的show方法显示加载器，并在任务完成后调用dismiss方法隐藏加载器。

class MyHomePage extends StatelessWidget {
  void showSimpleLoader(BuildContext context) async {
    await ProgressLoader().show(context);
    await Future<void>.delayed(Duration(seconds: 2));
    await ProgressLoader().dismiss();
  }
  
  // 其他按钮点击事件...
}

自定义加载器Widget

你可以随时更改ProgressLoader使用的Widget，只需重新设置widgetBuilder即可。

void showComplexLoader(BuildContext context) async {
  ProgressLoader().widgetBuilder = (context, loaderWidgetController) =>
      ComplexProgressLoaderWidget(loaderWidgetController);

  await ProgressLoader().show(context);
  await Future<void>.delayed(Duration(seconds: 5));
  await ProgressLoader().dismiss();
}

完整Demo

以下是一个完整的示例代码，包含不同类型的加载器演示：

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

void main() {
  ProgressLoader().widgetBuilder = (context, loaderWidgetController) =>
      SimpleProgressLoaderWidget(loaderWidgetController);
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Progress Loader Overlay Example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(),
      );
}

// 假设SimpleProgressLoaderWidget等已经定义好

这个示例展示了如何集成和使用progress_loader_overlay插件，以及如何根据需要定制加载器的行为和外观。请根据实际项目需求调整相应的Widget实现。


更多关于Flutter进度加载覆盖层插件progress_loader_overlay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter进度加载覆盖层插件progress_loader_overlay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用progress_loader_overlay插件来实现进度加载覆盖层的示例代码。

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

dependencies:
  flutter:
    sdk: flutter
  progress_loader_overlay: ^x.y.z  # 替换为最新版本号

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

接下来，你可以在你的Flutter应用中按照以下方式使用ProgressLoaderOverlay：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  final ProgressLoaderOverlayController _progressLoaderOverlayController =
      ProgressLoaderOverlayController();

  void _showLoader() {
    _progressLoaderOverlayController.show();
    // 模拟一个耗时操作，比如网络请求
    Future.delayed(Duration(seconds: 3), () {
      _progressLoaderOverlayController.hide();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Loader Overlay Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showLoader,
          child: Text('Show Loader'),
        ),
      ),
      overlay: ProgressLoaderOverlay(
        controller: _progressLoaderOverlayController,
        loaderBuilder: (context, controller) {
          return Container(
            color: Colors.black54,
            child: Center(
              child: CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
              ),
            ),
          );
        },
      ),
    );
  }
}

代码说明：

  1. 依赖导入：

    • 导入flutter/material.dart用于构建基本的Flutter应用。
    • 导入progress_loader_overlay/progress_loader_overlay.dart用于进度加载覆盖层。

  2. 创建主应用：

    • MyApp是一个无状态小部件，定义了应用的主题和主页。

  3. 主页小部件：

    • MyHomePage是一个有状态小部件，用于管理进度加载覆盖层的显示和隐藏。
    • 使用SingleTickerProviderStateMixin来混合动画状态。

  4. 进度加载覆盖层控制器：

    • 定义一个ProgressLoaderOverlayController控制器实例_progressLoaderOverlayController。

  5. 显示加载器：

    • _showLoader方法用于显示加载器，并在3秒后隐藏它。

  6. 构建UI：

    • 在Scaffold的overlay属性中使用ProgressLoaderOverlay，并传入控制器和自定义的加载器构建器。
    • 加载器构建器loaderBuilder返回一个简单的居中旋转的进度指示器。

  7. 按钮触发：

    • 在页面中心放置一个ElevatedButton，点击按钮时调用_showLoader方法显示加载器。

这样，你就可以在Flutter应用中轻松实现一个进度加载覆盖层。如果你需要更多自定义功能，比如加载消息、不同风格的加载动画等，可以根据需求调整loaderBuilder的内容。

回到顶部