Flutter网络日志记录插件flutter_socket_log

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

简介

使用socket将Flutter应用程序的日志发送到远程。为了连接到远程应用，您需要在同一个局域网内。测试者可以在客户端应用中查看所有日志。

客户端应用源码可以在这里找到。

客户端应用以查看日志

安装

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_socket_log_plugin: ^最新版本

然后运行以下命令来安装依赖：

flutter pub add flutter_socket_log_plugin

如何使用

安装客户端应用

您可以使用以下Flutter源代码为Windows、Linux、Mac、Android或iOS安装客户端应用，或者直接下载Windows和Android的应用程序：

Windows: 下载地址
Android: 下载地址

基本用法

初始化插件

在main函数中初始化插件：

void main() {
  // 条件判断是否初始化插件
  FlutterSocketLogPlugin.init(appName: 'Dummy App');
  runApp(const MyApp());
}

日志记录到远程客户端应用

使用以下代码记录日志：

FlutterSocketLogPlugin.log(
  'Write your logs', 
  DefaultLogs.debug, // 自定义日志级别
  [DefaultLogs.network], // 添加日志标签，自定义标签
);

自定义日志级别和日志标签

初始化日志级别和日志标签

List<LogLevel> logLevels = [
  FlutterSocketLogPlugin.createLogLevel(
    'Critical',
    Colors.cyan.value,
    Icons.warning.codePoint,
  ),
  FlutterSocketLogPlugin.createLogLevel(
    'Alert',
    Colors.red.value,
    Icons.error.codePoint,
  )
];

List<LogTag> logTags = [
  FlutterSocketLogPlugin.createTag(
    'Request',
    Colors.blue.value,
    Icons.network_wifi.codePoint,
  ),
  FlutterSocketLogPlugin.createTag(
    'Response',
    Colors.green.value,
    Icons.network_wifi.codePoint,
  ),
];

在初始化函数中添加自定义设置

FlutterSocketLogPlugin.init(
  appName: 'Customized App',
  logLevels: logLevels,
  logTags: logTags,
);

开始日志记录

FlutterSocketLogPlugin.log(
  'Write your logs here',
  logLevels[0],
  [
    logTags[0],
    logTags[1],
  ]
);

一旦定义了自定义方法，可以简化为如下形式：

Logger.debugNetwork('Write your log here');

日志标签和日志级别

日志标签和日志级别都是可定制的，这意味着您可以根据需要创建自己的名称、颜色和图标。这样您可以在客户端应用中获取这些信息。

示例代码

以下是完整的示例代码：

import 'dart:io';

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

void main() {
  FlutterSocketLogPlugin.init(appName: 'Dummy App');
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  TextEditingController controller = TextEditingController();
  LogLevel _logLevel = DefaultLogs.debug;
  LogTag _logTag = DefaultLogs.network;
  int counter = 1;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            const SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15),
              child: TextField(
                controller: controller,
              ),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("LogLevel: "),
                const SizedBox(width: 15),
                DropdownButton<LogLevel>(
                  value: _logLevel,
                  icon: const Icon(Icons.arrow_drop_down_outlined),
                  elevation: 16,
                  style: const TextStyle(color: Colors.deepPurple),
                  underline: Container(
                    height: 2,
                    color: Colors.deepPurpleAccent,
                  ),
                  onChanged: (LogLevel? newValue) {
                    setState(() {
                      _logLevel = newValue!;
                    });
                  },
                  items: DefaultLogs.defaultLogLevels
                      .map(
                        (e) => DropdownMenuItem<LogLevel>(
                          child: Text(e.name),
                          value: e,
                        ),
                      )
                      .toList(),
                ),
              ],
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text("LogTag: "),
                const SizedBox(width: 15),
                DropdownButton<LogTag>(
                  value: _logTag,
                  icon: const Icon(Icons.arrow_drop_down_outlined),
                  elevation: 16,
                  style: const TextStyle(color: Colors.deepPurple),
                  underline: Container(
                    height: 2,
                    color: Colors.deepPurpleAccent,
                  ),
                  onChanged: (LogTag? newValue) {
                    setState(() {
                      _logTag = newValue!;
                    });
                  },
                  items: DefaultLogs.defaultLogTags
                      .map(
                        (e) => DropdownMenuItem<LogTag>(
                          child: Text(e.name),
                          value: e,
                        ),
                      )
                      .toList(),
                ),
              ],
            ),
            const SizedBox(height: 20),
            FutureBuilder<String?>(
              initialData: 'Unknown',
              future: FlutterSocketLogPlugin.wifiIp,
              builder: (context, data) {
                return Text('Your IP address: ${data.data ?? 'Not Found'}');
              },
            ),
            const SizedBox(height: 20),
            StreamBuilder<Socket?>(
              stream: FlutterSocketLogPlugin.clientStream,
              builder: (c, s) {
                return Text('Socket connected to : ${s.data?.remoteAddress.address}');
              },
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                FlutterSocketLogPlugin.log(
                  controller.text,
                  _logLevel,
                  [_logTag],
                );
              },
              child: const Text('Remote Log'),
            ),
            const SizedBox(height: 20),
            Text('$counter'),
            const SizedBox(height: 5),
            ElevatedButton(
              onPressed: () {
                FlutterSocketLogPlugin.log(
                  counter.toString(),
                  DefaultLogs.debug,
                  [DefaultLogs.network],
                );
                counter++;
                setState(() {});
              },
              child: const Text('Send Counter'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                for (int i = 0; i < 100; i++) {
                  FlutterSocketLogPlugin.log(
                    i.toString(),
                    DefaultLogs.debug,
                    [DefaultLogs.network],
                  );
                }
              },
              child: const Text('Send bulk messages from 1 to 100'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                FlutterSocketLogPlugin.restart();
              },
              child: const Text('Restart'),
            ),
          ],
        ),
      ),
    );
  }
}

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

h691938207 1楼

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

当然，下面是一个关于如何使用 flutter_socket_log_plugin 插件来记录 Flutter 应用中的网络日志的示例代码。请注意，由于这个插件可能不是官方或广泛认可的插件，具体的实现细节和API可能会有所不同。以下代码示例假设插件的基本功能是按照常见的网络日志记录插件的常规用法来实现的。

首先，确保你的 pubspec.yaml 文件中包含了 flutter_socket_log_plugin 的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_socket_log_plugin: ^x.y.z  # 请替换为实际的版本号

然后，运行 flutter pub get 来获取依赖。

接下来，在你的 Flutter 应用中实现网络日志的记录。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_socket_log_plugin/flutter_socket_log_plugin.dart'; // 假设插件的导入路径是这样的

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 初始化插件（如果有初始化方法的话）
  FlutterSocketLogPlugin.instance.init();

  // 设置全局拦截器（假设插件支持这种用法）
  FlutterSocketLogPlugin.instance.setGlobalInterceptor((request, response) {
    // 记录请求日志
    print('Request URL: ${request.url}');
    print('Request Method: ${request.method}');
    print('Request Headers: ${request.headers}');
    print('Request Body: ${request.body}');

    // 记录响应日志（在响应可用时）
    if (response != null) {
      print('Response Status Code: ${response.statusCode}');
      print('Response Headers: ${response.headers}');
      print('Response Body: ${response.body}');
    }
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Network Log Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              // 发起一个网络请求作为示例
              var response = await FlutterSocketLogPlugin.instance.makeRequest(
                'https://jsonplaceholder.typicode.com/posts/1',
                method: 'GET',
                headers: {'Content-Type': 'application/json'},
              );

              // 处理响应（这里只是简单地打印出来）
              if (response != null) {
                print('Fetched Data: ${response.body}');
              }
            },
            child: Text('Fetch Data'),
          ),
        ),
      ),
    );
  }
}

注意：

上述代码中的 FlutterSocketLogPlugin.instance.setGlobalInterceptor 和 FlutterSocketLogPlugin.instance.makeRequest 方法是假设的，实际使用时请查阅该插件的文档以了解正确的API调用方式。
插件可能提供了更复杂的配置选项，比如日志级别、日志存储位置等，这些都需要根据插件的具体文档来进行配置。
如果插件不支持全局拦截器，你可能需要在每个网络请求处手动记录日志。

由于 flutter_socket_log_plugin 不是官方或广泛认可的插件，上述代码仅作为示例，具体实现细节和API调用应以插件的实际文档为准。如果插件不存在或文档不清晰，考虑寻找其他更成熟或官方推荐的日志记录解决方案。