Flutter日志插件log4f：基于Android Log和iOS NSLog，封装Logan，App也可查看日志

最新推荐文章于 2025-10-08 06:02:08 发布

原创最新推荐文章于 2025-10-08 06:02:08 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #android #flutter日志

Flutter 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了自定义的日志插件log4f，对比了原生日志的不足并演示了如何在Flutter中使用。同时，作者分享了Logan框架的集成，用于日志上传和查看。通过实例展示了Android和iOS平台的打印效果及Logan的使用方法。

1. 它是什么

log4f是一个Flutter插件，调用了原生的日志方法。Flutter原生的日志不太友好，而且DEBUG Console输出没有颜色；现成的一些插件又多是做一些格式化的封装，这些“格式化”在我看来很多都是多余的。所以我自己写了一个非常简单的日志插件，在Android平台上调用了android.util.Log的相关方法，在iOS上调用了NSLog方法，使用平台的Native代码打印日志。

2. 怎么用

基本使用

Log4f.log("v", "tag", "msgmsgmsgmsgmsgmsgmsg", 0, 0, useLogan);
// or
Log4f.v(tag: "tag", msg: "msgmsgmsgmsgmsgmsgmsg");

可视化界面

Navigator.of(context).push(MaterialPageRoute(builder: (context) => LogConsole()));
// or use other nav apis

界面效果
在这里插入图片描述
这个颜色可以通过修改Log4f.colorMap配置

打印效果

Android logcat
在这里插入图片描述
xcode：

这里我在前面加了一组数字，这样当你想查看warning以及以上级别的日志时，可以使用[2345]来过滤。这是一个蠢方法，但是我没有想到更好的办法，可能是因为我对iOS开发没那么熟悉…

Logan

这里还封装了美团的Logan框架，作为日志上传和查看的手段

useLogan = await FlutterLogan.init("0123456789012345", "0123456789012345", 1024 * 1024 * 10);

...

final today = DateTime.now();
final date = "${today.year.toString()}-${today.month.toString().padLeft(2, '0')}-${today.day.toString().padLeft(2, '0')}";
final bool back = await FlutterLogan.upload(
    'http://192.168.3.46:8080/logan/logan/upload.json',
    date,
    'FlutterTestAppId',
    'FlutterTestUnionId',
    'FlutterTestDeviceId'
);

在Logan网页上查看日志
在这里插入图片描述