Flutter异步任务管理插件async_overlay的使用

Flutter异步任务管理插件async_overlay的使用

AsyncOverlay 是一个简单的包，灵感来源于 future_progress_dialog 包，用于在异步 Future 操作期间显示自定义覆盖 UI。它使开发者能够定义自己独特的加载覆盖，提供了一种比默认 UI 更灵活的选择。

支持的Dart版本

Dart SDK 版本 >= 3.6.0

安装

在 pubspec.yaml 文件中添加 async_overlay：

dependencies:
  async_overlay: # 最新版本

使用

导入包：

import 'package:async_overlay/async_overlay.dart';

调用 showDialog 方法并传入 AsyncOverlay 来显示覆盖加载 UI：

无消息

await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(asyncFutureTask()),
    );

无消息示例

带消息

await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        message: Text('Loading'),
      ),
    );

带消息示例

带自定义加载组件

await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        message: Text('Loading'),
        loadingWidget: const CustomLoader(),
      ),
    );

带自定义加载组件示例

自定义覆盖UI

await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        customOverlayUI: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(16)),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Lottie.network(
                'https://lottie.host/add90c20-d592-4c79-90b1-35d4cdff3035/SXrl7L2Y8G.json',
                height: 200,
                width: 230,
                renderCache: RenderCache.raster,
              ),
              Lottie.network(
                'https://lottie.host/a3f86098-dd8c-4f30-9aa4-e4795eda9243/9b4YUI1crz.json',
                height: 112,
                width: 127,
                renderCache: RenderCache.raster,
              ),
            ],
          ),
        ),
      ),
    );

自定义覆盖UI示例


## 示例代码

```dart
import 'package:async_overlay/async_overlay.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

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

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

  // 这个小部件是你的应用的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Async Overlay Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleScreen(),
    );
  }
}

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

  [@override](/user/override)
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  String res = '';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text('Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          spacing: 18,
          children: [
            Text(
              res,
              style: TextStyle(fontSize: 22),
            ),
            ElevatedButton(
              onPressed: showDefaultAsyncOverlay,
              child: Text('显示默认的Async Overlay'),
            ),
            ElevatedButton(
              onPressed: showDefaultAsyncOverlayWithMsg,
              child: Text('显示带有消息的Async Overlay'),
            ),
            ElevatedButton(
              onPressed: showDefaultAsyncOverlayWithCustomLoader,
              child: Text('显示带有自定义加载器的Async Overlay'),
            ),
            ElevatedButton(
              onPressed: showCustomOverlay,
              child: Text('显示自定义的Async Overlay'),
            ),
          ],
        ),
      ),
    );
  }

  Future asyncFutureTask() async {
    await Future.delayed(Duration(seconds: 5));
    return 'Hello World!';
  }

  showDefaultAsyncOverlay() async {
    res = await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(asyncFutureTask()),
    );
    if (!mounted) return;
    setState(() {});
  }

  showDefaultAsyncOverlayWithMsg() async {
    res = await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        message: Text('Loading'),
      ),
    );
    if (!mounted) return;
    setState(() {});
  }

  showDefaultAsyncOverlayWithCustomLoader() async {
    res = await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        message: Text('Loading'),
        loadingWidget: const CustomLoader(),
      ),
    );
    if (!mounted) return;
    setState(() {});
  }

  showCustomOverlay() async {
    res = await showDialog(
      context: context,
      builder: (context) => AsyncOverlay(
        asyncFutureTask(),
        customOverlayUI: Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(16)),
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Lottie.network(
                'https://lottie.host/add90c20-d592-4c79-90b1-35d4cdff3035/SXrl7L2Y8G.json',
                height: 200,
                width: 230,
                renderCache: RenderCache.raster,
              ),
              Lottie.network(
                'https://lottie.host/a3f86098-dd8c-4f30-9aa4-e4795eda9243/9b4YUI1crz.json',
                height: 112,
                width: 127,
                renderCache: RenderCache.raster,
              ),
            ],
          ),
        ),
      ),
    );
    if (!mounted) return;
    setState(() {});
  }
}

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

  [@override](/user/override)
  State<CustomLoader> createState() => _CustomLoaderState();
}

class _CustomLoaderState extends State<CustomLoader> with SingleTickerProviderStateMixin {
  late AnimationController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    controller = AnimationController(
        value: 0.0, duration: Duration(milliseconds: 1000), vsync: this);
    controller.repeat();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedIcon(
      icon: AnimatedIcons.menu_home,
      progress: controller,
    );
  }
}

更多关于Flutter异步任务管理插件async_overlay的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter异步任务管理插件async_overlay的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter开发中，async_overlay 是一个用于管理异步任务的插件，它允许开发者在UI中显示加载指示器，同时处理后台任务。下面是一个使用 async_overlay 的代码示例，演示如何在Flutter应用中管理异步任务。

首先，确保在 pubspec.yaml 文件中添加 async_overlay 依赖：

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

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

接下来，在 Dart 代码中，你可以这样使用 async_overlay：

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

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

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

class AsyncOverlayDemo extends StatefulWidget {
  @override
  _AsyncOverlayDemoState createState() => _AsyncOverlayDemoState();
}

class _AsyncOverlayDemoState extends State<AsyncOverlayDemo> {
  final AsyncOverlayController _controller = AsyncOverlayController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Async Overlay Demo'),
      ),
      body: AsyncOverlay(
        controller: _controller,
        loadingBuilder: (context, child) {
          return Center(
            child: CircularProgressIndicator(),
          );
        },
        child: Center(
          child: ElevatedButton(
            onPressed: () async {
              _controller.show();
              await _performAsyncTask();
              _controller.hide();
            },
            child: Text('Perform Async Task'),
          ),
        ),
      ),
    );
  }

  Future<void> _performAsyncTask() async {
    await Future.delayed(Duration(seconds: 3)); // 模拟异步任务
  }
}

代码解释：

  1. 依赖导入：

    • 导入 flutter/material.dart 和 async_overlay/async_overlay.dart。

  2. 应用入口：

    • MyApp 是应用的入口，它创建了 MaterialApp 并设置了主题和主页。

  3. 主页：

    • AsyncOverlayDemo 是一个有状态的组件，它管理 AsyncOverlayController。

  4. AsyncOverlay：

    • AsyncOverlay 组件接受一个 controller 和一个 loadingBuilder。loadingBuilder 用于定义加载指示器的外观。
    • child 参数是异步任务完成前显示的常规内容。

  5. 按钮点击事件：

    • 当用户点击按钮时，_controller.show() 显示加载指示器。
    • 调用 _performAsyncTask() 模拟一个异步任务（这里是等待3秒）。
    • 异步任务完成后，_controller.hide() 隐藏加载指示器。

通过这种方式，你可以轻松地在Flutter应用中管理异步任务，并在UI中显示加载指示器，提高用户体验。

回到顶部