Flutter自适应覆盖层进度显示插件overlay_adaptive_progress_hub的使用

Flutter自适应覆盖层进度显示插件overlay_adaptive_progress_hub的使用

概述

OverlayAdaptiveProgressHub 是一个用于 Flutter 应用程序的插件，它提供了一个自适应的模态进度HUD（抬头显示器）覆盖层。通过该插件，开发者可以轻松地在应用中显示加载状态。该插件提供了丰富的定制选项，包括不透明度、颜色、进度指示器、偏移量以及背景模糊效果，使其成为适用于 Flutter 应用的灵活解决方案。

特性

  • 可定制的覆盖层：调整模态覆盖层的不透明度、颜色和模糊强度。
  • 自适应进度指示器：使用各种进度指示器，包括默认的 Android 转圈动画或自定义小部件。
  • 位置控制：设置偏移量以将进度指示器放置在屏幕上的任何位置。
  • 可取消的覆盖层：可选地允许用户通过点击来取消覆盖层。
  • 响应式设计：覆盖层会自动调整以适应不同的屏幕尺寸和方向。

安装

首先，在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  overlay_adaptive_progress_hub: ^0.0.2

然后，导入该包：

import 'package:overlay_adaptive_progress_hub/overlay_adaptive_progress_hub.dart';

使用示例

以下是使用 OverlayAdaptiveProgressHub 的示例代码：

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Overlay Adaptive Progress Hub Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  void _toggleLoading() {
    // 切换加载状态
    setState(() {
      _isLoading = !_isLoading;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return OverlayAdaptiveProgressHub(
      // 控制是否显示加载指示器
      inAsyncCall: _isLoading,
      // 设置不透明度
      opacity: 0.5,
      // 设置颜色
      color: Colors.black,
      // 设置进度指示器
      progressIndicator: CircularProgressIndicator(),
      // 是否允许用户通过点击来取消加载
      dismissible: true,
      // 子组件
      child: Scaffold(
        appBar: AppBar(title: Text('Overlay Adaptive Progress Hub Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: _toggleLoading,
            child: Text(_isLoading ? '停止加载' : '开始加载'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter自适应覆盖层进度显示插件overlay_adaptive_progress_hub的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，下面是一个关于如何使用 overlay_adaptive_progress_hub 插件在 Flutter 应用中实现自适应覆盖层进度显示的代码示例。这个插件允许你在应用的不同部分显示一个全局的加载进度指示器。

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

dependencies:
  flutter:
    sdk: flutter
  overlay_adaptive_progress_hub: ^最新版本号 # 替换为当前最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，下面是一个完整的示例代码，展示如何在 Flutter 应用中使用 overlay_adaptive_progress_hub：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return OverlayAdaptiveProgressHub(
      // 初始化 OverlayAdaptiveProgressHub
      child: MaterialApp(
        title: 'Overlay Adaptive Progress Hub Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  OverlayAdaptiveProgressHubController? _progressHubController;

  @override
  void initState() {
    super.initState();
    // 获取 OverlayAdaptiveProgressHubController 实例
    _progressHubController = OverlayAdaptiveProgressHub.of(context)!;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overlay Adaptive Progress Hub Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 显示进度指示器
                _progressHubController!.show(
                  message: 'Loading...',
                );
                // 模拟一个异步操作
                await Future.delayed(Duration(seconds: 3));
                // 隐藏进度指示器
                _progressHubController!.hide();
              },
              child: Text('Show Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 引入依赖：在文件顶部引入了 overlay_adaptive_progress_hub 包。
  2. 设置 OverlayAdaptiveProgressHub：在 MyApp 组件中，使用 OverlayAdaptiveProgressHub 包装了整个应用。
  3. 获取控制器：在 MyHomePage 的 initState 方法中，通过 OverlayAdaptiveProgressHub.of(context)! 获取 OverlayAdaptiveProgressHubController 实例。
  4. 显示和隐藏进度指示器：在按钮点击事件中，调用 _progressHubController!.show() 方法显示进度指示器，并在模拟的异步操作完成后调用 _progressHubController!.hide() 方法隐藏进度指示器。

这个示例展示了如何使用 overlay_adaptive_progress_hub 插件在 Flutter 应用中实现一个全局的加载进度指示器。你可以根据需要自定义进度指示器的样式和行为。

回到顶部