Flutter进度提示插件progress_alert的使用

Flutter进度提示插件progress_alert的使用

Progress Alert 是一个用于显示后台正在运行进程的可定制化提示框。

特性

• 单行基本提示
• 可定制特性：
  • 更改所有按钮文本
    • 更改高度
    • 更改位置为顶部/底部
    • 更改图标
  • 更改失败进程提示的显示时间

开始使用

你必须将该库作为依赖项添加到项目中。

dependencies:
  progress_alert: ^latest

然后运行 flutter packages get

示例项目

在 example 文件夹中有一个详细的示例项目。你可以直接运行并进行测试。以下是来自示例项目的代码片段：

基本设置

将 ProgressAlert() 添加到 MaterialApp 的构建器中，如示例所示：

Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    builder: (context, child) => Stack(
      children: [child!, ProgressAlert()],
    ),
    home: const MyHomePage(title: 'Flutter Demo Home Page'),
  );
}

启动控制器：

final controller = ProgressPanel();

创建进度：

Future<void> func() async {
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    _counter++;
  });
}

ProgressItem progress = ProgressItem(
  process: func,
  processText: "Counter Incrementing",
  errorText: "Counter Incrementing Failed!",
  onCancel: () {
    print("Progress Cancelled");
  },
  onDone: () {
    print("Progress Done");
  },
  onError: (e) {
    print("Progress Failed:$e");
  },
);

添加并开始进程：

controller.addProcess(progress);

可定制特性

ProgressAlert

ProgressAlert(
  redoText: "Redi",
  height: 50,
  hideText: "Hide",
  cancelText: "Cancel",
  errorIcon: const Icon(Icons.error),
  progressIcon: const CircularProgressIndicator(),
  isTop: true,
)

ProgressItem

ProgressItem progress = ProgressItem(
  process: func,
  processText: "Counter Incrementing",
  errorText: "Counter Incrementing Failed!",
  onCancel: () {
    print("Progress Cancelled");
  },
  onDone: () {
    print("Progress Done");
  },
  onError: (e) {
    print("Progress Failed:$e");
  },
);

显示失败

final controller = ProgressPanel();
controller.setFailDuration = const Duration(seconds: 10);
// 如果你希望错误不从屏幕上清除，将其设为false
controller.changeRemoveFailAfterDuration = true;

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (context, child) => Stack(
        children: [child!, ProgressAlert()],
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final controller = ProgressPanel();

  void _incrementCounter() {
    ProgressItem progress = ProgressItem(
      process: func,
      processText: "Counter Incrementing",
      errorText: "Counter Incrementing Failed!",
      onCancel: () {
        debugPrint("Progress Cancelled");
      },
      onDone: () {
        debugPrint("Progress Done");
      },
      onError: (e) {
        debugPrint("Progress Failed:$e");
      },
    );
    controller.addProcess(progress);
  }

  [@override](/user/override)
  void initState() {
    controller.setFailDuration = const Duration(seconds: 10);
    // 如果你希望错误不从屏幕上清除，将其设为false
    controller.changeRemoveFailAfterDuration = true;
    super.initState();
  }

  Future<void> func() async {
    // 打开注释行以查看失败效果
    // List<int> list = [1, 2];
    await Future.delayed(const Duration(seconds: 3));
    // list.singleWhere((element) => element == 3);
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}