Flutter进度显示插件progress_overlay的使用

Flutter进度显示插件progress_overlay的使用

progress_overlay 是一个加载覆盖（或进度HUD）小部件，可以在需要时显示和隐藏，通常用于处理耗时操作。我创建这个包是因为之前使用的类似包在某些用例中不起作用。

由于我在应用中已经使用了 Flutter BloC，无论好坏，这个包也使用了 flutter_bloc 包。

示例

  • 查看 示例 获取一个完整的使用 progress_overlay 的示例应用

示例

这是一个新的 Flutter 项目。


#### 开始使用

这个项目是 Flutter 应用程序的起点。

如果你是第一次使用 Flutter 项目，这里有一些资源可以帮助你入门：

- [编写你的第一个 Flutter 应用](https://docs.flutter.dev/get-started/codelab)
- [有用的 Flutter 示例](https://docs.flutter.dev/cookbook)

要开始 Flutter 开发，可以查看 [在线文档](https://docs.flutter.dev/)，其中包含教程、示例、移动开发指南和完整的 API 参考。

### 完整示例代码

以下是一个完整的示例代码，演示如何在 Flutter 中使用 `progress_overlay` 插件。

```dart
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:progress_overlay/progress_overlay.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Progress Overlay Example'),
        ),
        body: ProgressOverlayExample(),
      ),
    );
  }
}

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

class _ProgressOverlayExampleState extends State<ProgressOverlayExample> {
  bool _isLoading = false;

  void _showProgress() async {
    setState(() {
      _isLoading = true;
    });

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ElevatedButton(
            onPressed: _showProgress,
            child: Text('显示进度'),
          ),
          ProgressOverlay(
            child: Text(_isLoading ? '加载中...' : '点击按钮以显示进度'),
            show: _isLoading,
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


progress_overlay 是一个用于在 Flutter 应用中显示加载进度覆盖层的插件。它允许你在执行耗时操作时显示一个覆盖层，以阻止用户与界面交互，并显示一个加载指示器。

安装

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

dependencies:
  flutter:
    sdk: flutter
  progress_overlay: ^0.1.0

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

使用方法

  1. 导入包：在需要使用 progress_overlay 的 Dart 文件中导入包。
import 'package:progress_overlay/progress_overlay.dart';
  1. 使用 ProgressOverlay 包裹你的内容：将 ProgressOverlay 包裹在你想要显示加载覆盖层的部分。
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Overlay Example'),
      ),
      body: ProgressOverlay(
        child: Center(
          child: ElevatedButton(
            onPressed: () async {
              ProgressOverlay.of(context).show();
              await Future.delayed(Duration(seconds: 3)); // 模拟耗时操作
              ProgressOverlay.of(context).hide();
            },
            child: Text('Start Task'),
          ),
        ),
      ),
    );
  }
}
  1. 控制覆盖层的显示与隐藏：
    • 使用 ProgressOverlay.of(context).show() 来显示加载覆盖层。
    • 使用 ProgressOverlay.of(context).hide() 来隐藏加载覆盖层。

完整示例

以下是一个完整的示例，展示了如何在点击按钮时显示加载覆盖层，并在任务完成后隐藏它。

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Overlay Example'),
      ),
      body: ProgressOverlay(
        child: Center(
          child: ElevatedButton(
            onPressed: () async {
              ProgressOverlay.of(context).show();
              await Future.delayed(Duration(seconds: 3)); // 模拟耗时操作
              ProgressOverlay.of(context).hide();
            },
            child: Text('Start Task'),
          ),
        ),
      ),
    );
  }
}

自定义选项

ProgressOverlay 提供了一些自定义选项，例如你可以自定义加载指示器的颜色、大小等。

ProgressOverlay(
  backgroundColor: Colors.black.withOpacity(0.5),
  indicatorColor: Colors.white,
  indicatorSize: 50.0,
  child: Center(
    child: ElevatedButton(
      onPressed: () async {
        ProgressOverlay.of(context).show();
        await Future.delayed(Duration(seconds: 3)); // 模拟耗时操作
        ProgressOverlay.of(context).hide();
      },
      child: Text('Start Task'),
    ),
  ),
);
回到顶部