[Flutter] Flutter앱 첫 로딩화면 flutter_native_splash로 간단하게 구현하기

앱을 처음킬때 로딩화면이 있으면 좋을것같아서 구현을 해보고자한다. 물론 모든걸 코드로 구현하면 좋겠지만... 나같은 초짜는 사실 좀 어렵게 느껴지던 와중에 flutter_native_splash라는 좋은 패키지가 있어서 이걸 사용하고자 한다.

 

일단 관련 패키지 사용법은 아래 링크를 통해서 자세하게 알수있다.

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

자기 flutter app에서 사용하는 방법은 다음과같이 진행한다.

 

• 먼저 pubspec.yaml 파일에 관련 패키지를 사용한다고 dependencies를 걸어준다. 추가로 관련 패키지를 사용하기 위해서는 sdk가 2.19.0 이상이여야 한다.

environment:
  sdk: '>=2.19.0 <3.0.0'
  
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_native_splash: ^2.3.1

만약에 SDK에러가 발생한다면, flutter upgrade로 flutter를 업그레이드 해주자!

 

• 프로젝트 root경로에 flutter_native_splash.yaml파일 생성

말그대로 위와같은 파일을 생성하고 내용은 아래 링크 내용을 복사해서 채워주자

https://pub.dev/packages/flutter_native_splash#1-setting-the-splash-screen

flutter_native_splash | Flutter Package

• 프로젝트 root경로에서 아래와 같은 명령어를 실행해준다

dart run flutter_native_splash:create

• main.dart에 아래와같은 코드를 추가해준다

import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    # 추가해야하는 부분
    FlutterNativeSplash.remove();
    ...