Flutter进度构建插件progress_builder的使用

progress_builder 是一个用于执行简单的异步操作并带有进度/加载指示和内置错误处理的简写构造器。它可以帮助开发者简化异步操作的编写，使其代码更加简洁和易于维护。

功能概述

你可以将这个小部件视为以下代码的简写形式：

SomeButton(
    ...
    onPressed: () async {
        onStart...
        showLoading...

        try {
            await doAction... showProgress... 10...20...30...
            showLoaded...
            onSuccess...

        } catch(e) {
            onError...
        } finally {
            onDone...
        }
    }
    ...

对于更复杂的情况，建议使用 Cubit 或 Bloc。

使用示例

下面的示例展示了如何使用 LinearProgressBuilder：

• 等待 Future.delayed()
• 显示 LinearProgressIndicator 在等待期间
• 如果成功则打印 ‘success’
• 随机抛出异常时打印错误信息
• 无论成功或失败都打印 ‘done’

示例代码

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Progress Builder Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const Scaffold(
          body: MyHomePage(),
        ),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _fail = true;
  String _message = '';

  void _showMessage(String message) {
    setState(() {
      _message = message;
    });
  }

  void _showSnackbar(String message) => ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text(message)));

  @override
  Widget build(BuildContext context) => DefaultActionController(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LinearProgressBuilder(
              builder: (context, action, error) => Column(
                children: [
                  ElevatedButton(
                    onPressed: action,
                    child: const Text(
                      '50/50 chance of success',
                    ),
                  ),
                  if (error != null)
                    Container(
                      color: Colors.red,
                      padding: const EdgeInsets.all(16.0),
                      child: Text(error.toString()),
                    )
                ],
              ),
              action: (onProgress) async {
                _fail = !_fail;
                _showMessage('loading undetermined');
                await Future.delayed(const Duration(seconds: 1));
                for (final progress in [10, 20, 30, 40, 50, 60, 70, 80, 90]) {
                  _showMessage('loaded $progress%');
                  onProgress(progress / 100);
                  await Future.delayed(const Duration(milliseconds: 200));
                }
                if (_fail) {
                  throw Exception('Loading failed');
                }
                _showMessage('loaded');
              },
              onDone: () => _showMessage('done'),
              onError: (error) => _showSnackbar('error $error'),
              onSuccess: () => _showSnackbar('success'),
            ),
            Text(_message),
            // We need this to have the DefaultActionController in the context
            Builder(
              builder: (context) => ElevatedButton(
                onPressed: () =>
                    DefaultActionController.of(context)?.add(ActionType.start),
                child: const Text('Trigger action via controller'),
              ),
            )
          ],
        ),
      );
}

使用与 reactive_forms 结合

progress_builder 还可以与 reactive_forms 结合使用，以下是示例代码：

LinearProgressBuilder(
  action: (_) async {
    // your action
  },
  onError: (e) {
   // handle your exceptions here
  },
  onSuccess: () {
    // do something
  },
  builder: (context, action, error) =>
      ElevatedButton(
        onPressed: (ReactiveForm.of(context)?.valid ?? false) ? action : null,
        child: const Text('...your action text'),
      ),
);