[Flutter] Intro, Launcher 화면 생성하기

개발 환경

---------------------------------

OS : Mac

개발 툴 : android studio

개발 언어 : dart

---------------------------------

 

안녕하세요 전진시입니다.

이번 포스팅에서는 Flutter에서 Intro 화면을 생성할거에요

 

저는 일단 intro.dart 파일을 하나 생성했습니다.

 

화면 이동 구성은

** intro 화면 -> webView 화면으로 넘어가게 할거에요

 

 

1. Intro에 넣을 이미지 셋팅

이미지 파일 하나 구해서 assets 폴더 하나 생성하여 이미지 파일을 넣어주세요.

 

 

2. intro,dart 파일에 원하는 위치에 Timer 메서드를 넣어주세요.

저는 3초 후 이동하게 했고 initState()에 넣었습니다.

 

@override
void initState() {
  super.initState();
  Timer(const Duration(seconds:3), () {
    Navigator.push(context, MaterialPageRoute(builder: (context) => WebViewPage()));
  });
}

 

 

 

<전체 코드>

 

class IntroPage extends StatefulWidget {
  const IntroPage({Key? key}):super(key:key);

  @override
  State<IntroPage> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<IntroPage> {

  @override
  void initState() {
    super.initState();
    Timer(const Duration(seconds:3), () {
      Navigator.push(context, MaterialPageRoute(builder: (context) => WebViewPage()));
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children:[
              Container(
                  margin: const EdgeInsets.symmetric(horizontal:120),
                  child: Image.asset('assets/testImg.jpeg')
              ),
            ]
        ),
      ),
    );
  }
}