Flutter网络日志打印插件flutter_pretty_dio_logger的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter网络日志打印插件flutter_pretty_dio_logger的使用

flutter_pretty_dio_logger 是一个用于Flutter应用程序中Dio HTTP客户端的日志记录插件。它可以帮助开发者以正确的JSON格式显示请求和响应，提供cUrl格式的命令行代码，便于复制和使用，极大地提高了开发和调试效率。

使用方法

1. 添加依赖

首先，在项目的pubspec.yaml文件中添加flutter_pretty_dio_logger依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^5.0.0 # 根据需要选择版本
  flutter_pretty_dio_logger: ^1.2.0 # 确保是最新版本

然后执行flutter pub get来安装依赖。

2. 导入库并配置Dio

在你的Dart代码中导入必要的库，并配置Dio实例以添加PrettyDioLogger拦截器：

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

void main() async {
  final Dio dio = Dio();

  // 设置基础URL（可选）
  dio.options.baseUrl = 'https://api.example.com';

  // 添加PrettyDioLogger拦截器
  dio.interceptors.add(
    PrettyDioLogger(
      requestHeader: true,        // 打印请求头
      queryParameters: true,      // 打印查询参数
      requestBody: true,         // 打印请求体
      responseHeader: true,      // 打印响应头
      responseBody: true,        // 打印响应体
      error: true,               // 打印错误信息
      showProcessingTime: true,  // 显示处理时间
      showCUrl: true,            // 显示cUrl命令
      // canShowLog: kDebugMode,   // 可根据构建模式控制是否打印日志
    ),
  );

  // 发起GET请求
  try {
    final response = await dio.get('/world/total');
    print('Response data: ${response.data}');
  } catch (e) {
    print('Error: $e');
  }
}

3. 日志输出样式

通过flutter_pretty_dio_logger，你可以获得如下图所示的日志输出效果：

  • cUrl Example：展示如何将HTTP请求转换为cUrl命令，方便在命令行工具中直接测试API。

    cUrl Example

  • Response Example：清晰地展示了HTTP响应的内容，包括状态码、头部信息以及响应体等。

    Response Example

注意事项

  • logPrint默认值为print，在调试模式下有效。如果你希望在发布模式下也能看到日志输出，请确保正确设置了canShowLog属性或调整了logPrint函数的行为。
  • 该插件受到pretty_dio_logger和curl_logger_dio_interceptor包的启发，感谢原作者的贡献！

以上就是flutter_pretty_dio_logger的基本使用教程，希望能帮助到正在使用Flutter进行网络开发的你！如果有任何问题或建议，欢迎随时交流。


更多关于Flutter网络日志打印插件flutter_pretty_dio_logger的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter网络日志打印插件flutter_pretty_dio_logger的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用flutter_pretty_dio_logger插件来进行网络日志打印的示例代码。这个插件可以帮助你更好地调试HTTP请求和响应。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_pretty_dio_logger和dio的依赖：

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0  # 确保使用的是兼容版本
  flutter_pretty_dio_logger: ^1.0.0  # 确保使用的是兼容版本

然后运行flutter pub get来安装依赖。

2. 配置Dio和FlutterPrettyDioLogger

接下来，在你的Dart文件中（例如main.dart或者一个专门的网络服务文件），配置Dio实例并使用FlutterPrettyDioLogger进行日志打印。

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter_pretty_dio_logger/flutter_pretty_dio_logger.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Pretty Dio Logger Demo'),
        ),
        body: Center(
          child: NetworkRequestDemo(),
        ),
      ),
    );
  }
}

class NetworkRequestDemo extends StatefulWidget {
  @override
  _NetworkRequestDemoState createState() => _NetworkRequestDemoState();
}

class _NetworkRequestDemoState extends State<NetworkRequestDemo> {
  final Dio _dio = Dio();

  @override
  void initState() {
    super.initState();
    setupDio();
  }

  void setupDio() {
    // 配置 Dio 实例
    BaseOptions options = BaseOptions(
      baseUrl: 'https://jsonplaceholder.typicode.com/',
      connectTimeout: 5000,
      receiveTimeout: 3000,
    );

    // 使用 FlutterPrettyDioLogger
    _dio.options = options;
    _dio.interceptors.add(
      FlutterPrettyDioLogger(
        requestHeader: true,
        requestBody: true,
        responseBody: true,
        responseHeader: false,
        compact: false,
        logLevel: LogLevel.BODY, // 你可以根据需要调整日志级别
        colors: true, // 彩色输出日志（仅在支持ANSI颜色的终端有效）
        prettyPrint: true, // 格式化输出
      ),
    );
  }

  void fetchData() async {
    try {
      Response response = await _dio.get('/posts/1');
      print('Response Data: ${response.data}');
    } catch (e) {
      print('Error: ${e.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: fetchData,
      child: Text('Fetch Data'),
    );
  }
}

3. 运行应用

现在你可以运行你的Flutter应用，并点击按钮来触发网络请求。你应该能够在控制台中看到格式化的网络请求和响应日志。

日志输出示例

以下是一个可能的日志输出示例，展示了请求和响应的详细信息：

🔥 Dio - Request
🔥 🔍 Method: GET
🔥 📡 URL: https://jsonplaceholder.typicode.com/posts/1
🔥 🔀 Headers: 
  content-type: application/json
  accept: application/json
🔥 📝 Body: (empty)

🔥 Dio - Response
🔥 📡 Status Code: 200
🔥 🔀 Headers: 
  content-type: application/json; charset=utf-8
  content-length: 841
  connection: keep-alive
  date: Tue, 14 Feb 2023 10:00:00 GMT
  cache-control: public, max-age=14400
  etag: "1676390400"
  cf-cache-status: HIT
  ...
🔥 📝 Body: 
{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

通过这种方式，你可以轻松地调试和分析你的网络请求和响应。

回到顶部