Flutter等待提示插件waiting的使用

Flutter等待提示插件waiting的使用

引言

等待是任何应用程序的一部分：加载资源需要时间，用户需要知道他们必须等待。

此包提供了一个 WaitingWidget：一个显示进度指示器的小部件，包括动画、过渡和自定义选项。

开始使用

在你的 Flutter 项目中添加依赖项：

dependencies:
  waiting: ^1.0.0

导入该包：

import 'package:waiting/waiting.dart';

将任意小部件包装在 WaitingWidget 中：

WaitingWidget(
  show: _show,
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())),
);

如果给定变量 _show 被设置为 true，则被包装的小部件会被淡出并覆盖上一个圆形进度指示器。当 _show 变为 false 时，被包装的小部件会恢复到正常状态：

请参阅 示例代码 获取完整的代码。

自定义

设置指示器

要更改指示器，在创建 WaitingWidget 时设置 indicator。

例如，如果希望使用 Lottie 动画作为指示器：

WaitingWidget(
  indicator: Center(
      child: SizedBox(
          width: 100,
          height: 100,
          child: Center(
              child: Lottie.asset("assets/infinite.json")))),
  show: _show,
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())),
);

结果如下所示：

设置超时

在等待一段时间后，用户应该被告知等待的时间将超过预期。

WaitingWidget 提供了 timeout 参数来指定超时时间，超过该时间后用户将收到通知：

WaitingWidget(
  show: _show,
  timeout: const Duration(seconds: 5), // 设置超时时间为5秒
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())),
);

结果如下所示：

若要指定自己的超时指示器，可以使用 timeoutIndicator 参数：

WaitingWidget(
  show: _show,
  timeout: const Duration(seconds: 5),
  timeoutIndicator: const Center(child: Text("请稍等...")), // 自定义超时指示器
  child: const Center(
      child: SizedBox(width: 200, height: 200, child: FlutterLogo())),
);

结果如下所示：

进一步探索

WaitingWidget 使用 SceneController 和内部实现 SceneWidget 来在不同的场景之间进行过渡。

查看 waiting.dart 了解具体实现，并获得灵感。

还可以查看 演示源码 以了解如何使用“场景”构建演示等。

完整示例代码

以下是一个完整的示例代码，展示了如何使用 WaitingWidget：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '等待示例',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
          useMaterial3: true),
      home: Example(),
    );
  }
}

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

  [@override](/user/override)
  State<StatefulWidget> createState() => ExampleState();
}

class ExampleState extends State<Example> {
  bool _show = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: WaitingWidget(
          show: _show,
          child: const Center(
              child: SizedBox(width: 200, height: 200, child: FlutterLogo()))),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        child: !_show ? const Icon(Icons.play_arrow) : const Icon(Icons.pause),
      ),
    );
  }

  void _toggle() {
    setState(() {
      _show = !_show;
    });
  }
}