Flutter日志记录插件logarte的使用

logarte 是一个用于Flutter应用的调试控制台和日志记录工具，可以在应用运行时监控其状态。以下是关于如何使用 logarte 的详细说明。

📦 特性

• 图形化控制台：一个漂亮的图形化控制台，便于调试。
• 密码保护：为图形化控制台添加密码保护。
• 网络请求监控：查看网络请求、响应、状态码和大小。
• 数据库写入监控：查看数据库写入事务及其内容。
• 分享日志：通过平台分享窗口分享各种日志。

📱 截图

🪚 安装

在 pubspec.yaml 文件中添加 logarte 作为依赖项：

dependencies:
  logarte: ^latest_version

然后在终端中运行 flutter pub get 来安装该包。

🚀 使用方法

初始化

你需要在整个应用程序中有一个 Logarte 实例。我建议将 Logarte 的全局实例存储在一个单独的文件中。

final Logarte logarte = Logarte(
    // 控制台的密码
    password: '1234',
    
    // 是否忽略密码
    ignorePassword: !kReleaseMode,
    
    // 分享网络请求日志的方法
    onShare: (String message) {
      Share.share(message);
    },
    
    // 火箭按钮长按执行的操作
    onRocketLongPressed: (BuildContext context) {
        print('Rocket long pressed');
    },
    
    // 火箭按钮双击执行的操作
    onRocketDoubleTapped: (BuildContext context) {
        print('Rocket double tapped');
    },
);

打开控制台

可以通过两种方式打开 Logarte 控制台：点击火箭入口按钮或使用 LogarteMagicalTap（当点击10次时会打开控制台）。

火箭入口按钮

这是一个浮动按钮，可以用来从应用程序的任何地方打开控制台。只需将其附加到UI上即可。

@override
void initState() {
  super.initState();

  logarte.attach(
    context: context,
    visible: !kReleaseMode,
  );
}

LogarteMagicalTap

LogarteMagicalTap 是一个小部件，当点击10次时会附加上火箭入口按钮。

LogarteMagicalTap(
  logarte: logarte,
  child: Text(
    'LibroKit v2.2',
  ),
)

跟踪网络请求

你可以通过使用 LogarteDioInterceptor（对于 Dio）或其他自定义方法来跟踪网络请求。

Dio

_dio = Dio()
  ..interceptors.add(
    LogarteDioInterceptor(logarte),
  );

其他客户端

import 'package:http/http.dart' as http;

final body = {
  'name': 'Kamran',
  'age': 22,
};
final headers = {
  'Content-Type': 'application/json',
};
final endpoint = 'https://api.example.com';

final response = await http.post(
  Uri.parse(endpoint),
  headers: headers,
  body: jsonEncode(body),
);

logarte.network(
  request: NetworkRequestLogarteEntry(
    method: 'POST',
    url: endpoint,
    headers: headers,
    body: body,
  ),
  response: NetworkResponseLogarteEntry(
    statusCode: response.statusCode,
    headers: response.headers,
    body: response.body,
  ),
);

记录消息

你可以使用 Logarte 实例的 info 方法记录消息，并在图形化控制台中查看它们。

logarte.info('This is an info message');

跟踪导航路由

要跟踪导航路由，可以将 LogarteNavigatorObserver 添加到 MaterialApp 的 navigatorObservers 列表中。

MaterialApp(
  navigatorObservers: [
    LogarteNavigatorObserver(logarte),
  ],
)

跟踪数据库写入

要跟踪数据库写入，可以使用 Logarte 实例的 database 方法。

logarte.database(
  target: 'language',
  value: 'en',
  source: 'SharedPreferences',
);

🕹️ 示例代码

以下是一个更详细的示例，展示了如何在项目中使用 logarte：

import 'package:dio/dio.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:logarte/logarte.dart';
import 'package:share_plus/share_plus.dart';

final logarte = Logarte(
  onShare: Share.share,
  password: 'logarte',
);

enum Environment { dev, staging, prod }

const environment = Environment.dev;

void main() {
  runApp(const App());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Logarte Example',
      debugShowCheckedModeBanner: false,
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blueGrey.shade900,
      ),
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blueGrey.shade900,
      ),
      navigatorObservers: [
        LogarteNavigatorObserver(logarte),
      ],
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  late final Dio _dio;

  @override
  void initState() {
    super.initState();

    _dio = Dio()
      ..interceptors.add(
        LogarteDioInterceptor(logarte),
      );

    logarte.attach(
      context: context,
      visible: environment == Environment.dev ||
          environment == Environment.staging ||
          kDebugMode,
    );
  }

  @override
  void dispose() {
    _dio.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Logarte Example'),
      ),
      body: Column(
        children: [
          const Divider(),
          ButtonBar(
            children: [
              FilledButton.tonal(
                onPressed: () async {
                  await _dio.get('https://jsonplaceholder.typicode.com/posts');
                },
                child: const Text('GET'),
              ),
              FilledButton.tonal(
                onPressed: () async {
                  await _dio.post('https://jsonplaceholder.typicode.com/posts');
                },
                child: const Text('POST'),
              ),
              FilledButton.tonal(
                onPressed: () async {
                  await _dio.put('https://jsonplaceholder.typicode.com/posts');
                },
                child: const Text('PUT'),
              ),
              FilledButton.tonal(
                onPressed: () async {
                  await _dio.delete('https://jsonplaceholder.typicode.com/posts');
                },
                child: const Text('DELETE'),
              ),
            ],
          ),
          const Divider(),
          ButtonBar(
            children: [
              FilledButton.tonal(
                onPressed: () {
                  logarte.database(
                    target: 'language',
                    value: 'en',
                    source: 'SharedPreferences',
                  );
                },
                child: const Text('Write to database'),
              ),
              FilledButton.tonal(
                onPressed: () {
                  showDialog(
                    context: context,
                    routeSettings: const RouteSettings(
                      name: '/test-dialog',
                    ),
                    builder: (BuildContext context) {
                      return const AlertDialog(
                        title: Text('Dialog'),
                        content: Text(
                          'Opening of this dialog was logged to Logarte',
                        ),
                      );
                    },
                  );
                },
                child: const Text('Open dialog'),
              ),
              FilledButton.tonal(
                onPressed: () {
                  try {
                    throw Exception('Exception');
                  } catch (e, s) {
                    logarte.error(e, stackTrace: s);
                  }
                },
                child: const Text('Exception'),
              ),
              FilledButton.tonal(
                onPressed: () {
                  // logarte.log('Printed to console');
                },
                child: const Text('Plain log'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

希望这些信息对你有所帮助！如果有更多问题，请参考 GitHub 仓库 或加入作者的 Telegram 频道 获取帮助。