Flutter颜色观察与日志记录插件color_observer_logger的使用

Flutter颜色观察与日志记录插件color_observer_logger的使用

Color Logger

更多示例可以在这里获取。

与VSCode扩展程序配合使用

• VSCode扩展程序：flutter logger easy life

• 没有扩展程序时

• 使用扩展程序时可以点击绝对路径跳转到代码行

设置Observer bloc

更多详情可以在这里查看。

// 显示堆栈跟踪
// 如果使用 'flutter build apk --obfuscate' 
// 则设置 stackTracking = false;

// AnsiColor.showColor();
Logger.root.level = Level.ALL;
Bloc.observer = ColorBlocObserver(
  stackTracking: true,
  kIsWeb: kIsWeb,
  filter: ShowWhenFilter(
    [
      "TestLoginBloc",
      "TestCubit",
    ],
  ),
  blocColor: AnsiColor.fg(40),
  methodCount: 3,
  blocHighLightFilter: DefaultHighLightFilter(
    color: AnsiColor.fg(214),
    colorOnly: false,
  ),
);

日志过滤器

• 更多详情可以在这里查看。
• 当字符串包含特定值时触发。

class ShowWhenFilter extends Filter {
  ShowWhenFilter(List<String> name) : super(name);
}

class HideWhenFilter extends Filter {
  HideWhenFilter(List<String> name) : super(name);
}

高亮过滤器

• 更多详情可以在这里查看。
• 当过滤器返回true时，高亮消息并使用颜色。

class DefaultHighLightFilter extends BlocHighLightFilter {
  [@override](/user/override)
  bool filter(String message) {
    return message.toLowerCase().contains('error') ||
           message.toLowerCase().contains('fail') ||
           message.toLowerCase().contains('exception');
  }
}

bloc

• 不追踪

• 追踪

• 错误

• 错误追踪

cubit

• 不追踪

• 追踪

示例代码

import 'package:color_observer_logger/color_observer_logger.dart';
import 'package:example/bloc/test_bloc.dart';
import 'package:example/bloc/test_cubit.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:logging/logging.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    //AnsiColor.showColor();
    Logger.root.level = Level.ALL;
    Bloc.observer = ColorBlocObserver(
      stackTracking: true,
      kIsWeb: kIsWeb,
      filter: ShowWhenFilter(
        [
          "TestLoginBloc",
          "TestCubit",
        ],
      ),
      blocColor: AnsiColor.fg(40),
      methodCount: 3,
      blocHighLightFilter: DefaultHighLightFilter(
        color: AnsiColor.fg(214),
        colorOnly: false,
      ),
    );
    final testLoginBloc = TestLoginBloc();
    final testCubit = TestCubit(0);
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => testLoginBloc,
        ),
        BlocProvider(
          create: (context) => testCubit,
        ),
      ],
      child: Builder(builder: (context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
            useMaterial3: true,
          ),
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final testLoginBloc = context.read<TestLoginBloc>();
    final testCubit = context.read<TestCubit>();
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                testLoginBloc.add(Success());
                testLoginBloc.add(Failed());
              },
              child: Text("testLoginBloc"),
            ),
            ElevatedButton(
              onPressed: () {
                List.generate(5, (index) => testCubit.update());
              },
              child: Text("testCubit"),
            ),
            ElevatedButton(
              onPressed: () {
                testLoginBloc.add(Error());
                testCubit.error();
              },
              child: Text("error"),
            ),
          ],
        ),
      ),
    );
  }
}