flutter splash 에 대한 고민

2022 - 05 - 20

https://velog.io/@chb1828/%EC%B2%AB-%EB%A1%9C%EB%94%A9%ED%99%94%EB%A9%B4-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0Splash-%ED%99%94%EB%A9%B4

첫 로딩화면 구현하기(Splash 화면)

statefulWidget의 생명주기 함수 initState()를 오버라이드 하면서 Timer를 이용한 스플래쉬 화면구성 

-> Timer를 이용한 스플래쉬화면 방법인데 앱 로딩시에 흰색화면이 나타나는 문제점이 있음. 

-> 비슷한 문제점들로 인하여 해결방안으로 flutter_native_splash 패키지를 사용하는 사례들이 있음.

https://docs.flutter.dev/development/ui/advanced/splash-screen#android-launch-screen

Adding a splash screen to your mobile app

공식문서에서 가이드해주는 splash 구현 방법인데 android & ios에서 각각 이미지 파일을 추가 및 셋팅해주는 방법이고 공수가 많이 드는 작업이다. 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

그래서 더 간단한 방법으로 할수있게 공식적으로 패키지 라이브러리를 제공해준게 있다. = flutter_native_splash 방법 

=> 따라서 이방법을 사용하려면 다음과 같은 제약 조건이 발생한다.
      flutter_native_splash.yaml 파일을 읽어보면 여러가지 속성들이 있지만  image 배치는
      backgroundimage(배경이미지) 와 image(로고이미지) 로만 구성되어 구현가능하다.  

=> 비중이 높지 않은 화면이기에 많은 시간을 투자하는것보다 합성된 디자인을 요청하던지 심플한 디자인에 스플래쉬를 구현하는것이 좋다고 생각한다.

1. dependencies 추가
2. flutter_native_splash.yaml 작성 
3. flutter pub run flutter_native_splash:create 패키지 명령어 실행
4. flutter pub run flutter_native_splash:remove (이미지 바뀌면 삭제 후 다시 실행)
5. example 소스 참조 

---

2022 - 09 -26

최선을 다해 디자인 내용에 충실하는게 맞는 방향이라 생각했다. 

분명 기술적으로 더 편한 루트는 있겠지만, 기술적으로 안되는 것과 공수가 많이 드는 것에 차이를 명확하게 하기위해. 

 

flutter splash 를 찾아보면 분명 유명하고 주로 쓰는 방법이 있다. 

하지만 그 방법으로 현재 디자인을 만족 시키지 못한다. 

그리하여 기술적으로도 문제가 없고,  디자인도 문제가 없는 방법을 열심히 찾아보고 시도해봤다.

 

splash  페이지 위젯을 만들어 일정시간 딜레이를 주면서 splash와 같은 기능을 하게 만드는 방법을 택했다. 

splash 페이지 위젯을 만들어 하게되면 장점으로 자유도가 굉장히 높기 떄문에 내가 원하는 레이아웃 구조로 만들수 있으므로 디자인을 만족시켰다. 

-> splash 페이지 위젯을 만드는 방법

https://www.youtube.com/watch?v=jJXQ45Zd7L0

하지만 이 방법은 기술적으로는 문제가 있다.  

 

플러터의 작동방식 때문인데,  플러터는 앱이 실행될때 플러터를 로드하는 동안 잠깐의 짧은 대기시간이 존재한다고 한다. 

그리하여 이 시간동안 유저는 기본 앱의 흰색 화면이 스크린에 표시되며 마치 버벅거리는 현상 처럼 느껴지게 된다. 

플러터 내부구조와 렌더링 원리에 대한 기술적 문제이다. 

-> 스플래시, 플러터 작동방식의 문제점 

https://intrepidgeeks.com/tutorial/use-flush-flush-native-splash-to-create-native-flash-memory-as-easily-as-uncle-bob

[Flutter] flutter_native_splash를 활용하여, 밥아저씨처럼 손쉽게 네이티브 스플래시 만들기

 

그러한 기술적 문제를 해결하기 위해 fluuter_native_splash 패키지를 택했다. (= 유명하고 주로 쓰는 방법)

->flutter_native_splash 적용방법

https://www.youtube.com/watch?v=Vn9azj7keCc

 

flutter_native_splash:

  color: "#ffffff"

  image: assets/logo-development.png

  branding: assets/branding-development.png

  color_dark: "#121212"

  image_dark: assets/logo-development.png

  branding_dark: assets/branding-development.png



  android_12:

    image: assets/logo-development.png

    icon_background_color: "#ffffff"

    image_dark: assets/logo-development.png

    icon_background_color_dark: "#121212"

 

이 패키지를 사용하는 방법은 위와 같은데 보면 image, color, 브랜딩 image 정도 스플래시로 사용할수 있어 보였다. 

또한 안드로이드 12 버전 이상부터는 스플래시를 구성하는게 새로운 방법으로 작동된다. 

 

따라서, 결정내리기를 안드 12버전 미만 & ios 에서는 image만 적용시켜 로고를 보여주게 했고 12버전 이상에서는 앱의 아이콘으로만 진행되게 선택했다. 

 

flutter_navtive_splash 사용방법 도움됐던글 

https://velog.io/@marksen/Flutter-flutter-native-splash%EB%A1%9C-splash-%ED%99%94%EB%A9%B4-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[Flutter] flutter native splash로 splash 화면 구현하기!