[Flutter Dev] 애니메이션 Splash / Intro 화면 전환 만들기 - AnimatedSwitcher

우리는 앱을 개발하면서 인트로 화면을 만들게 됩니다.

앱 시작시에 서비스에 필요한 버전 체크나 사용자 정보, 서비스 정보 등등을 수집 및 체크를 하게 됩니다.

위의 작업이 완료되면 서비스 화면으로 전환을 하는데, 이때 좀더 자연스럽게 전환을 하여 사용자에게 좀더 나은 UX 경험을 목표로 합니다.

 

이번 게시물은 이와같은 인트로 화면에서 애니메이션을 통해서 자연스럽게 서비스 화면으로 넘어가는 기능을 구현하도록 하겠습니다.

 

 

AnimatedSwitcher

 

 

 

이번 개발의 핵심 위젯으로, 화면 전환시 애니메이션을 담당합니다.

다양하게 사용할수 있는 위젯이지만, 이번 게시물은 AnimatedSwitcher에 대한 글이 아니므로 간략하게 사용하고 넘어가겠습니다.

 

개발 코드는 기존 게시물에서 사용했던 프로젝트에 추가 구현 합니다.

프로젝트 Github 소스 코드는 게시물 맨 하단 링크를 확인해 주세요.

 

---

 

1. 인트로 화면을 만들어줍니다.

별도의 파일(intro_screen.dart)을 생성하고 화면 가운데 "Intro Screen" 이라고 텍스트를 표시하는 화면입니다.

 

import 'package:flutter/material.dart';

class IntroScreen extends StatelessWidget {
  const IntroScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.lightBlueAccent,
      body: Center(
        child: Text(
          "Intro Screen",
          style: TextStyle(fontSize: 30, color: Colors.white),
        ),
      ),
    );
  }
}

 

---

 

 

2. 기존에 main.dart에 있던 MyHomePage 클래스를 별도의 파일(main_screen.dart)로 분리 시킵니다.

 

이제 main.dart에 인트로 화면을 표시하고, 인트로 화면에서 작업이 완료되면 서비스 화면인 MyHomePage 화면으로 AnimatedSwitcher를 이용하여 자연스럽게 전환되는 것을 구현하겠습니다.

 

3. main.dart 파일에 아래 코드와 같이 추가합니다.

 

return MaterialApp(
  ...
  home: FutureBuilder(
    future: Future.delayed(const Duration(seconds: 3), () => "Intro Completed."),
    builder: (context, snapshot) {
      return AnimatedSwitcher(
          duration: const Duration(milliseconds: 1000),
          child: _splashLoadingWidget(snapshot)
      );
    },
  )
);



Widget _splashLoadingWidget(AsyncSnapshot<Object?> snapshot) {
    if(snapshot.hasError) {
      return const Text("Error!!");
    } else if(snapshot.hasData) {
      return const MyHomePage(title: 'Flutter Demo Home Page');
    } else {
      return const IntroScreen();
    }
  }

 

FutureBuilder는 인트로 화면의 처리 프로세서입니다.

(원래는 서버에 데이터를 요청하거나 처리하는 로직이 들어가야 겠지만, 샘플에서는 그런 내용이 없으므로 delay 3초로 처리했습니다.)

FutureBuider의 future 속성에 delay로 3초를 주었고, 3초후에 snapshot로 "Intro Completed." 가 전달됩니다.

위와 같이 하고 실행을 하면, 처음엔 snapshot가 빈값으로 전달(snapshot.hasData == false)이 되어 인트로 화면이 보여지게 됩니다.

그리고, 3초후에 "Intro Completed." snapshot으로 전달(snapshot.hasData == true)이 되면서 MyHomePage가 보여지게 됩니다.

 

이때, 중간에 AnimatedSwitcher가 있고, duration 속성으로 1초를 주었습니다. 이와같이 하면 1초의 시간으로 fadein 애니메이션이 적용이되어 화면 전환이 이루어 집니다.

 

---

 

 

무척 쉽죠?!

위와 같이하고 실행을 해보면, 인트로 화면에서 서비스 화면으로 자연스럽게 넘어가는데.......

 

 

처음 앱실행할때 흰색 화면이 보이는데요????

 

 

 

그쵸?! 그 화면이 참 보기가 싫습니다.

그 화면은 flutter sdk가 로드되는 시간입니다.

안드로이드나 ios에서는 splash 화면에서 해당 로드를 합니다.

따라서, 각각의 플랫폼에 스플래시 화면을 수정해주면 해결할 수 있습니다.

 

전 안드로이드도 잘 모르고, iOS도 잘 모르는데요?

 

맞습니다. 우린 flutter 개발자잖아요?!

그래서 https://pub.dev/ 에 우리에게 꼭 맞는 라이브러리가 있습니다.

 

4. 위의 사이트에서 "flutter_native_splash" 라고 검색을 해봅니다.

검색결과 맨 상위에 믿을만한 평점을 가진 녀석이 나올겁니다.

 

 

5. 상세화면으로 들어가서, Readme 잠깐 읽어주고, Installing 탭으로 이동합니다.

pubspec.yaml 파일 dependencies 항목에 아래와 같이 추가해주고, Pub get을 해줍니다. 

 

dependencies:
  ...
  flutter_native_splash: ^1.3.3

 

Pub get을 하고 정상적으로 완료가 되면 6번으로 넘어가시기 바랍니다.

저는 아래와 같이 에러가 발생했습니다.

 

 

에러의 내용은 추가한 라이브러리와 Dart SDK version 이 맞지 않다는 이슈입니다.

 

5-1. flutter 를 최신버전으로 업그레이드를 합니다.

터미널에서 flutter --version을 입력하여 버전을 다시 한번 확인후에, flutter upgrade 를 입력하여 업그레이드를 진행합니다.

 

 

업그레이드가 완료된 화면에서 버전에 올라갔음을 확인할 수 있습니다.

 

 

5-2. 다시 Pub get 을 실행하여 정상적으로 라이브러리를 가져왔음을 확인합니다.

 

 

---

 

 

6. 이제 flutter_native_splash 를 사용할 차례입니다.

다시 pub.dev 사이트에서 flutter_native_splash 의 Readme를 천천히 정독을 해봅니다.

음.. pubspec.yaml 파일에도 뭘 추가하고.. 터미널에서 뭔가를 실행해야....

 

일단 저는 인트로 화면과 동일한 색상을 적용하여 스플래시 화면과 인트로 화면이 하나인것처럼 만들 생각입니다.

pubspec.yaml 파일에 추가하는 것을 먼저 해보겠습니다.

 

flutter_native_splash:
  color: "40C4FF"

 

가이드의 있는 내용을 복붙을 하고, 그중에서 필요한 부분이 color 값만 설정하였습니다.

 

7. 그리고, 프로젝트의 터미널에 flutter pub run flutter_native_splash:create 를 입력하고 엔터

프로젝트의 터미널은 안드로이드 스튜디오 하단에 Terminal 이라고 있습니다. 이를 선택하면 터미널 창이 열리고 프롬프트가 보일겁니다. 여기에 위의 명령어를 입력하시면 됩니다.

 

 

뭔가를 처리를하고, 따봉(👍)을 날려주네요. 성공한 것 같습니다.ㅎㅎ

 

성공을 했으니, 이제 실행을 해볼까요!!

 

 

 

 

---

 

 

이렇게 해서 구현을 완료하였습니다.

 

전체 소스코드는 아래 Github 링크를 확인해주세요.

GitHub - rcbuilders/FlutterSampleApp: flutter study sample project