[Flutter] 아이콘 사라짐 오류 해결

❗오류 발생

 

오른쪽 그림이 원래 개발할 때 화면이고, 좌측이 build 후 베포한 모습이다.

그림과 같이 아이콘이 일부 사라지고 보이지 않게 된다.

 

Could not find a set of Noto fonts to display all missing characters. Please add a font asset for the missing characters.

 

F12 를 눌러서 개발자 도구를 열면 개발할 때 보이지 않던 오류가 나타나게 되는데 이는 폰트에서 글자가 누락된 경우이다.

 

🤔 해결 과정 #1

처음에는 pubspec.yaml 파일 내부를 확인했다.

uses-material-design: true

 

위 내영이 작성되어있지 않으면 MaterialIcon 이 누락된다는 Github Issue 들이 있었다.

Icons are not getting rendered in Flutter Web · Issue #32540 · flutter/flutter

 

근데 이건 나랑 거리가 멀어보였다.

저 코드를 작성하지 않으면 MaterialIcon 전부가 보이지 않아야 정상일텐데 나는 일부 Icon만 사라지는 현상이기 때문이였다.

 

🤔 해결 과정 #2

그렇다면 두 번째 시도해본 해결 방법은?

web-renderer를 바꿔보라는 것이 있었다.

 

사실 원래는 되던 것이였으니 이것도 해결 방법이라고 생각하지는 않았지만, 그래도 믿져야 본전이겠거니 하고 시도하고자 했다.

근데 막상 시도하려고 하니 내 라이브러리 중 하나가 wasm 으로 빌드될 수 없는 의존성이 존재했다.

Dart library 'dart:html' is not available on this platform.

 

위 오류가 뜨면서 Compile이 안되는 것이였다.

 

뭐 대응하기는 크게 어렵지 않겠지만 그래도 쉬운 해결 방법이 있을까 해서 일단 잠정 보류하기로 결정했다.

 

 

🤔 해결 과정 #3 (최종 해결, 분석)

 

결국 되게 간단하게 해결됐다.

다시 빌드하니까 됐다...

 

그래서 살펴보니까 빌드할 때 아래 폰트 파일들을 tree-shaking 해주는 부분에서 아마 실제 사용되는 부분도 오류로 인해 떨어져 나간게 아닐까 하고 유추하고 있다.

Font asset "CupertinoIcons.ttf" was tree-shaken, reducing it from 257628 to 1472 bytes (99.4% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app. Font asset "MaterialIcons-Regular.otf" was tree-shaken, reducing it from 1645184 to 17744 bytes (98.9% reduction). Tree-shaking can be disabled by providing the --no-tree-shake-icons flag when building your app.

 

만약 다시 빌드해도 안 됐더라면 그냥 tree-shaking 을 수행하지 않게 플래그를 설정해주거나 해봤을 것 같지만, 다행히 다시 빌드해보니까 잘 나타나서 손쉽게 해결하게 되었다.

 

 

플러터 최신 버전에서는 해결 과정 #1 은 기본적으로 활성화가 되어있는 것 같고, 해결 과정 #2 도 최신 버전에서는 Issue 들이 등재된게 별로 없으니까 대부분 다시 빌드해보고 안되면 다른 방법을 찾는게 좋을 것 같다.

 

컴퓨터 잘 모르는 사람들한테 컴퓨터 고장나면 껏다 켜보라 하듯이 나도 안되면 일단 Clean build 하는 습관을 들이던가 해야겠다.

 

 

💡 참고 자료

Tree-Shaking (Javascript용 설명이지만 폰트에서도 동일한 맥락)

트리 셰이킹(Tree shaking) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN