Flutter可视化控制台插件visual_console的使用

Flutter可视化控制台插件visual_console的使用

Visual Console 是一个受 VConsole 启发的可视化控制台插件。它是一个轻量级且功能强大的工具，适用于开发和调试 Flutter 应用程序。

特性

• 可配置：它是 Logger 插件。
• 简单：有两个输出通道：IDE 的控制台和屏幕上的可视化控制台。
• 小巧：它具有较小的体积。
• 快速：运行流畅且响应迅速。
• 强大：支持过滤、搜索、堆栈跟踪、清理、复制、删除日志等操作。

开始使用

1. 定义 Logger

final logger = VisualLogger(
  filter: ProductionFilter(), // 过滤器用于筛选日志级别
  output: VisualOutput(), // 输出对象用于将日志输出到控制台或可视化控制台
  printer: VisualPrinter( // 打印器用于格式化日志信息
    realPrinter: VisualPrefixPrinter(
      methodCount: 1, // 显示调用方法的数量
      lineLength: () {
        int lineLength = 80;
        try {
          lineLength = stdout.terminalColumns; // 获取控制台一行能打印多少字符
        } catch (e) {}
        return lineLength;
      }(),
      colors: stdout.supportsAnsiEscapes, // 颜色是否可用
      printEmojis: false, // 是否打印表情符号
      printTime: true, // 是否打印时间戳
    ),
  ),
);

2. 初始化

在 MaterialApp 中添加 Console 组件：

MaterialApp(
  title: 'Visual Console Demo',
  home: const MyHomePage(),
  builder: (context, child) {
    return Stack(
      children: [
        child!, // 原来的子组件
        const Console(), // 可视化控制台组件
      ],
    );
  },
);

使用方式

logger.v("verbose"); // 打印详细日志
logger.d("debug"); // 打印调试日志
logger.i("info"); // 打印信息日志
logger.w("warning"); // 打印警告日志
logger.e("error"); // 打印错误日志
logger.wtf("wtf"); // 打印致命错误日志

屏幕截图

其他信息

此插件是 Logger 插件的一个扩展包。

示例代码

以下是完整的示例代码：

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:visual_console/visual_console.dart';

var logger = VisualLogger(
  filter: ProductionFilter(),
  output: VisualOutput(),
  printer: VisualPrinter(
    realPrinter: VisualPrefixPrinter(
      methodCount: 1,
      lineLength: () {
        int lineLength = 80;
        try {
          lineLength = stdout.terminalColumns;
        } catch (e) {}
        return lineLength;
      }(),
      colors: stdout.supportsAnsiEscapes, // 颜色是否可用
      printEmojis: false, // 是否打印表情符号
      printTime: true, // 是否打印时间戳
    ),
  ),
);

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  // 这个组件是应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Visual Console Demo',
      home: Builder(
        builder: (context) {
          return const MyHomePage();
        },
      ),
      builder: (context, child) {
        return Stack(
          children: [
            child!, // 原来的子组件
            const Console(), // 可视化控制台组件
          ],
        );
      },
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Visual Console"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                logger.v("verbose"); // 打印详细日志
                logger.d("debug"); // 打印调试日志
                logger.i("info"); // 打印信息日志
                logger.w("warning"); // 打印警告日志
                logger.e("error"); // 打印错误日志
                logger.wtf("wtf"); // 打印致命错误日志
              },
              child: const Text("Tap to log"),
            ),
            ElevatedButton(
              onPressed: () {
                try {
                  throw Exception("error");
                } catch (e, s) {
                  logger.e("catch error", e, s); // 打印捕获到的错误
                }
              },
              child: const Text("Tap to error"),
            ),
          ],
        ),
      ),
    );
  }
}