Flutter网络日志记录插件network_logger的使用

Network Logger

Network logger 是一个带有良好设计用户界面来检查网络流量日志的工具。它包括了Dio拦截器，你只需要编写2行代码就可以开始并检查流量。

📷 Screenshots

Log feed	Log details

🚀 Getting Started!

你可以通过以下3个步骤在美观的GUI中查看HTTP流量日志。

1. 安装 network_logger

请参考此指南将 network_logger 安装到你的Flutter项目中。

2. 添加 DioNetworkLogger 拦截器到 dio 客户端

network_logger 包含了一个Dio拦截器，可以拦截来自Dio客户端的流量。其他包的实现即将推出。

var dio = Dio();
dio.interceptors.add(DioNetworkLogger());

3. 将 network logger overlay 按钮附加到 UI

访问 Network Logger UI 的最简单方法是使用 NetworkLoggerOverlay ，它将在所有屏幕上显示浮动操作按钮。你也可以通过不同的动作实现自定义场景以打开UI。

@Override
void initState() {
  NetworkLoggerOverlay.attachTo(context);
  super.initState();
}

示例demo

下面是一个完整的示例代码，展示了如何在Flutter应用中使用 network_logger 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Logger',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final client = Dio();

  @override
  void initState() {
    super.initState();
    NetworkLoggerOverlay.attachTo(context);
    client.interceptors.add(DioNetworkLogger());
  }

  void example1() {
    client.get('https://flutter.dev/');
  }

  void example2() {
    client.get('https://jsonplaceholder.typicode.com/todos');
  }

  void example3() {
    client.delete('https://google.com/some-resource');
  }

  void example4() {
    client.post(
      'https://run.mocky.io/v3/c80877c3-8d4a-477b-9c45-a1441c34a6b6',
      data: <String, dynamic>{
        'products': 5,
        'foo': 'bar',
        'hello': [
          'world',
          'dunya',
        ]
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Logger'),
      ),
      body: ListView(
        children: [
          ListTile(
            title: Text('Example 1'),
            subtitle: Text('Flutter website'),
            onTap: example1,
          ),
          ListTile(
            title: Text('Example 2'),
            subtitle: Text('Json placeholder'),
            onTap: example2,
          ),
          ListTile(
            title: Text('Example 3'),
            subtitle: Text('404 or something else'),
            onTap: example3,
          ),
          ListTile(
            title: Text('Example 4'),
            subtitle: Text('Mock api'),
            onTap: example4,
          ),
        ],
      ),
    );
  }
}

这个例子创建了一个简单的Flutter应用程序，其中包含四个列表项，每个列表项都会触发一个网络请求，并且这些请求的日志信息会被 network_logger 捕获并在界面上展示。