Flutter 1. ToDo 앱 만들기. (1) 스플래시 시작화면 구성하기.

Flutter로 간단한 ToDo앱을 만들어보는 프로젝트입니다.

 

처음 시작화면 구성부터 내용 추가, 삭제, 검색 기능을 메소드로 구현해 보겠습니다.

 

이 편은 스플래시 시작화면 구성하는 방법을 설명합니다.

 

이 프로젝트는 macOS 에서 VScode를 사용했스며, iPhone 14 Pro Max 시뮬레이터를 사용했습니다.

 

github : https://github.com/tjdwns4712/flutterToDoApp

 

깃허브에서 프로젝트 전체 소스코드를 확인할 수 있습니다.

 

 

1. 스플래시란?

 

앱을 시작할 때 나타나는 화면으로 주로 앱의 로고를 보여주는 형태로 나타납니다.

 

앱을 실핼할 때 발생하는 로딩시간동안 보여주는 화면이기도 합니다.

 

아래와 같이 구현됩니다.

 

 

 

 

2. main.dart 

 

 

void main() {
  runApp(const ToDo());
}

class ToDo extends StatelessWidget {
  const ToDo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'To ',
      initialRoute: '/',
      routes: {
        '/': (context) => const startSplashpage(), // 시작 실행화면
        '/bottomBarpage': (context) => const bottomBarpage(), // 하단바
      },
    );
  }
}

main.dart입니다. 

 

여기선 동적 요소가 없으므로 StatelessWidget를 사용합니다.

 

main에서는 MatreialApp를 옵션을 붙여 리턴하는 역할을 합니다.

 

리턴을 한다는 것은 해당 페이지를 불러온다는 의미입니다.

 

main은 해당 페이지라는 방에 들어가기 위한 복도같은 역할을 한다고 보면 되겠습니다.

 

initialRoute는 앱 실행 시 첫 번째로 보이는 화면입니다.

여기선 아래에서 지정한 '/'를 첫 번째 화면으로 지정했습니다.

 

routes에는 여러 화면으로 이동 할 루트를 넣을 수 있습니다. 위에서는 

'/'은 startSplashpage라는 파일로 이동하게 됩니다.

'bottomBarpage'는 bottomBarpage라는 파일로 이동하게 됩니다.

 

이렇게 설정한다면 앱을 실행하면 startSplashpage화면이 바로 보이게 되도록 설정한 것입니다.

 

이렇게 처음보이는 화면을 활용하여 스플래시를 구현할 수 있습니다.

 

 

3. startSplashpage.dart

class startSplashpage extends StatefulWidget {
  const startSplashpage({super.key});

  @override
  State<startSplashpage> createState() => _startSplashpageState();
}

class _startSplashpageState extends State<startSplashpage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              Text(
                'To Do',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 100,
                  fontWeight: FontWeight.w600,
                ),
              ),
            ],
          ),
        ));
  }

  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(milliseconds: 2000)).then(
      (value) {
        Navigator.pushReplacementNamed(context, '/bottomBarpage');
      },
    );
  }
}

main을 통해 앱을 시작할 경우 startSplashpage가 열리도록 설정했습니다.

 

그렇다면 startSplashpage에 어떤 화면이 보일지 설정해 주어야 할 것입니다.

 

이에 해당하는 설정은 startSplashpage.dart에서 진행화면 됩니다.

 

이 파일은 동적요소가 들어가 있으므로 statefulWidget를 사용합니다.

 

기본적인 구조 위젯인 Scaffold를 리턴합니다.

 

다음과 같은 화면을 디자인 할 것입니다.

 

바탕화면을 흰색으로 설정하기 위해 backgroundColor : colors.white로 설정합니다.

 

화면 가로 기준 가운데 위치하기 위해 Center위젯을 사용합니다.

 

Column에서 세로로 가운데 위치하도록 하기 위해 MainAxisAligment: MainAxisAligment.center로 설정합니다.

 

Text(

'To Do',

style: TextStyle(

color: Colors.black,

fontSize: 100,

fontWeight: FontWeight.w600,

),

 

넣을 글은 To Do로, 검은색, 사이즈는 100, 굵기는 w600으로 설정합니다.

 

화면 구성은 모두 끝났습니다.

이제 스플래시 기능을 구현해 보겠습니다.

 

 

현재까지는 시작한 후 startSplashpage.dart 화면을 실행하는 기능입니다.

여기에 몇초 후 다음 페이지로 넘어가는 기능을 추가해서 스플래시를 구현해 보겠습니다.

 

@override

void initState() {

super.initState();

    },

  );

}

 

위와 같이 initState를 만들어 줍니다. 이 안에 선언된 메소드는 시작시 가장 우선적으로 실행되게 됩니다.

 

Future.delayed(const Duration(milliseconds: 2000)).then(

(value) {

Navigator.pushReplacementNamed(context, '/bottomBarpage');

Future.delayed(const Duration(milliseconds: 2000))은 2000밀리 초를 기다리게 합니다.

이후 Navigator.pushReplacementNamed(context, '/bottomBarpage')를 실행합니다.

 

Navigator.pushReplacementNamed(context, '/bottomBarpage')은 main에서 설정한 '/bottomBarpage'로 이동하게 합니다

 

즉 위 메소드를 initState안에 넣으면 시작 후 startSplash.dart 으로 인해 위 이미지 화면이 보이고, 메소드로 인해 2초 후 bottomBarpage 화면으로 넘어가게 되며 스플래시를 구현합니다.

 

간단한 메소드로 스플래시를 구현하는 방법이었습니다.

 

다음 글에서는 bottomBar을 구현해 보겠습니다.