Talker를 사용하는 Flutter 애플리케이션의 다채로운 로그

안녕하세요 여러분 👋
이것은 Talker 라이브러리에 대한 기사 시리즈의 대망의 연속입니다 😅

이 게시물에서는 이 라이브러리를 사용하여 로그의 색상과 텍스트를 사용자 지정하는 방법에 대해 설명합니다.



해보자🚀

기본 로그

1) 애플리케이션 생성 또는 기존 애플리케이션 열기
다트 콘솔 또는 플러터 애플리케이션을 만들 수 있습니다.
Talker는 flutter sdk 종속성 없이 dart에만 기반하므로 어디에서나 이 패키지를 사용할 수 있습니다 🙂

예를 들어 기본 다트 콘솔 애플리케이션을 만듭니다.


2) pubspec.yaml에 화자 종속성 추가

dependencies:
  talker: ^1.3.0

3) 응용 프로그램의 기본 파일에서 화자를 초기화하고 기본 메서드에서 간단한 로그를 만듭니다.

import 'package:talker/talker.dart';

final talker = Talker();

void main() {
  talker.error('It looks like this button is not working');
  talker.info('The food for lunch has already arrived');
  talker.warning('Something bad has happened, but the app is still working');
}

이 코드를 사용하면 출력은 아래와 같습니다.


이미 좋아 보인다.
Talker는 기본적으로 8가지 유형의 로그를 표시할 수 있습니다.


하지만 충분하지 않을 수 있습니다 🧐
좋아요, 말하는 사람도 이 경우에 대한 해결책을 가지고 있습니다 🥳

커스텀 로그

예를 들어 우리 애플리케이션은 http 요청을 통해 서버 측 백엔드 코드와 함께 작동할 수 있습니다. 그리고 전체 메시지 목록에서 http 로그를 강조 표시하려면 다른 색상으로 http 로그를 표시해야 합니다.

1) 사용자 지정 http 로그 화자를 만들기 위해 구현으로 확장할 수 있는 TalkerLog 클래스가 있습니다.

class HttpLog extends TalkerLog {
  HttpLog(super.message);
}

2) 좋습니다. 하지만 이 로그를 특정 색상으로 강조 표시하는 방법은 무엇입니까?
TalkerLog 상속자 클래스의 펜 필드를 재정의할 수 있습니다.

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

3) 그리고 메인 함수에서 talker.logTyped() 메서드를 호출합니다.

void main() {
  talker.logTyped(HttpLog('Http response 200'));
}

class HttpLog extends TalkerLog {
  HttpLog(super.message);

  @override
  AnsiPen? get pen => AnsiPen()..cyan();
}

이 코드는 다음과 같은 메시지를 표시합니다.


4) 더 커스터마이징! ⚙️
간단한 예처럼 제목 필드와 generateTextMessage 메서드를 재정의할 수 있습니다.

제목 - 기본 메시지 제목입니다. 콘솔 출력 및 메시지 필터링에 사용됩니다.

generateTextMessage() - 이 메소드는 출력 콘솔에서 보기 전에 로그 메시지를 생성합니다. 이 방법을 사용하면 원하는 대로 메시지 형식을 지정할 수 있습니다.

예를 들어 보자

void main() {
  talker.logTyped(
    HttpLog(
      'User id is loaded',
      data: {'userId': 1234},
    ),
  );
}

class HttpLog extends TalkerLog {
  HttpLog(
    String message, {
    this.data,
  }) : super(message);

  final dynamic data;

  @override
  AnsiPen get pen => AnsiPen()..cyan();

  @override
  String get title => 'HTTP';

  @override
  String generateTextMessage() {
    var msg = '[$displayTitle] $message';

    if (data != null) {
      final prettyData = encoder.convert(data);
      msg += '\nDATA:$prettyData';
    }
    return msg;
  }
}

이 코드는 다음과 같은 메시지를 표시합니다.


화자를 사용하면 다른 많은 것들을 사용자 정의할 수 있습니다. 기사 형식은 전체 설명에 충분하지 않습니다. 관심 있으신 분들은 detailed examples in the project repository 을 보시면 됩니다.

❤️ 글 읽어주셔서 감사합니다
💻 기사 예제 소스 코드here

❤️와 put a star on the GitHub을 보여주고 프로젝트를 지원하세요!