Flutter业务逻辑管理插件ispectify_bloc的使用

概述

ISpect 是一个灵感来源于网页检查器的简单而多功能的库，专为移动应用开发设计。它有一个额外的包用于日志记录和处理 BLoC。

ISpect 是一个简单的库，旨在帮助移动应用调试。它具有多种功能，包括日志记录和处理 BLoC。

## 功能

- 可拖拽面板用于路由到 ISpect 页面并管理检查工具。
- 支持本地化：ru、en、kk（未来会添加更多语言）。
- ISpectify 日志记录实现：BLoC、Dio、http、Routing、Provider。
- 在初始化 ISpect 时可以自定义更多选项，如 BLoC、Dispatcher 错误等。
- 更新后的 ISpect 页面：添加了更多选项。
  - 详细的 HTTP 日志：请求、响应、错误。
  - 调试工具。
  - 缓存管理器。
  - 设备和应用信息（通过 `ispect_device` 包获取）。
- 反馈构建器。
- 性能跟踪器。
- AI 辅助。

## 展示图

![ISpect 面板](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/panel.png?raw=true)
![可拖拽面板](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/draggable.png?raw=true)
![颜色选择器](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/color_picker.png?raw=true)
![反馈界面](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/feedback.png?raw=true)
![日志记录](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/logs.png?raw=true)
![监控](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/monitoring.png?raw=true)
![缓存管理](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/cache.png?raw=true)
![设备信息](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/device_info.png?raw=true)
![信息](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/info.png?raw=true)
![检查器](https://github.com/yelmuratoff/packages_assets/blob/main/assets/ispect/inspector.png?raw=true)

## 开始使用

### 步骤一：安装依赖

在 `pubspec.yaml` 文件中添加以下依赖：

```yaml
dependencies:
  ispectify_bloc: ^x.x.x

步骤二：初始化 ISpect

void main() async {
  Bloc.observer = ISpectifyBlocObserver(
    settings: const ISpectifyBlocSettings(
      printEventFullData: false,
      printStateFullData: false,
    ),
  );

  runApp(
    ISpect.run(
      iSpectify: ISpectify(),
      child: MyApp(),
    ),
  );
}

步骤三：配置 ISpect

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return ISpectScopeWrapper(
      iSpectify: ISpectify(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        localizationsDelegates: ISpectLocalizations.localizationDelegates([
          ExampleGeneratedLocalization.delegate, // Your localization delegate
        ]),
        home: MyHomePage(),
        navigatorObservers: [
          ISpectBuilder(),
        ],
      ),
    );
  }
}

步骤四：添加 ISpectifyBlocObserver

onInit: (iSpectify) {
  Bloc.observer = ISpectifyBlocObserver(
    iSpectify: iSpectify,
  );
},

示例代码

以下是一个完整的示例代码，展示了如何使用 ispectify_bloc 插件来管理业务逻辑。

// 忽略无法从主函数访问的文件

import 'package:bloc/bloc.dart';
import 'package:ispectify_bloc/ispectify_bloc.dart';

void main() async {
  Bloc.observer = ISpectifyBlocObserver(
    settings: const ISpectifyBlocSettings(
      printEventFullData: false,
      printStateFullData: false,
    ),
  );
  final somethingBloc = SomethingBloc()
    ..add(const LoadSomething(LoadSomethingCase.successful));
  await Future<void>.delayed(const Duration(milliseconds: 300));
  somethingBloc.add(const LoadSomething(LoadSomethingCase.failure));
}

enum LoadSomethingCase { successful, failure }

class SomethingBloc extends Bloc<SomethingEvent, SomethingState> {
  SomethingBloc() : super(SomethingInitial()) {
    on<LoadSomething>((event, emit) {
      emit(SomethingLoading());
      if (event.loadCase == LoadSomethingCase.successful) {
        emit(SomethingLoaded());
        return;
      }
      throw Exception('Load something failure');
    });
  }
}

abstract class SomethingEvent {
  const SomethingEvent();
}

class LoadSomething extends SomethingEvent {
  const LoadSomething(this.loadCase);

  final LoadSomethingCase loadCase;
}

abstract class SomethingState {}

class SomethingInitial extends SomethingState {}

class SomethingLoading extends SomethingState {}

class SomethingLoaded extends SomethingState {}

class SomethingLoadingFailure extends SomethingState {
  SomethingLoadingFailure(this.error);
  final Object? error;
}