[ Flutter ] Splash Screen 만들기

앱을 구동시키면 뜨는 첫 화면으로, 주로 브랜드의 포인트 컬러를 배경으로 두고 로고를 중앙에 띄우는 형식으로 만들어진다. 첫 화면을 그냥 메인 페이지로 만들려 했는데 이왕 플러터 쓰는 거 완성도 높은 앱 UI를 만들어 보고 싶어 져서  스플래시 스크린부터 만들기로 결정했다. 그리고 메인 페이지보다 만들기가 훨씬 쉬워서 만들면서 전반적으로 코드를 공부하기 좋을 거 같기도 했다ㅎㅎ. 자 그럼 거두절미하고 본론 시작.

---

SplashScreen()

스플래시 화면은 상태의 변화를 즉각적으로 사용자가 확인할 필요 없는 화면이므로 stless로 작성했다.
어플의 로고만 띄우는 것이 아닌 이미지까지 같이 하고 싶었기에 적당한 배경 이미지 사진을 찾아 컨테이너의 배경으로 넣은뒤 자식 위젯으로 로고 이미지를 넣었다.

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

  @override
  Widget build(BuildContext context) {

    Timer(Duration(seconds:5 ), () {   // 3초후 자동으로 로그인 화면으로 넘어감
      Navigator.push(context, CustomRoute(builder: (context) => Login()));
    });

    final String backgroundIMG = 'assets/image/배경1.jpg';
    final String logoIMG = 'assets/image/로고.png';

    return Scaffold(
      resizeToAvoidBottomInset: false,
      body: SizedBox(
          child:Container(
              width: double.infinity,
              height: double.infinity,
              decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage(backgroundIMG),
                  )
              ),
              child: Center(
                child: Container(
                  child:Image.asset(logoIMG, width: 110,height: 110,),
                )
              )
          )//배경
      ),
    );
  }
}

화면의 UI를 짜는 게 처음엔 어려웠으나, 하다 보니 이해가 돼서 괜찮았다. 역시 코딩은 개념보단 바로 실전 부딪히기가 짱.,,

스플래시 화면에서 마주한 문제는 UI를 짜는 것이 아닌 자동으로 화면 전환을 시키는 것이었다.
아무리 구글링을 해봐도 버튼을 눌러 화면 전환시키는 것만 나오고 자동으로 화면을 전환시키는 것은 나오지 않았다.
그래도 포기하지 않고 계속 찾아본 결과 단 하나의 포스팅을 찾았고 그걸 내가 짠 코드에 맞게 변환하는 게 쉽지 않았다.
위의 코드는 자동 전환 + 전환 애니메이션까지 넣은 코드이다. 
애니메이션 또한 버튼 입력을 통한 전환에서의 코드는 많았지만 자동 전환 시 애니메이션을 적용시켜주는 코드를 못 찾았고 결국  MaterialPageRoute를 상속해서 나의 CustomRoute를 만들어 아예 전환할 때 애니메이션이 자동으로 적용되도록 했다.

class CustomRoute<T> extends MaterialPageRoute<T> {
  CustomRoute({ required WidgetBuilder builder, RouteSettings? settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    if (settings.name=='/')
      return child;

    return FadeTransition(opacity: animation, child: child);
  }
}

 

앱의 로딩 화면 만드는 데에도 반나절을 썼는데 메인화면은 언제 만드나 걱정이다..ㅜㅜ
코드를 짜기 전에 일단 노트에 대략적인 디자인을 그려두고 해야 할 거 같다.