앱 실행 첫 화면을 넣어보자

흐짜짜! 🫒 올리브·2021년 11월 1일
0
post-thumbnail

flutter 앱을 실행할 때 뜨는 하얗디 하얀 화면 말고, 우리 앱만의 로딩 화면을 넣어쥬자

▲ 원하는 그림

💼사용할 패키지

시작할 때 색 넣기!

패키지에서 하라는대로 해보자.
(flutter_native_splash ver. 1.3.1 기준)

//pubspec.yaml
dev_dependencies:
  flutter_native_splash: ^1.3.1

...
//at last line
flutter_native_splash:
  color: "#613EEA" // 내가 원하는 색!

입력 후, terminal에 이렇게 입력한다.
$ flutter pub run flutter_native_splash:create

만약
The pubspec.yaml file has changed since the pubspec.lock file was generated, please run "pub get" ain. pub finished with exit code 65
이런 오류가 뜬다면, 하라는대로 $ flutter pub get 을 해보고, 또 좌라락 오류가 뜬다면

$ flutter channel dev
$ flutter upgrade

출처
를 실행한다음, $ flutter pub run flutter_native_splash:create를 해보장

잘 되죵

로고를 넣어부자

root 폴더 아래에 assets 폴더를 만들어준 뒤, 이미지를 넣는다.

flutter_app_name/
	assets/
    	logo.png

그런 다음, pubspec.yaml 파일에 이미지를 추가한다.

//pubspec.yaml
flutter_native_splash:
  color: "#613EEA"
  image: assets/logo.png

다시 로드해쥬자
$ flutter pub run flutter_native_splash:create

뚜두듄

앱 실행화면 완성!

참고 블로그

0개의 댓글