[Flutter Project] Splash 와 App Icon 적용하기

🔘 Splash

✅Package

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

Splash는 앱을 실행 할 때, 로딩 창 같은 개념이다.

딱히, 로딩할 건 없지만 그럴싸 해 보이게 만들어 보기위해 넣어 보았다.

✅시작

가장 먼저 Splash에 사용할 이미지를 assets/images 폴더 내에 넣어 주었다.

찾아보니 보통은 구분하기 편하게 splash.yaml 파일을 만들어서 사용하지만..

간단하게 만들 생각이니 pubspec.yaml파일에 넣어주겠다. 

flutter_native_splash:
  color: "#ffffff"
  image: assets/images/sub_icon.png

  fullscreen: true

이제 main.dart파일로 가서 가장 먼저 실행 되는 main 함수에 Splash 명령어를 넣어준다.

WidgetsFlutterBinding.ensureInitialized(); //비동기로 이루어져야 할 때 사용 main 함수에 async붙이기
FlutterNativeSplash.preserve(widgetsBinding: WidgetsFlutterBinding.ensureInitialized());

자신이 원하는 위치에서 사라지도록 remove 명령어도 넣어 준다. 애미티 앱에서는 Home 빌드가 이루어지는 시점에서 없에 주었다.

FlutterNativeSplash.remove();

여기 까지 세팅이 되었으면 터미널에서 Splash를 Create해준다.

 flutter pub run flutter_native_splash:create
 //만약 파일을 따로 만들경우
 flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml

수정이 필요한 경우는 remove후, 변경하고 다시 create 해줘야한다.

flutter pub run flutter_native_splash:remove

🔘 AppIcon

✅Package

https://pub.dev/packages/flutter_launcher_icons

flutter_launcher_icons | Dart Package

아이콘은 말 그대로 스마트폰 내에 아이콘이다.

 

✅시작

이것 또한 사용할 이미지를 assets/images 폴더 내에 넣어준고, pubspec.yaml파일에 등록해 줄거다.

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/images/main_icon.png"

이제 터미널에서 실행해주면 끝

flutter pub run flutter_launcher_icons:main

✅결과

---

✖️ Android앱 이름 설정하기

프로젝트 폴더 내 android\app\main\AndroidMainfest.xml 파일 내에서 android:label = '앱이름' 으로 설정 후 빌드