FlutterNativeSplash 를 이용한 Splash 화면 적용

Yes. Dominos~·2022년 4월 15일

flutter

플러터 첫 개발 관련 글이다.
현재 플러터 개발 시작 후 약 5개월 조금 더 지났다.
매일 하루 12시간 이상 투자하였고 곧 있으면 앱 출시를 앞두고 있다.

조금의 여유가 생겨서, 미뤄둔 블로그 글들을 1일 1블로그를 꾸준히 올리려고 한다. (빡세기는 하겠지만,,,)

앞으로의 개발 글들은 아주 기초적인 내용 보다는

Architecture
다른 블로그에도 있는 글이지만 핵심 내용이 빠져있을때, 직접 추가 해결법 작성
내가 직접 개발해보면서, 널리 알리고 싶은 개발 팁

위 3가지를 중점적으로 글을 작성할 생각이다.

블로그 성장이나, 포트폴리오에 가점을 받기 위해서, 문제해결위한 양산형 개발 블로그 보다 중요포인트를 짚는 개발블로그를 만들고 싶다.

( 들었던 이야기 중에 블로그 글이 5개 이지만, 5개 모두 고퀄리티 글이라고 유명해지신 개발블로거 분이 계신데,
해당 블로그 글을 이야기하면... 아~ 그 사람!!! 해당 분야이면 다 안다고 한다.
대단하신분이라고 생각한다. )

나는 글을 적거나 커뮤니케이션 할때 짧게 핵심만 전달하는 것을 좋아한다.
그래서 글을 쓸때는 '다나까' 체를 사용한다.
< 다나까 체는 더 짧게 이야기하면서 의미를 전달하는데 수월하다.>

몇몇 분들은 기분 나쁘실수도 있겠지만 내용 전달에 더 효율적이라 생각하여 다나까 체를 사용하겠습니다.

본론

회사, 개인앱, 토이프로젝트 등등 개발 하다보면

앱 권한처리
앱의 개성을 보여주기 위해

Splash 화면이 필요한 경우가 많다.

- pub.dev 에 가보면 (2022-04-19 기준)

flutter_native_splash 패키지 가 제일 인기 있는 Splash 패키지 이다.

필자도 이 패키지를 사용하였다.
Pub Dev : flutter_native_splash

적용방법

1. 의존성 적용 (pubspec.yaml)

dependencies:
  flutter_native_splash: ^2.1.6 // 웬만하면 최신 버전으로 할 것

2. flutter_native_splash.yaml 파일 생성

공식문서에서는
2-1. flutter_native_splash.yaml 만들던가
2-2. pubspec.yaml 에 아래에 적어라 라고 하는데, code 가 꽤나 길다.

그래서 앱의 root 디렉토리에 아래처럼 flutter_native_splash.yaml 파일을 하나 생성하는 것을 추천한다.

3. flutter_native_splash.yaml 작성

# 스플래쉬 화면 설정
flutter_native_splash:
  color: "#07BEB8"
  image: assets/image/splash_logo.png
  // 이 부분은 pubspec.yaml 의 경로 인식 코드를 작성해줘야한다.

각 속성들은 주석을 읽어보기를 바란다.

4. Terminal 에서 명령어 입력하여 splash 파일 생성

프로젝트의 root 위치의 터미널에서 아래와 같이 명령어 입력
: flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml

path 를 저렇게 입력하는 이유는
--path=flutter_native_splash.yaml 는 앱의 root 폴더에 작성 하였기 때문이다.

이렇게 하면 splash 파일이 생성된다.

이후 만약에 --path=flutter_native_splash.yaml 파일을 수정 하였다면,

꼭 프로젝트의 root 위치의 터미널에서, 삭제 후 재생성 해야 적용이 된다.
// 제거
flutter pub run flutter_native_splash:remove
// 재생성
flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml

5. 앱 시작 한 후, 일정기간 초기화 후에 splash 화면 끄기

보통을 splash 화면을 컨트롤 하기 위해, main.dart 파일에서 아래처럼 쓸려고 할것이다.

main.dart

Future<void> main() async {
  // 스플래시 화면의 시작부분에 widgetBinding 을 설정 함으로써,
  // 언제 스플래시 화면을 끌지 Controll 할수 있다
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  // 스플래시 화면 보여줘라. (preserve)
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  runApp(MyApp());
}

이후 원하는 code 구역에서

FlutterNativeSplash.remove();

작성하면 Splash 화면이 꺼진다.

ensureInitialized
ensureInitialized 사용 이유 1
ensureInitialized 사용 이유 2 : 앱 시작전 check 해야하는 기능이 있는 경우
preserve, remove
FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);를 사용하면,
Flutter에서 첫 프레임을 렌더링하였더라도 네이티브단의 스플래시화면을 없애지 않는다.
유저정보나 로그인 정보 등 앱 시작 시 필요한 정보나 permission을 받아야 할 때, 원하는 행위가 다 끝난 후,
FlutterNativeSplash.remove();를 사용하여 스플래시 화면을 없앨 수 있다.

위의 내용은 이분의 블로그를 참고 하였습니다.
flutter_native_splash를 활용하여, 밥아저씨처럼 손쉽게 네이티브 스플래시 만들기