[ Flutter ] 시작화면(splash_screen) 만들기

안녕하세요 이번 글에서는 앱 실행 시 시작화면을 만들어 보겠습니다.

 

 

먼저 프로젝트 생성후 main.dart 파일을 열어 줍시다.

 

 

아래 사진 처럼 폴더를 생성한 다음 시작 화면에 사용할 이미지를 넣어 줍니다.

 

 

다음으로 이미지를 사용하기 위해서 pubspec.yaml 파일을 열어 아래처럼 코드를 작성한 다음 오른쪽 상단의 Pub get을  클릭하여 줍시다.

 

 

그다음 main.dart 파일을 열어 아래처럼 코딩하여 줍시다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}
 
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column( // 위젯을 넣을 컬럼 생성
        mainAxisAlignment: MainAxisAlignment.center,// mainAxisAlignment 사용하여 가운데로 위치를 맞춰준다
        children: [
          Image.asset(
            'asset/img/logo.png' // 미리 저장한 이미지 파일을 불러온다.
          ),
          CircularProgressIndicator( // 원형의 로딩바 를 생성
            color: Colors.black, // 로딩바 색상 변경
          )
        ],
      ),
    );
  }
}

 

이제 실행시켜 주면 아래처럼 이미지와 로딩바가 생성된 것을 확인할 수 있습니다.