Flutter错误通知插件error_notifier_for_provider的使用

Flutter错误通知插件error_notifier_for_provider的使用

error_notifier_for_provider 是一个用于在 ChangeNotifier/ValueNotifier/StateNotifier 中通知错误的小技巧。它不再需要使用 GlobalKey<Scaffold>。

Provider(
  create: (_) => YourObjectWithErrorNotifierMixin(),
  child: Scaffold(
    body: ErrorListener(
      onNotify: (context, message) => Scaffold.of(context).showSnackBar(
        SnackBar(content: Text(message))
      ),
      child: YourContent(),
    ),
  ),
);

优点

• 易于使用。
• 可以与 ChangeNotifier/ValueNotifier/StateNotifier 和任何其他提供对象一起使用。

动机

ChangeNotifier/ValueNotifier/StateNotifier 可以通知并反映其状态到其他对象，但它们主要用于UI更新，而不是一次性通知，例如错误通知。

error_notifier_for_provider 提供了另一种路径来通知某些事件。

完整示例Demo

以下是一个完整的示例，展示了如何使用 error_notifier_for_provider 插件：

import 'package:error_notifier_for_provider/error_notifier_for_provider.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePageNotifier extends ChangeNotifier with ErrorNotifierMixin {
  bool loading = false;

  void load() async {
    try {
      loading = true;
      notifyListeners(); // 通知加载开始
      await _tryToLoadAndFail();
    } on Exception catch (e) {
      notifyError(e.toString()); // 通知错误信息
    } finally {
      loading = false;
      notifyListeners(); // 通知加载结束
    }
  }

  Future<void> _tryToLoadAndFail() {
    return Future.delayed(
      Duration(seconds: 2),
      () => throw Exception("Error occurs!!!"), // 模拟加载失败
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => MyHomePageNotifier(),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Error Notifier for Provider Example"),
        ),
        body: ErrorListener<MyHomePageNotifier>(
          onNotify: (context, message) {
            Scaffold.of(context).showSnackBar(SnackBar(
              content: Text(message),
              action: SnackBarAction(
                label: "RETRY",
                onPressed: () {
                  context.read<MyHomePageNotifier>().load(); // 重新加载
                },
              ),
            ));
          },
          child: Center(
            child: Selector<MyHomePageNotifier, bool>(
              selector: (context, notifier) => notifier.loading,
              builder: (context, loading, _) {
                if (loading) {
                  return CircularProgressIndicator(); // 显示加载指示器
                } else {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      RaisedButton(
                        child: Text("LOAD"),
                        onPressed: () {
                          context.read<MyHomePageNotifier>().load(); // 开始加载
                        },
                      ),
                      Text("Loading will fail after 2 seconds 😢"), // 提示加载将在2秒后失败
                    ],
                  );
                }
              },
            ),
          ),
        ),
      ),
    );
  }
}