Flutter 에서의 splash screen 구현

0. 내용

• Splash screen 구현
  1. flutter_native_splash 이용
  2. 직접 구현

1. Splash screen 구현

1. flutter_native_splash 이용

구체적으로는 pub.dev에 기재된 내용임, 간단한 순서로는
① package 다운로드
② 설정파일(pubspec.yaml) 수정 및 이미지 적용
③ run the package

1. package 다운로드

   • Run this command

     $ flutter pub add flutter_native_splash

   • pubspec.yaml 내의 dependencies 확인

     # pubspec.yaml 내 dependencies    
     dependencies:
       flutter_native_splash: ^2.2.17

2. 설정파일(pubspec.yaml) 수정 및 이미지 적용

   • pubspec.yaml 내용수정
     ※ flutter_native_splash.yaml 를 만들어서 설정하는 것도 가능

       # pubspec.yaml 설정을 추가 
       flutter_native_splash:
         fullscreen: true
         image: assets/flutter_logo.png
         color: '#FFFFFF'
         android: true
         ios: true
         web: false
     
         android_12:
           color: '#000000'
           image: assets/flutter_logo.png

   • 로고 이미지 생성 및 추가
     - assets 생성 및 하위에 이미지 추가
     - pubspec.yaml 내 assets 설정수정

     # pubspec.yaml 내 assets설정 수정 
     flutter:
       assets:
         - assets/

     ※ flutter.dev 내의 이미지를 이용

3. 실행 및 확인

   • pubspec.yaml 설정의 경우

     $ flutter pub run flutter_native_splash:create

   • flutter_native_splash.yaml 을 신규작성한 경우

     $ flutter pub run flutter_native_splash:create -- path="flutter_native_splash.yaml 경로"

   • 확인 (좌: API Lv.28, 우: API Lv.33)

   • 이슈사항

   • Android 12 에서 발생하는 이슈사항으로 패키지 적용후
     처음 App기동시에는 이미지가 보이지 않으나, 그 이후부터는 제대로 표시됨.
     github repository 내의 issues 확인
     → API Lv.31~32에서는 이슈사항과 동일함 확인, But Lv.33에는 제대로 동작

2. 직접 코드로 구현

1. splash_screen 화면 작성

   // lib/splash_screen.dart
   class SplashScreen extends StatefullWidget {
     @override
     state<SplashScreen> createState() => _SplashScreenState();
   }
   
   class _SplashScreenState extends State<SplashScreen> {
     @override
     void initState() {
       super.initState();
       
       Timer(const Duration(milliseconds: 3000), () =>
         Navigator.pushReplacement(context, 
           MaterialPageRoute(builder: (context) => 
             const MyHomePage(title: 'Flutter Demo Home Page')
           )
         )
       );  // Timer
     }
     
     @override
     Widget build(BuildContext context) {
       // Building the splash screen here 
      return const Scaffold(
        appBar: null,
        body: Center(
          child: Text('Splash Screen')
        )
      );
    }
   }

2. main.dart 내의 내용 수정

   // lib/main.dart
   
   class MyApp extends StatelessWidget {
     @override
     Widget Build(BuildContext context) {
       return MaterialApp(
         title: 'Flutter Demo',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: const SplashScreen()
       );
     }
   }

3. 이슈사항

   • android 시작화면이 flutter가 그리는 첫화면보다 먼저나오는 현상

2. References

• flutter_native_splash in pub.dev
• animated_splash_screen in pub.dev