[Flutter] 스플래쉬(splash) 화면 설정하기

완성된 스플래쉬 화면

 

**준비물 

1. 스플래쉬 화면에 삽입할 이미지 1개 

 

 

 

프로세스 

HomeScreen이 나오기 전, Splash Screen이 첫 화면으로 나오도록 설정. 

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

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance?.addPostFrameCallback((_) {
      Future.delayed(Duration(seconds: 3), () {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => HomeScreen(),
          ),
        );
      });
    });
    
    return Scaffold(
      body: Stack(
        children: [
          Positioned.fill(
            child: Image.asset(
              '스플래쉬 이미지가 있는 경로 넣어주세욤', 
              fit: BoxFit.cover, // 이미지가 컨테이너에 꽉 차도록 설정
            ),
          ),
          Center(
            child: CircularProgressIndicator( //뱅글뱅글 돌아가는 로딩 넣어주는 설정
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }
}