Flutter日志查看与分析插件 chucker_flutter 的使用

chucker_flutter 是一个用于检查和分析Flutter应用程序中的HTTP(S)请求和响应的插件。它作为一个拦截器工作，将网络请求和响应的数据存储在本地存储中，并提供了一个用户界面来查看和分享这些内容。

安装步骤

添加依赖项

首先，在你的 pubspec.yaml 文件中添加 chucker_flutter 作为依赖项：

dependencies:
  chucker_flutter: latest-version

或者直接运行以下命令：

flutter pub add chucker_flutter

确保你使用的版本是最新的以享受最新的功能。

配置Dio

如果你想让 chucker_flutter 在 Dio 中工作，只需将其添加到你的 Dio 对象中：

import 'package:chucker_flutter/chucker_flutter.dart';
import 'package:dio/dio.dart';

final dio = Dio();
dio.interceptors.add(ChuckerDioInterceptor());

配置Http

如果你使用的是 http 包，则需要使用 ChuckerHttpClient 对象：

import 'package:chucker_flutter/chucker_flutter.dart';
import 'package:http/http.dart' as http;

final _chuckerHttpClient = ChuckerHttpClient(http.Client());
_chuckerHttpClient.get(Uri.parse('$_baseUrl$path'));

配置Chopper

对于 Chopper，你需要使用 ChuckerChopperInterceptor 对象：

import 'package:chucker_flutter/chucker_flutter.dart';
import 'package:chopper/chopper.dart';

final client = ChopperClient(
  baseUrl: 'https://jsonplaceholder.typicode.com',
  interceptors: [
    ChuckerChopperInterceptor(),
  ],
);

连接Chucker Flutter屏幕到你的应用

最后一步是通过添加 ChuckerFlutter.navigatorObserver 到你的 MaterialApp 来连接 Chucker Flutter 屏幕：

import 'package:flutter/material.dart';
import 'package:chucker_flutter/chucker_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorObservers: [ChuckerFlutter.navigatorObserver],
      // 其他配置...
    );
  }
}

在Release模式下启用Chucker

默认情况下，Chucker只在调试模式下运行。如果需要在发布模式下也启用它，可以设置 showOnRelease 属性为 true：

void main() {
  ChuckerFlutter.showOnRelease = true;
  runApp(MyApp());
}

示例代码

下面是一个完整的示例，展示了如何在不同的HTTP客户端（如Dio、Http和Chopper）中集成 chucker_flutter：

import 'dart:convert';
import 'package:chucker_flutter/chucker_flutter.dart';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  ChuckerFlutter.showOnRelease = true;
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      navigatorObservers: [ChuckerFlutter.navigatorObserver],
      theme: ThemeData(
        appBarTheme: const AppBarTheme(color: Color(0xFF13B9FF)),
        colorScheme: ColorScheme.fromSwatch(
          accentColor: const Color(0xFF13B9FF),
        ),
      ),
      home: const TodoPage(),
    );
  }
}

class TodoPage extends StatefulWidget {
  const TodoPage({Key? key}) : super(key: key);

  @override
  State<TodoPage> createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  final _baseUrl = 'https://jsonplaceholder.typicode.com';
  var _clientType = _Client.http;

  late final _dio = Dio(
    BaseOptions(
      sendTimeout: const Duration(seconds: 30),
      connectTimeout: const Duration(seconds: 30),
      receiveTimeout: const Duration(seconds: 30),
      headers: {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
      },
    ),
  );

  final _chuckerHttpClient = ChuckerHttpClient(http.Client());

  @override
  void initState() {
    super.initState();
    _dio.interceptors.add(ChuckerDioInterceptor());
  }

  Future<void> get({bool error = false}) async {
    try {
      final path = '/post${error ? 'temp' : ''}s/1';

      switch (_clientType) {
        case _Client.dio:
          await _dio.get('$_baseUrl$path');
          break;
        case _Client.http:
          await _chuckerHttpClient.get(Uri.parse('$_baseUrl$path'));
          break;
      }
    } catch (e) {
      debugPrint(e.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Chucker Flutter Example'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            ElevatedButton(
              onPressed: get,
              child: const Text('GET'),
            ),
            const SizedBox(height: 16),
            ChuckerFlutter.chuckerButton,
          ],
        ),
      ),
    );
  }
}

enum _Client {
  dio,
  http,
}

以上代码展示了如何在Dio和Http中集成 chucker_flutter 插件，并且提供了基本的操作按钮来测试GET请求。你可以根据自己的需求扩展这个示例。