Splash

앱 개발을 할때에 가장 기본이 되는 스크린이 바로 스플래시를 보여주는 스크린일 것이다.
스플래시의 기능은 보통 스플래시 스크린을 띄우는 동안 사용자의 정보를 체크하거나 초기 데이터 세팅을 위해서 짧게는 1초 이내에서 길게는 3초 정도의 화면을 보여주는 것을 말한다.

간단하게 스플래시 스크린을 구동하는 방법에 대해서 작성하겠다.

AuthProvider()

상태 값 변수로 isSplash를 초기 값 true로 생성한다.
AuthProvider는 앱 실행시 가장 먼저 인스턴스화를 하는 상태이므로 즉시 checked(); 함수를 호출하여 스플래시의 딜레이를 넣어주면 된다.

여기서는 3초간의 딜레이를 사용하여 간단하게만 구성하였다.
3초가 지나면 isSplash = false; 값으로 변경하고 상태 변경에 대한 알림을 호출하여 준다.

  bool isSplash = true;
  
   AuthProvider() {
    checked();
  }
  
 void checked() {
    Future.delayed(const Duration(milliseconds: 3000), () {
      isSplash = false;
      notifyListeners();
    });
  }

App()

isSplash가 true일 경우 스플래시 스크린을 띄어주고 false일 경우 홈으로 진입하게 해주면 된다.

 return Consumer<AuthProvider>(
      builder: (context, provider, child) {
        if (provider.isSplash) {
          return const SplashScreen();
        } else {
          return const HomeScreen();
        }
      },
    );