Flutter Web(Canvas Kit)에서 일본어 및 그림 문자 그리기 문제 방지

문제.

캔버스킷은 묘사가')'보다 성능이 뛰어나 환경에 따라 다르게 그려지는 데 차이가 없다는 장점이 있었지만, 두 바이트짜리 문자와 그림문자가 일시적으로 이른바'Tofu'가 된 것이 아이슈의 향상이다.
https://github.com/flutter/flutter/issues/53897
https://github.com/flutter/flutter/issues/60037
(예)

↓ 몇 초 후...

이제 Fluter Web의 CanvasKit는 기본 렌더링기(데스크톱을 위한)입니다. -웹-rendererer로 지정하거나 이동으로 이 문제를 열람하면 회피할 수 있지만, 데스크톱에서Canvas Kit render를 사용해도 회피할 수 있는 방법을 소개한다.

회피 방법

Tofu로 변하는 텍스트를 포함하는 글꼴을 계획에 컴파일합니다. Material App의 {theeme:} 등을 통해 글꼴을 지정하면 됩니다.
글꼴을 포함할 때 글꼴 파일의 이름이'Hiragino~'등 일본어인 경우 적절한 반각 영문 수의 파일 이름으로 변경해야 한다.2바이트 문자의 파일 이름을 잘 읽을 수 없을 것 같습니다.
pubspec.yaml

  fonts:
    - family: Hiragino Maru
      fonts:
        - asset: fonts/Hiragino_Maru.ttc
    - family: Color Emoji
      fonts:
        - asset: fonts/Apple Color Emoji.ttc

(예) 일본어 글꼴을 모든 테마로 지정

MaterialApp(
      theme: ThemeData(
        fontFamily: 'Hiragino Maru', // ←
        primaryColor: Colors.cyan,
        accentColor: Colors.yellow,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            primary: Colors.cyan[700],
            onPrimary: Colors.white,
          ),
        ),
      ),
    );

(예) 그림 문자 글꼴 지정 (애플 Color Emoji 사용)

Text(
        'あいうえお💩',
        style: TextStyle(
          fontFamilyFallback: ['Color Emoji'], // ←
        ),
      ),

여기서 {fontFamilyFallback:} 이 아니라 {fontFamily:}를 지정하면 "아이쿠아"가 표준 글꼴로 되어 Tofu화됩니다.

결실

Future는 그리는 즉시 표시할 수 있습니다.delayed()를 통해 Text 읽기를 지연합니다.

CanvasKit에 일본어 및 그림 문자 그리기
속성이 있는 Widget의 경우 Text Widget뿐만 아니라 Text Field Widget 등에도 적용할 수 있습니다.