롤 명함 앱 만들기#4-Intro

LOLCard앱을 만드는 것을 마무리한다고 블로그에 글을 쓸 생각을 못했다.

 

#4부터는 구현한 기능에 대해서 정리를 할 것인데, flutter프로젝트를 만들면 기본적으로 뜨는 main.dart의

소스를 이해한다고 가장하고 설명을 진행한다.

 

 

Intro

카카X톡이나, 네X버 같은 스마트폰 앱을 실행시키면 각 앱의 로고가 뜨면서 0.5~1초 정도 인트로가 뜬다.

 

이 인트로가 뜨는 이유는 물론 앱의 로고를 노출시키려는 의도도 있지만,

스마트폰에서 앱을 실행시키기 까지의 시간을 빈 화면을 보여줄 수는 없으니 인트로 화면을 띄운다 라는 이유도 있다.

 

인트로가 뜨는 기능을 구현하기 위해서는 우선 인트로 화면 이미지가 필요하다.

 

이미지는 미리캔버스라는 사이트를 이용했다.

왜냐하면 다른건 다 제처 두고, 상업적 이용 가능 + 무료이기 때문이다. ㅎㅎ

 

https://www.miricanvas.com/design

디자인 플랫폼 미리캔버스

 

위의 링크에 들어가서 원하는 대로 인트로에 사용할 이미지를 만들면 된다.

이미지의 사이즈(가로x세로)는 1080x2400이나 1080x1920으로 하는 게 좋다.(스마트폰 사이즈로)

 

내가 만든 인트로용 이미지

나는 로고보단 그냥 앱 이름을 넣는게 더 멋져 보여서 이렇게 만들었다.

 

다음은 앱에 인트로 기능을 넣어보자.

 

https://pub.dev/packages/flutter_native_splash

flutter_native_splash | Flutter Package

flutter에는 인트로 기능을 구현하는 flutter_native_splash라는 라이브러리가 존재한다. 

사용하기 매우 편하니 이것을 사용하자.

 

위의 README를 읽으면 바로 사용이 가능하지만, 사용법을 간략하게 요약해봤다.

 

우선 dependencies에 flutter_native_splash를 추가하고,

dependencies:
  flutter_native_splash: ^2.2.16

 

flutter_native_splash.yaml파일을 새로 만들고, 아래의 내용을 채운다.

flutter_native_splash:
  background_image: "your intro image path"

 

그 후에 아래 명령어를 터미널에서 실행한다.

flutter pub run flutter_native_splash:create

 

그리고 앱 실행을 하는 main함수 부분에, 아래와 같이 소스를 추가한다.

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding); //인트로 시작
  runApp(const MyApp()); //앱 실행
  sleep(const Duration(seconds:1)); //인트로 최소 유지시간 보장
  FlutterNativeSplash.remove(); //인트로 종료


}

인트로 최소 유지시간을 보장하기 위해 sleep함수를 넣었다.

왜냐하면 실행이 오래 걸리지 않는 앱같은 경우는 인트로가 보이지도 않고 바로 인트로가 종료되기 때문이다.

 

여기까지 하고, 앱을 실행시켜 보면 인트로가 뜨는 것을 볼 수 있다.

LOLCard의 인트로

 

(보면 인트로 시간이 좀 길다고 느낄 수 있는데, 실제 스마트폰에서 실행하면 딱 1초 정도만 머물고 넘어간다.

Android Emulator와 실제 스마트폰의 실행 속도 차이 때문인 것 같다.)

 

이렇게 인트로는 구현이 끝났다.