Flutter로 개발한 첫 앱을 배포하기 전에 마지막으로 테스트하려고 앱을 빌드해보니 예상치 못한 문제가 터졌습니다. 갑자기 ios, android, 실제 기기, 에뮬레이터 모두 material icon들이 ?나 이상한 한자, 이모티콘으로 출력되거나 X 모양만 출력되는 문제였습니다. 하지만 검색해서 나온 해결책이 하나도 도움이 되지 않았고, 결국 3일동안 삽질하다가 해결하게 되었습니다. 그래서 다른분들은 덜 삽질 했으면 하는 바램에 글을 작성하게 되었습니다.
여러 해결책
1. uses-material-design: true 추가하기
여기저기 검색을 해보니 가장 보편적이고 많은 사람들이 효과를 본듯한 방법은 pubspec.yaml 에 uses-material-design: true을 추가하는 것 이었습니다.
flutter:
uses-material-design: true
#...하지만 저는 이미 추가가 된 상태였고, 결국 이 방법으로는 해결 되지 않았습니다.
2. flutter clean -> 앱 삭제 -> flutter pub get -> 다시 빌드 후 설치하기
1번 방법 다음으로 가장 많이 본 방법입니다. 문제가 발생하는 프로젝트의 폴더로 이동해 flutter clean 명령어로 빌드, 라이브러링등을 초기화 시켜줍니다. 그 다음 테스트폰에 깔려있는 앱을 삭제한 뒤, 다시 설치하면 해결이 된다는 방법이었습니다. 하지만 이 방법 역시 나에게는 적용되지 않았습니다.
3. 테스트폰 초기화
테스트하는 폰 자체를 초기화 한 뒤 다시 깔면 해결된다는 방법도 있었습니다. 하지만 ios 시뮬레이터를 초기화 해도 해결되지 않았습니다.
4. 플러터 sdk 다운그레이드 하기
깃허브 이슈까지 찾아보던 중에 누가 댓글에 플러터 sdk 버전을 이전 버전으로 변경하니 이유없이 해결 되었다는 댓글을 봤습니다. 그래서 기존에 있던 최신버전인 2.2.3을 삭제하고, 2.0.0 버전으로 다시 설치해 봤지만, 이 방법 역시 해결되지 않았습니다.
5. pubspec.yaml 정리하기(?)
인터넷에 나와있는 해결책이 아무것도 되지 않고, 앱을 처음부터 다시 만들려고 했지만 그건 아닌거 같아서 마지막으로 그냥 해본 방법이 pubsec.yaml을 정리(?) 하는 거였습니다. 이 방법은 인터넷 어디에도 나와있지 않던 방법이라 다른분들도 참고하셨으면 좋겠습니다.
플러터 프로젝트를 생성하면 기본적으로 생성되는 pubspsec.yaml은 다음과 같습니다.
name: first_flutter_app
description: My Firsat Flutter App
# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1
environment:
sdk: ">=2.7.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:
# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true
# To add assets to your application, add an assets section, like this:
#assets:
# - images/a_dot_burr.jpeg
# - images/a_dot_ham.jpeg
# An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/assets-and-images/#resolution-aware.
# For details regarding adding assets from package dependencies, see
# https://flutter.dev/assets-and-images/#from-packages
# To add custom fonts to your application, add a fonts section here,
# in this "flutter" section. Each entry in this list should have a
# "family" key with the font family name, and a "fonts" key with a
# list giving the asset and other descriptors for the font. For
# example:
# fonts:
# - family: Schyler
# fonts:
# - asset: fonts/Schyler-Regular.ttf
# - asset: fonts/Schyler-Italic.ttf
# style: italic
# - family: Trajan Pro
# fonts:
# - asset: fonts/TrajanPro.ttf
# - asset: fonts/TrajanPro_Bold.ttf
# weight: 700
#
# For details regarding fonts from package dependencies,
# see https://flutter.dev/custom-fonts/#from-packages파일 설명을 위한 주석과 앱 개발에 있어서 굳이 없어도 되는 부분들이 꽤 많습니다. 이 부분들을 모두 지우고 다시 빌드하니 갑자기 뜬금없이 문제가 해결되었습니다.