앱의 첫인상을 결정하는 화면은 무엇일까요? 바로 사용자가 앱을 실행했을 때 가장 먼저 마주하는 ‘스플래시 화면(Splash Screen)’입니다. 로딩 시간 동안 잠시 노출되는 이 화면은 앱의 정체성을 보여주는 로고나 브랜드를 각인시키는 중요한 역할을 합니다.
이번 포스트에서는 Flutter의 기본적인 위젯들을 활용하여 간단하면서도 멋진 스플래시 화면을 구현하는 과정을 차근차근 따라가 보겠습니다. 개발 환경은 안드로이드 스튜디오(Android Studio)를 기준으로 진행합니다.
1단계: Flutter 프로젝트 생성하기
가장 먼저, 우리의 스플래시 화면을 담을 새 프로젝트를 생성합니다.
- 안드로이드 스튜디오에서 [New Flutter Project] 버튼을 클릭하여 프로젝트 생성을 시작합니다.
- 만약 처음 프로젝트를 생성하여 Flutter SDK 경로를 설정해야 한다면, 터미널(또는 CMD)에
flutter doctor -v명령어를 입력하세요. 출력된 결과의 첫 부분에서 SDK 경로를 쉽게 찾을 수 있습니다.
2단계: 앱의 시작점과 위젯 클래스 선언하기
모든 Flutter 앱의 시작점인 main() 함수와 스플래시 화면을 담을 SplashScreen 클래스의 기본 틀을 만듭니다.
main(): 앱이 가장 먼저 실행하는 함수입니다.runApp(): Flutter에 어떤 위젯을 앱의 루트(최상위) 위젯으로 실행할지 알려줍니다.SplashScreen: 우리가 만들 화면의 클래스 이름입니다.StatelessWidget: 내용이 변하지 않는 정적인 화면을 만들 때 상속받는 클래스입니다.
import 'package:flutter/material.dart';
// 1. 앱의 시작점
void main() {
// 2. SplashScreen 위젯을 앱의 첫 화면으로 실행
runApp(SplashScreen());
}
// 3. StatelessWidget을 상속받는 클래스 선언
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 4. 아직 화면 내용이 비어있음 (곧 채울 예정)
return Container();
}
}
3단계: 화면의 기본 뼈대 구성하기 (MaterialApp, Scaffold)
이제 비어있는 SplashScreen 위젯에 실제 화면을 그릴 수 있는 기본 뼈대를 추가합니다.
MaterialApp: 머티리얼 디자인 앱을 만드는 데 필요한 기본적인 설정과 구조를 제공하는 최상위 위젯입니다.Scaffold: 화면의 구조를 잡아주는 뼈대 위젯입니다.body속성에 실제 화면에 표시될 내용을 넣습니다.
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 1. 머티리얼 디자인 앱으로 감싸기
return MaterialApp(
// 2. 화면의 기본 구조(뼈대) 설정
home: Scaffold(
// 3. 화면의 본문에 해당하는 영역
body: Container( // 아직은 비어있는 Container
color: Colors.white, // 임시로 흰색 배경 지정
),
),
);
}
}
4단계: 배경색과 세로 레이아웃 배치하기 (Container, Column)
본문 영역(body)을 Container 위젯으로 꾸미고, 여러 위젯을 세로로 배치하기 위해 Column 위젯을 추가합니다.
Container:decoration속성을 사용해 배경색, 테두리 등 다양한 스타일을 적용할 수 있습니다.Column:children이라는 리스트(List) 안에 여러 위젯을 넣어 세로 방향으로 차례대로 배치합니다.mainAxisAlignment:Column의 주축(세로) 정렬 방식을 정합니다..center는 자식 위젯들을 세로 방향의 정중앙에 모아줍니다.
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
// 1. body를 Container로 감싸서 배경색 지정
body: Container(
decoration: BoxDecoration(
color: Colors.yellow,
),
// 2. 세로로 위젯을 배치하기 위한 Column 추가
child: Column(
// 3. 자식 위젯들을 세로 방향 중앙에 정렬
mainAxisAlignment: MainAxisAlignment.center,
// 4. children에 로고와 애니메이션을 추가할 예정
children: [],
),
),
),
);
}
}
5단계: 로고와 로딩 애니메이션 추가하기 (Image, CircularProgressIndicator)
비어있던 Column의 children에 로고 이미지와 로딩 애니메이션을 추가하여 화면을 최종적으로 완성합니다.
Image.asset(): 프로젝트assets폴더에 있는 이미지를 불러옵니다.SizedBox: 위젯 사이에 간격을 만들 때 사용하는 투명한 박스입니다.CircularProgressIndicator: 로딩 중임을 나타내는 원형 애니메이션입니다.Center:Column이 전체 화면을 차지하므로, 그 안의 자식들을 다시 한번 가로 방향 중앙으로 정렬하기 위해Center위젯을 사용할 수 있습니다.
lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.yellow,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
// 1. children 리스트에 위젯들 추가
children: [
Center( // 가로 방향 중앙 정렬
child: Image.asset(
'assets/flutter-logo.jpg',
width: 150,
),
),
SizedBox(height: 20.0), // 이미지와 로딩 바 사이 간격
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
Colors.white,
),
),
],
),
),
),
);
}
}
실행화면
이처럼 Flutter는 작은 위젯들을 조립하고 조합하여(Composition) 복잡한 화면을 만들어나가는 방식으로 UI를 구축합니다.
“We should be better for our children.” 👍
#플러터, #스플래시화면, #Flutter튜토리얼, #StatelessWidget, #Container, #플러터초보