[ Flutter ] 앱 시작할때 나오는 로딩 화면 구현하기! (Splash Screen)

 

 배민이든, 넷플릭스 등 우리가 쓰고 있는 99%의 앱은 처음 실행하면 바로 메인 페이지가 나오지 않고, 위처럼 로고가 떠있는 화면을 지나서 들어가게 됩니다.

 이러한 화면이 필요한 이유는 단순히 로고 자랑을 하려고 보여준다기보다는, 여기에 머무는 동안 자동 로그인을 통해 데이터를 가져오거나, 보안과 관련되어 검사를 진행하는데 약간의 시간이 필요하기 때문입니다.

 혹은 경우에 따라서 서비스 점검을 위해 이 화면에서 더 이상 접근을 못하게 막는다던가 간단해 보이지만 상당히 의미있는 화면이라고 할 수 있습니다.

 이러한 화면을 Splash Screen이라고 합니다. 이번 포스팅에서는 이러한 SplashScreen을 구현하는 방법에 대해 알아보겠습니다.

반응형

---

화면 준비하기

 우선 SplashScreen이 될 화면을 준비해줍니다.

@override
  Widget build(BuildContext context) {
    final String imageLogoName = 'assets/images/public/PurpleLogo.svg';

    var screenHeight = MediaQuery.of(context).size.height;
    var screenWidth = MediaQuery.of(context).size.width;

    return WillPopScope(
      onWillPop: () async => false,
      child: MediaQuery(
        data: MediaQuery.of(context).copyWith(textScaleFactor:1.0),
        child: new Scaffold(
          backgroundColor: hexToColor('#6F22D2'),
          body: new Container(
            //height : MediaQuery.of(context).size.height,
            //color: kPrimaryColor,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: screenHeight * 0.384375),
                Container(
                  child: SvgPicture.asset(
                    imageLogoName,
                    width: screenWidth * 0.616666,
                    height: screenHeight * 0.0859375,
                  ),
                ),
                Expanded(child: SizedBox()),
                Align(
                  child: Text("© Copyright 2020, 내방니방(MRYR)",
                      style: TextStyle(
                        fontSize: screenWidth*( 14/360), color: Color.fromRGBO(255, 255, 255, 0.6),)
                  ),
                ),
                SizedBox( height: MediaQuery.of(context).size.height*0.0625,),
              ],
            ),

          ),
        ),
      ),
    );
  }

---

initState에 다음 화면으로 넘어가는 코드를 추가

 화면이 준비됐으면, 일정 시간 이후 다음 화면으로 넘어가는 코드를 추가해줍니다. 아래 코드는 1.5초 후에 자동으로 Navigate하는 코드입니다.

@override
  void initState() {
  	Timer(Duration(milliseconds: 1500), () {
                  Navigator.push(context, MaterialPageRoute(
                      builder: (context) => LoginMainScreen()
                  )
                  );
                });
  }

 다음은 구현된 결과입니다.

 

---

(응용) 특정 조건을 만족시키지 않으면 Navigate 막고 앱 종료하기

 앞서 말씀드린대로 SplashScreen에서는 상황에 따라, 서비스 점검이나 기타 사안들에 의해 더 이상이 Navigate를 막고 앱을 종료시켜야하는 경우도 있습니다. 이 또한 initState()에서 구현합니다.

@override
  void initState() {
  	Timer(Duration(milliseconds: 1500), () {
    		if(Condition){
					exit(0);
                }
                else{              
                      Navigator.push(context, MaterialPageRoute(
                      builder: (context) => LoginMainScreen()
                  )
                  );
                }
                });
  }