[Flutter] Splash화면 만들기

화면에 넣을 이미지 설정하기 

 

pubspec.yaml 코드에 이미지 파일이 들어있는 경로를 추가

 

폰트도 추가 

 

이미지 로고는 일단 flation에서 적당히 가지고 옴 

https://www.flaticon.com/

Free Icons and Stickers - Millions of images to download

 

asset/img/폴더 안에 이미지 넣은 후 해당 위젯으로 가지고 옴 

Image.asset('asset/img/logo.png'),

 

폰트 적용은 main에서 전체 적용으로 

 

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        fontFamily: 'Spoqa',
      ),
      home: SplashScreen(),
    ),
  );
}

 

 

스플래쉬 화면은 처음 보여준 후 다음 화면으로 자동 이동할 필요가 있음 

initState() 처리 안에 일정 시간이 지난 후 다음 화면으로 이동하도록 설정 

 

화면 넘길 때는 그냥 push가 아니라 pushAndRemoveUntil로 뒤로가기 버튼 누르면 그대로 종료되도록

push로 넘기면 뒤로가기 시 스플래쉬화면이 다시 나와버림 

@override
void initState() {
  super.initState();
  // 2초 뒤에 로그인 화면으로 이동
  Timer(
    Duration(milliseconds: 3000),
    () {
      // pushAndRemoveUntil -> 그냥 push면 취소버튼 누를 때 스플래쉬 화면 나옴
      Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(
          builder: (_) => LoginScreen(),
        ),
        (route) => false,
      );
    },
  );
}

 

 

간단하게 화면 만들고 다음 화면 넘기기 가능

 

전체 코드 

https://github.com/suhyun96/language-app