Flutter控制台输出插件om_console的使用

Om Console简介

Om Console 是一个用于Flutter的实时控制台，它使开发者能够查看UI打印信息和HTTP请求。该工具通过curl与Postman集成，以增强调试功能。

注意：此包目前处于测试阶段，在大屏幕上运行良好，但移动支持以及将HTTP请求复制为表单数据的功能仍在开发中。

安装

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

dependencies:
  om_console: ^latest_version

使用方法

1. 配置main函数

在main.dart文件中进行如下配置：

import 'package:om_console/om_console.dart';

void main() async {
  Console.consoleLisitener(() {
    // 应用初始化代码
    runApp(MyApp());
  });
}

2. 包装MaterialApp或根组件

在应用的根组件中使用ConsoleWrapper包装你的MaterialApp或其他根组件：

import 'package:om_console/om_console.dart';

@override
Widget build(BuildContext context) {
  return ConsoleWrapper(
    showConsole: true,  // 控制台显示开关
    maxLines: 200,      // 最大行数限制
    child: MaterialApp(
      home: HomePage(),
      // 其他MaterialApp属性
    ),
  );
}

3. 自定义日志记录（带标签和颜色）

使用Console.log方法来实现自定义的日志记录：

Console.log("Your Message or Your object", type: LogType.logs, color: Colors.amber);

可用的日志类型包括：

• normal
• error
• logs
• http

4. HTTP请求日志

对于HTTP请求的日志记录，可以使用Console.logHttp方法：

Console.logHttp(
  url: url,
  method: "POST",
  headers: response.headers ?? {},
  body: data,
  statusCode: responseBody["status"] ?? 500,
  response: responseBody,
  bodyType: BodyType.raw, // 指定curl命令中body的格式
  textColor: Colors.black,
  backgroundColor: responseBody["status"] == 200
      ? const Color.fromARGB(255, 207, 223, 190)
      : Color.fromARGB(255, 223, 190, 190)
);

bodyType参数决定了请求体在生成的curl命令中的格式：

• BodyType.formData: 将body格式化为multipart form data
• BodyType.xWwwFormUrlencoded: 将body格式化为x-www-form-urlencoded
• BodyType.raw: 将body作为原始数据格式化（默认）

示例Demo

以下是一个完整的示例demo，展示了如何结合上述所有步骤创建一个简单的Flutter应用程序，并利用om_console插件进行日志记录：

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:om_console/om_console.dart';

void main() {
  Console.consoleLisitener(() {
    runApp(const MyApp());
  });
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ConsoleWrapper(
      showConsole: true,
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: "My Flutter HomePage"),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void logPress() {
    // 普通print示例
    for (int i = 0; i < 100; i++) {
      print(generateRandomString(100));
    }
    // SQL日志示例
    Console.logSql(
      dbName: "Quick",
      params: {
        "Operation": "Get Left-Right Side Group",
        "User": "a.abdelghafar",
        "LastChatID": 2003305,
        "local": false,
        "UnreadList": "0",
        "version": "1.0.0.0",
        "firebaseToken": "",
        "iosVersion": "",
        "androidVersion": "",
        "webVersion": ""
      },
      spName: "[GRP].[APIGroupOperation]",
    );
    // HTTP日志示例
    Console.logHttp(
      url: "www.example.com",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Authorization": "Bearer wawXHzQw35NTwyJ9CSLVWKKd4vv4pNq2lFKrEZPp9EG",
        "X-API-Key": "12345",
        "X-Version": "1.0.0",
        "X-Platform": "flutter",
        "X-Locale": "en_US",
        "X-Screen-Width": "${MediaQuery.of(context).size.width}",
        "X-Screen-Height": "${5000}",
      },
      body: {
        "device_id": "device_id_123",
        "app_version": "1.0.0",
        "locale": "en_US",
        "platform": "flutter",
      },
      textColor: Colors.black,
      statusCode: 200,
      response: {
        "message": "Success",
        "message1": "Success",
        "message2": "Success",
        "message3": "Success",
        "message4": "Success",
        "message5": "Success",
        "message6": "Success",
        "message7": "Success",
        "message8": "Success",
      },
      bodyType: BodyType.raw,
    );
  }

  String generateRandomString(int length) {
    const characters =
        'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    final random = Random();
    return List.generate(length, (index) => characters[random.nextInt(characters.length)]).join();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 200,
              height: 50,
              child: MaterialButton(
                onPressed: () {
                  logPress();
                },
                color: Colors.purple,
                child: const Text(
                  "Log To Console",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

此示例演示了如何在一个按钮点击事件中，向控制台输出随机字符串、SQL语句以及模拟的HTTP POST请求。这可以帮助你快速上手并理解om_console插件的基本用法。