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

벨로그가 보기 편합니다.

😳 누구나 한번쯤 경험해봤던 '그 버벅거림'

https://images.velog.io/images/tmdgks2222/post/fef36b76-b99a-4b8c-8a37-fceff49bf591/splash_iphone_gif.gif

<위 영상은 Debug모드로 빌드되었습니다.>

void main() async {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.blue,
        ),
      ),
    );
  }
}

릴리즈모드로 빌드할땐 덜 하지만, 앱을 실행시킬 때 초반에 나오는 '그 버벅거림'이 있다.

main함수에서 Duration만으로 스플래시 화면을 적용하려하니 화면 전 흰 화면이 잠시 나오고, 이를 해결할 방법을 찾아야 했다.

flutter_native_splash | Flutter Package

<버전체크>

왜 버벅거리지?

이유는 플러터의 작동방식에 있다.

https://images.velog.io/images/tmdgks2222/post/3616abfd-4618-4517-a032-b4291c9f67ca/image.png

플러터는 앱이 실행될 때, 기본 앱 (네이티브 앱)이 플러터를 로드하는 동안 잠깐의 짧은 대기시간이 존재한다. 이 시간동안 기본 앱의 흰색 화면이 스크린에 표시되며, 마치 버벅거리는 것처럼 보인다.

(flutter의 자세한 내부구조와 렌더링 원리는 아래 블로그를 통해 확인할 수 있다.)

[Flutter] 01. 그 시작과 궁금증

버벅거리는 것 같은 화면을 방지하려면, 네이티브 어플 단에서 플러터가 화면에 rendering하기 전까지 splash화면을 보여주면 된다.

📦 flutter_native_splash