[Flutter] Splash Screen(앱 시작 화면) 만들기

[Flutter] Splash Screen(앱 시작 화면) 만들기

 

우선 flutter_native_splash 패키지를 설치한다.

 

flutter pub add flutter_native_splash

 

패키지 설치 후 pubspec.yaml 파일에 설정값을 입력하거나

flutter_native_splash.yaml 파일을 만들어서 설정값을 입력해도 된다.

 

flutter_native_splash:
	color: "#ffffff"
    image: assets/images/logo.png
    
    # 안드로이드12버전 이상은 따로 설정 해줘야 한다.
    android_12:
    	image: assets/images/android12_log.png
    
    # 그 외에 빌드 환경별로 설정 할 수 있다.
    # image는 가운데 앱 로고, brand_image는 하단 브랜드 로고이다.
    
    #color_android: "#42a5f5"
    #color_dark_android: "#042a49"
    #color_ios: "#42a5f5"
    #color_dark_ios: "#042a49"
    #color_web: "#42a5f5"
    #color_dark_web: "#042a49"
    #image_android: assets/splash-android.png
    #image_dark_android: assets/splash-invert-android.png
    #image_ios: assets/splash-ios.png
    #image_dark_ios: assets/splash-invert-ios.png
    #image_web: assets/splash-web.gif
    #image_dark_web: assets/splash-invert-web.gif
    #background_image_android: "assets/background-android.png"
    #background_image_dark_android: "assets/dark-background-android.png"
    #background_image_ios: "assets/background-ios.png"
    #background_image_dark_ios: "assets/dark-background-ios.png"
    #background_image_web: "assets/background-web.png"
    #background_image_dark_web: "assets/dark-background-web.png"
    #branding_android: images/logo.png
    #branding_dark_android: assets/dart_dark-android.png
    #branding_ios: assets/brand-ios.png
    #branding_dark_ios: assets/dart_dark-ios.png
    #branding_web: assets/images/logo.png
    #branding_dark_web: assets/dart_dark-web.gif

 

설정이 완료됐다면 콘솔(커맨드라인)에서 설정내용을 적용해줘야한다.

 

dart run flutter_native_splash:create

// 설정 파일을 별도로 사용했다면 파일 경로를 인자로 입력해줘야 한다.
dart run flutter_native_splash:create --path=flutter_native_splash.yaml

// 설정값을 지우는 명령어
dart run flutter_native_splash:remove

 

다음은 앱 코드에 Splash Screen 코드를 추가한다.

 

void main() {
  var widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
  
  // Splash Screen은 자동으로 사라지지 않는다.
  // 앱이 실행된 후 Splash Screen이 사라지길 원하는 시점에 아래 코드를 추가하자.
  // FlutterNativeSplash.remove();
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash screen sample',
      theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true
      ),
      home: HomeScreen(),
    );
  }
}

 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter package