Flutter人工智能识别插件ispect_ai的使用

一个用于移动应用调试的便捷工具箱 🚀

ISpect 是一个灵感来自网页检查器的简单而多功能的库，专为移动应用开发设计。 这是一个附加包，用于使用 Gemini AI API 生成 `报告` 和 `日志` 问题。
给予一些❤️并 给仓库加星 以支持该项目！

包 #

ISpect 可以通过其他部分扩展。

包	版本	描述
ispect		主 包
ispect_ai		这是一个附加包，用于使用 Gemini AI API 生成 `报告` 和 `日志` 问题。
ispect_jira		这是一个附加包，用于使用 Jira Atlassian API 立即通过 `反馈` 创建问题单。
ispect_device		这是一个附加包，用于使用工具查看平台和设备信息。
ispectify		这是一个附加包，用于日志记录和处理。基于 Talker。
ispectify_bloc		这是一个附加包，用于日志记录和处理 BLoC。
ispectify_dio		这是一个附加包，用于日志记录和处理 Dio。
ispectify_http		这是一个附加包，用于日志记录和处理 http。

📌 特性 #

• ✅ 可拖动面板，可导航到 ISpect 页面并管理检查器工具。 您也可以单独使用它： https://pub.dev/packages/draggable_panel
• ✅ 支持本地化：ru, en, kk。 (未来会添加更多翻译。)
• ✅ ISpectify 日志记录实现： BLoC、Dio、http、路由、Provider
• ✅ 您可以在初始化 ISpect 时自定义更多选项，如 BLoC、调度器错误等。
• ✅ 更新后的 ISpect 页面：添加了更多选项。
  • 详细的 HTTP 日志： 请求、响应、错误
  • 调试工具
  • 缓存管理器
  • 设备和应用信息 (ispect_device)
• ✅ 反馈构建器来自 pub.dev/feedback
• ✅ 性能跟踪器
• ✅ AI 辅助工具

📜 展示 #

易于使用 #

简单的 ISpect 使用示例。
您可以使用 ISpect.read(context) 来管理 ISpect。 将此代码放在您的项目中的任意屏幕，并了解其工作原理。 😊

使用说明： #

1. 用 ISpect.run 方法包装 runApp 并传递 ISpectify 实例。
2. 在 MaterialApp 中初始化 ISpectGoogleAi 并传递 Google AI 令牌。 例如，从 .env 文件或环境变量中获取。

ISpectGoogleAi.init('token');

1. 在 ISpectOptions 的 actionItems 中添加相应的操作按钮。 例如：

actionItems: [
          ISpectifyActionItem(
            title: 'AI Chat',
            icon: Icons.bubble_chart,
            onTap: (context) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const AiChatPage(),
                ),
              );
            },
          ),
          ISpectifyActionItem(
            title: 'AI Reporter',
            icon: Icons.report_rounded,
            onTap: (context) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const AiReporterPage(),
                ),
              );
            },
          ),
        ],

1. 在 MaterialApp 的 localizationsDelegates 中添加 ISpectAILocalization。

localizationsDelegates: ISpectLocalizations.localizationDelegates([
          ExampleGeneratedLocalization.delegate, // 您的本地化代理
          ISpectAILocalization.delegate, // ISpect AI 本地化代理
        ]),

1. 使用 ISpectScopeWrapper 小部件包裹您的根小部件，以启用 ISpect，您可以在其中传递主题和选项。
2. 在您的 Material App 的 builder 中添加 ISpectBuilder 小部件，并放入 NavigatorObserver。

请参阅 example 获取更多详细信息。

对于路由处理 (GoRouter) #

您可以使用 ISpectNavigatorObserver，但在实践中它并不总是与 GoRouter 包正确配合工作。您需要在每个 GoRoute 中添加观察者。 或者，您可以使用 listener：

_router.routerDelegate.addListener(() {
  final String location = _router.routerDelegate.currentConfiguration.last.matchedLocation;
  ISpect.route(location);
});

引用的包： #

我在 ISpect 中使用的优秀包列表： path_provider, device_info_plus, share_plus, package_info_plus, gap, auto_size_text, feedback, inspector, performance, cr_json_widget。

感谢所有为这个包做出贡献的人

示例代码

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:ispect/ispect.dart';
import 'package:ispect_ai/ispect_ai.dart';
import 'package:ispect_example/src/core/localization/generated/app_localizations.dart';
import 'package:ispect_example/theme_manager.dart';
import 'package:ispectify_dio/dio_logger_interceptor.dart';

// Dio 实例
final dio = Dio(
  BaseOptions(
    baseUrl: 'https://jsonplaceholder.typicode.com',
  ),
);

void main() {
  final iSpectify = ISpectifyFlutter.init();

  ISpect.run(
    () => runApp(
      ThemeProvider(
        child: App(iSpectify: iSpectify),
      ),
    ),
    iSpectify: iSpectify,
    isPrintLoggingEnabled: true,
    onInitialized: () {
      dio.interceptors.add(
        ISpectifyDioLogger(
          iSpectify: ISpect.iSpectify,
        ),
      );
    },
  );
}

class App extends StatefulWidget {
  final ISpectify iSpectify;
  const App({super.key, required this.iSpectify});

  [@override](/user/override)
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  [@override](/user/override)
  void initState() {
    super.initState();
    ISpectGoogleAi.init('token');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    const locale = Locale('en');
    final observer = ISpectNavigatorObserver();

    final themeMode = ThemeProvider.themeMode(context);

    return ISpectScopeWrapper(
      options: ISpectOptions(
        locale: locale,
        actionItems: [
          ISpectifyActionItem(
            title: 'AI Chat',
            icon: Icons.bubble_chart,
            onTap: (context) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const AiChatPage(),
                ),
              );
            },
          ),
          ISpectifyActionItem(
            title: 'AI Reporter',
            icon: Icons.report_rounded,
            onTap: (context) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => const AiReporterPage(),
                ),
              );
            },
          ),
        ],
      ),
      isISpectEnabled: true,
      child: MaterialApp(
        navigatorObservers: [observer],
        locale: locale,
        supportedLocales: ExampleGeneratedLocalization.supportedLocales,
        localizationsDelegates: ISpectLocalizations.localizationDelegates([
          ExampleGeneratedLocalization.delegate,
          ISpectAILocalization.delegate,
        ]),
        theme: ThemeData.from(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.blue,
            brightness: Brightness.light,
          ),
        ),
        darkTheme: ThemeData.from(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.blue,
            brightness: Brightness.dark,
          ),
        ),
        themeMode: themeMode,
        builder: (context, child) {
          child = ISpectBuilder(
            observer: observer,
            initialPosition: (x: 0, y: 200),
            onPositionChanged: (x, y) {
              debugPrint('x: $x, y: $y');
            },
            child: child,
          );
          return child;
        },
        home: const _Home(),
      ),
    );
  }
}

class _Home extends StatelessWidget {
  const _Home();

  [@override](/user/override)
  Widget build(BuildContext context) {
    final themeMode = ThemeProvider.themeMode(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(ExampleGeneratedLocalization.of(context)!.app_title),
        actions: [
          IconButton(
            icon: Icon(
              themeMode == ThemeMode.dark ? Icons.dark_mode : Icons.light_mode,
            ),
            onPressed: () {
              ThemeProvider.toggleTheme(context);
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                dio.get('/posts/1');
              },
              child: const Text('发送 HTTP 请求'),
            ),
            ElevatedButton(
              onPressed: () {
                dio.get('/post3s/1');
              },
              child: const Text('发送带错误的 HTTP 请求'),
            ),
            ElevatedButton(
              onPressed: () {
                dio.options.headers.addAll({
                  'Authorization': 'Bearer token',
                });
                dio.get('/posts/1');
                dio.options.headers.remove('Authorization');
              },
              child: const Text('发送带有 Token 的 HTTP 请求'),
            ),
          ],
        ),
      ),
    );
  }
}