Flutter状态管理监控插件flutter_bloc_monitor的使用

Flutter状态管理监控插件flutter_bloc_monitor的使用

一个用于监控所有BloC活动的包。你可以监控添加的事件顺序，查看发生的所有转换和抛出的错误。

基本用法

该包使用起来非常简单。只需创建一个FlutterBlocMonitorDelegate并将其传递给BlocSupervisor。

void main() {
  BlocSupervisor.delegate = FlutterBlocMonitorDelegate();
  runApp(MyApp());
}

通过这样做，你的所有BloC将开始被跟踪。

此包通过静态变量公开所有操作、转换和错误，因此你可以在任何地方使用它们。

FlutterBlocMonitorDelegate.events
FlutterBlocMonitorDelegate.transitions
FlutterBlocMonitorDelegate.errors

如果你想以更友好的方式查看此类信息，可以导航到一个显示这些信息的页面。为此只需执行以下代码：

Navigator.of(context).push(
      MaterialPageRoute(
        builder: (_) => FlutterBlocMonitorPage(),
      ),
    );

高级用法

如果你希望在事件、转换和错误发生时进行自己的处理，可以通过onEventFunc、onTransitionFunc和onErrorFunc参数传递回调函数。

void main() {
  BlocSupervisor.delegate = FlutterBlocMonitorDelegate(
    onEventFunc: (bloc, event) => print(event),
    onTransitionFunc: (bloc, transition) => print(transition),
    onErrorFunc: (bloc, error, stacktrace) => print(error),
  );
  runApp(MyApp());
}

待办事项

• ❌ 测试

特性与问题

请在问题追踪器上建议新功能和报告问题。

示例代码

以下是完整的示例代码，展示了如何使用flutter_bloc_monitor插件。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_bloc_monitor/flutter_bloc_monitor.dart';

import 'bloc/blocs.dart';
import 'bloc/red/red_bloc.dart';

void main() {
  // 设置Bloc观察者为FlutterBlocMonitorDelegate，并提供回调函数
  Bloc.observer = FlutterBlocMonitorDelegate(
    onEventFunc: (bloc, event) => print(event),
    onTransitionFunc: (bloc, transition) => print(transition),
    onErrorFunc: (bloc, error, stacktrace) => print(error),
  );
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MultiBlocProvider(
          providers: [
            // 提供多个Bloc实例
            BlocProvider<RedBloc>(
              create: (_) => RedBloc(),
            ),
            BlocProvider<BlueBloc>(
              create: (_) => BlueBloc(),
            ),
            BlocProvider<GreenBloc>(
              create: (_) => GreenBloc(),
            ),
          ],
          child: SampleWidget(),
        ),
      ),
    );
  }
}

class SampleWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // 使用BlocBuilder构建带有Bloc状态的UI组件
            BlocBuilder<RedBloc, RedState>(
              builder: (_, state) => Container(
                height: 100,
                child: Center(
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                        Colors.red,
                      ),
                    ),
                    child: Text(
                      'Add RedBloc Event',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onPressed: () => context.read<RedBloc>().add(RedEvent1()),
                  ),
                ),
              ),
            ),
            BlocBuilder<BlueBloc, BlueState>(
              builder: (_, state) => Container(
                height: 100,
                child: Center(
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                        Colors.blue,
                      ),
                    ),
                    child: Text(
                      'Add BlueBloc Event',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onPressed: () => context.read<BlueBloc>().add(BlueEvent1()),
                  ),
                ),
              ),
            ),
            BlocBuilder<GreenBloc, GreenState>(
              builder: (_, state) => Container(
                height: 100,
                child: Center(
                  child: ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all<Color>(
                        Colors.green,
                      ),
                    ),
                    child: Text(
                      'Add GreenBloc Event',
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                    onPressed: () => context.read<GreenBloc>().add(GreenEvent1()),
                  ),
                ),
              ),
            ),
            SizedBox(height: 30),
            // 导航到Bloc监控页面
            Container(
              height: 100,
              child: ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(
                    Theme.of(context).primaryColor,
                  ),
                ),
                child: Text('See Bloc Monitor Page'),
                onPressed: () => Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (_) => FlutterBlocMonitorPage(),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}