Flutter控制台调试插件flu_console的使用

flu_console 是一个用于在 Flutter 应用中打印日志并在手机上显示的插件。通过这个插件，你可以在应用运行时查看详细的调试信息。

开始使用

步骤 1: 初始化

首先，你需要初始化 flu_console 插件。你可以通过以下方式来完成：

// 初始化并启用日志功能
FluConsole.run(() {
  runApp(const App());
}, enableLog: true);

// 或者不启用日志功能
FluConsole.run(() {
  runApp(const App());
});

步骤 2: 显示控制台按钮或面板

你可以选择在屏幕上显示一个按钮，点击后会弹出日志面板。或者直接导航到日志面板。

// 在屏幕上显示一个按钮，点击后会弹出日志面板
FluConsole.showConsoleButton(context);

// 或者直接导航到日志面板
Navigator.of(context).push(PageNavAnimBuilder(const LogPrintPanel()));

运行示例

为了更好地理解如何使用 flu_console，你可以克隆示例项目并运行它。

cd ./example
flutter run

截图

示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 flu_console 插件。

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flu_console/flu_console.dart';

void main() {
  // 初始化并启用日志功能
  FluConsole.run(() {
    runApp(const App());
  }, enableLog: true);
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

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

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

class _MyAppState extends State<HomePage> {
  int count = 0;

  Timer? timer;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 每500毫秒打印一次计数，并在达到20次后抛出异常
    timer = Timer.periodic(const Duration(milliseconds: 500), (timer) {
      print("${(count++)}");
      if (count == 20) {
        timer.cancel();
        throw Exception('test error');
      }
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    timer?.cancel();
    print("dispose");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Stack(
          children: [
            Center(
              child: GestureDetector(
                child: const Text(''),
              ),
            ),
            Column(
              children: [
                LayoutBuilder(builder: (ctx, constraints) {
                  return Row(
                    children: [
                      ElevatedButton(
                        onPressed: () {
                          // 显示日志按钮
                          FluConsole.showConsoleButton(context);
                        },
                        child: const Text("show log button"),
                      ),
                      const SizedBox(width: 10),
                      ElevatedButton(
                        onPressed: () {
                          // 导航到日志面板
                          Navigator.of(ctx)
                              .push(PageNavAnimBuilder(const LogPrintPanel()));
                        },
                        child: const Text("open log"),
                      )
                    ],
                  );
                })
              ],
            )
          ],
        ),
      ),
    );
  }
}