flutter 앱 로딩 처리: splash (부제: 스플래시 with 그림판)

 

* 그림판으로 splash 이미지 만들기

그림판으로 splash 이미지 만들고 적용을 해보자

 

1. 그림을 넣기보다는 이쁜 폰트로 앱 이름만 적는 걸로 승부하자.

(눈금을 켜놓으면 그나마 가운데 정렬하기가 용이하다. 1024x1024 정도면 되겠지?)

- 요놈은 splash.png로 이름을 정해주자 (나중에 이름 그대로 사용)

 

2. 다 만들고 그림판 전체선택(ctrl+a) > 마우스 우 클릭 > 색 반전을 선택하면 dark 모드까지 만들 수 있다

- 요놈은 splash-invert.png로 이름 짓도록 하자

 

 

---

 

* 스플래시 적용하기

 

공식 가이드로 제공은 하지만...

flutter.dev/docs/development/ui/advanced/splash-screen

Adding a splash screen to your mobile app

 

역시나 위 가이드대로 처리해주는 패키지가 있다

pub.dev/packages/flutter_native_splash

flutter_native_splash | Dart Package

README에 너무 설명이 잘 나와있어서 간략하게만 정리하도록 하자

1. pubspec.yaml (pub get은 당연히 해주고)

dev_dependencies:
  flutter_test:
    sdk: flutter
  # 짜라란
  flutter_native_splash: ^1.1.8+4
  
  # To add assets to your application, add an assets section, like this:
  # assets에 splash 이미지들 넣을꺼니 아래 부분도 수정하자
  assets:
    - assets/  

2. 이전에 만들었던 splash.png, splash-invert.png 파일을 복사해오자

3. flutter_native_splash.yaml 파일을 만든다

- pubspec.yaml에 넣을수도 있지만 보기 편하게 따로 관리하자

- README.md 내용 그대로 복사해서 붙이고 아래 부분만 변경을 하자

flutter_native_splash:
  color: "#42a5f5"
  #background_image: "assets/background.png"
  image: assets/splash.png

  color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png

4. 이제 만들어주자

# flutter pub run flutter_native_splash:create

5. 다 됐을것 같지만 아직이다.

여기까지는 native 프로그램 실행까지의 splash라면

앱 시작 후 로딩 중에 표시 할 splash도 만들도록 하자

- 앱 시작 후 초기화, 리소스 불러오기 등을 처리하는 동안 보여 줄 화면

- 단순하게 CircularProgressIndicator정도만 추가해도, 사용자에게 처리 중을 알려주기에는 충분할 듯 하다

// 플러터 기본앱에 Splash 위젯처리하는 부분만 추가 한 예제

class Splash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.apartment_outlined,
          size: MediaQuery.of(context).size.width * 0.785,
        ),
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return MaterialApp(home: Splash());
        } else {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            home: MyHomePage(title: 'Flutter Demo Home Page'),
          );
        }
      },
    );
  }
}

---

* 결과 (1차시도)

으으윽... 배경색을 맞추고, 스테이터스 바도 없애야겠다

 

* 결과 (2차시도)

1. 배경색 맞추기

flutter_native_splash:
  # white로 맞춤
  color: "#ffffff"  
  #background_image: "assets/background.png"
  image: assets/splash.png

  # black으로 맞춤
  color_dark: "#000000"
  #background_image_dark: "assets/dark-background.png"
  image_dark: assets/splash-invert.png

  # 요놈은 스테이터스바 사용 X
  fullscreen: true

2. 스테이터스바 없애려면 코드상에서도 처리가 필요하다

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays(
      [SystemUiOverlay.bottom, SystemUiOverlay.top]);
  runApp(MyApp());
}

3. 결과

- 네이티브 스플래시

좌: light, 우: dark

- 앱 구동 후 스플래시

(앱 시작 후 현재 테마 확인해서 light/dark 처리하면 되겠다)