Flutter网络调试插件network_inspector的使用

Flutter网络调试插件network_inspector的使用

1. 整理后的内容中尽量给我提供关于“Flutter网络调试插件network_inspector的使用”的完整示例demo

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

import 'common/navigation_service.dart';
import 'common/notification_helper.dart';
import 'presentation/controllers/main_provider.dart';
import 'presentation/pages/main_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NetworkInspector.initialize();
  NotificationHelper.initialize();
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<MainProvider>(
      create: (context) => MainProvider(context: context),
      builder: (context, child) => MaterialApp(
        title: 'Network inspector',
        theme: ThemeData(
          brightness: Brightness.light,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.deepPurple),
            ),
          ),
        ),
        darkTheme: ThemeData(
          brightness: Brightness.dark,
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(
                Colors.black.withAlpha((0.3 * 2).round()),
              ),
            ),
          ),
        ),
        themeMode: ThemeMode.dark,
        navigatorKey: NavigationService.navigatorKey,
        initialRoute: MainPage.routeName,
        routes: NavigationService.routes,
      ),
    );
  }
}

2. 参考我提供的内容和示例代回答“Flutter网络调试插件network_inspector的使用”对应的内容

Easy to use, http client class debugger & logger for multiple http client.

这个包包含了一组高级函数和类，使您能够轻松地在运行时日志/调试HTTP活动。它还依赖于Dio和Http包。

Material 3 & Dark mode support 🆕

现在您可以使用您最喜欢的Material 3主题和暗模式，从版本1.0.4开始。

Get Started

添加依赖项：

dependencies:
  network_inspector: ^1.0.0

Initialize

初始化网络检查器，调用initialize方法来初始化本地数据库sqlite。确保在初始化网络检查器之前WidgetsFlutterBinding.ensureInitialized()已经初始化了flutter binding。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  NetworkInspector.initialize();
  runApp(const ExampleApp());
}

Dio Users

1. 添加拦截器类DioInterceptor用于dio客户端。
2. 创建另一个网络检查器类用于DioInterceptor构造函数。
3. 使用onHttpFinish作为回调当http活动完成（可以是成功或错误）。

/// Client Declaration
Dio get dioClient {
  final networkInspector = NewtworkInspector();
  final client = Dio()..interceptors.add(
    DioInterceptor(
      logIsAllowed: true, //启用/禁用整体日志记录
      isConsoleLogAllowed: true, //启用/禁用仅控制台日志记录
      networkInspector: networkInspector,
      onHttpFinish: (hashCode, title, message) {
        notifyActivity(
          title: title,
          message: message,
        );
      },
    ),
  );
  return client;
}

/// Use dio regularly
/// Every request, response & error will automatically fetched & stored by the network inspector.
/// And also if the properties of declared `DioInterceptor` is not empty, it will set every properties as default.
await dioClient.post('/test', data: {'id': 1, 'name': 'jhon folks'});

Http Users

1. 添加拦截器类HttpInterceptor用于dio客户端。
2. 初始化Client到客户端类，然后在HttpInterceptor构造函数中使用client。
3. 创建另一个网络检查器类用于DioInterceptor构造函数。
4. 使用onHttpFinish作为回调当http活动完成（可以是成功或错误）。

HttpInterceptor get httpClient {
  final networkInspector = NewtworkInspector();
  final client = Client();
  final interceptor = HttpInterceptor(
    logIsAllowed: true, //启用/禁用整体日志记录
    isConsoleLogAllowed: true, //启用/禁用仅控制台日志记录
    client: client,
    baseUrl: Uri.parse('http://192.168.1.3:8000/'),
    networkInspector: networkInspector,
    onHttpFinish: ( hashCode, title, message {
      notifyActivity(
        title: title,
        message: message,
      );
    },
    headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json',
      'Authorization': 'Bearer WEKLSSS'
    },
  );
  return interceptor;
}
/// Use http client regularly
/// Every request, response & error will automatically fetched & stored by the network inspector.
/// And also if the properties of declared `HttpInterceptor` is not empty, it will set every properties as default.
await httpClient.post(url, body: {'name': 'doodle', 'color': 'blue'});

Acessing the UI

我们可以使用常规的Navigator.push，我们决定使用MaterialPageRoute而不是命名路由以避免紧密耦合。

/// Use this on floating button / notification handler.
void goToActivityPage(BuildContext context) async {
  await Navigator.push(
    context,
    MaterialPageRoute<void>(
      builder: (context) => ActivityPage(),
    ),
  );
}

Entry point from notification tap action

如果希望从通知点击动作进入http活动页面，则创建一个存储GlobalKey<NavigatorState>的类，将全局键放入MaterialApp中的navigatorKey构造函数上。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Network inspector',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    /// Put your navigation key into a class
    /// In this case we put navigator key on
    /// ```dart
    /// class NavigationService{
    ///   static var navigatorKey = GlobalKey<NavigatorState>();
    /// }
    /// ```
    navigatorKey: NavigationService.navigatorKey,
    initialRoute: MainPage.routeName,
    routes: NavigationService.routes,
  );
}

然后您可以使用全局键获取上下文并调用goToActivityPage方法并传递上下文。

/// Get the current context
var context = NavigationService.navigatorKey.currentContext;
/// Call the `goToActivityPage` method and Supply the context
goToActivityPage(context);