APP 로딩 시 잠시 보이게 되는 스플래시 스크린 구현을 해보자. 개발툴(IDE)은 안드로이드 스튜디오를 활용한다.
Flutter Project 생성
안드로이드 스튜디오에서 “New Flutter Project” 버튼을 클릭하여 프로젝트 생성 과정을 진행한다.
처음 Flutter 프로젝트를 생성하면 Flutter SDK 위치를 넣으라고 나오는데 위치를 잊었다면 “flutter doctor -v” 명령으로 알 수 있다.
SplashScreen 클래스 작성
APP 로딩 시 잠시 보일 화면이기 때문에, 위젯 자체에서 다시 렌더링을 실행시킬 수 있는 스테이트풀(Stateful) 위젯보다 위젯 자체적으로 다시 렌더링할 수 없는 스테이트리스(Stateless) 위젯으로 구현한다.
1. 간단한 텍스트를 출력하는 StatelessWidget 클래스 기본 틀 만들기
우선, 가운데에 “Splash Screen”이라는 Text를 출력하는 ‘SplashScreen’이라는 이름의 클래스를 main.dart 파일에 작성한다.
/lib/main.dart
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget { // 1. StatelessWidget 상속
@override
Widget build(BuildContext context) { // 2. 화면을 구성하는 build 오버라이딩 함수 구현
return MaterialApp( // 3. 머티리얼 디자인 위젯
home: Scaffold( // 4. 위젯의 뼈대를 의미하는 'Scaffold'
body: Center( // 5. 가운데 정렬 위젯
child: Text('Splash Screen'), // 6. 텍스트 위젯
),
),
);
}
}- StatelessWidget이라는 클래스를 상속받아 내가 구현하려 하는 ‘SplashScreen’이라는 이름의 클래스를 선언하였다.
- 상속된 StatelessWidget의 실제 화면을 그려주는 ‘build’ 함수를 오버라이드 하여 구현한다.
- iOS 디자인은 ‘Cupertino’이며 Android 디자인은 ‘Material’이다. 안드로이드 디자인인 ‘Material’을 선택하였다.
- Scaffold는 화면을 구성하는 ‘틀’이라고 생각하면 된다.
- 플러터에서 가운데 정렬을 해주는 위젯으로 많이 쓰이는 위젯이다.
- 문자열을 출력해 주는 텍스트 위젯이다.
2. 배경색 변경과 로고와 로딩 애니메이션 삽입
Container 위젯을 활용한 배경색 변경과 이미지 위젯을 활용하여 로고를 삽입해 보자.
/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( // 1. 배경색을 위한 BoxDecoration 위젯
color: Colors.yellow,
),
child: SafeArea( // 2. 폰의 기본 영역을 침해하지 않는 하에서의 전체 영역
child: Column( // 3. 영역을 수평으로 나누어 주는 위젯 (행이라고 생각하면 된다)
mainAxisAlignment: MainAxisAlignment.center, // 3-1. Column 위젯의 기본 정렬 방향
children: [
Center(
// child: Text('Splash Screen'),
child: Image.asset( // 4. Image 위젯
'assets/flutter-logo.jpg',
),
),
SizedBox(
height: 20.0,
),
CircularProgressIndicator( // 5. Windows의 Waiting Cursor 같은 것
valueColor: AlwaysStoppedAnimation(
Colors.white,
),
),
],
),
),
),
),
);
}
}
- 배경색을 변경하기 위한 위젯으로 Scaffold 바로 아래에 위치하여 전체 배경색을 변경하였다.
- 폰의 시계, 상태(와이파이, 배터리 등) 표시 영역을 침해하지 않는 범위의 영역 위젯.
- 매트릭스의 ‘행’과 ‘열’ 중 ‘행’에 관여하는 위젯 (‘열’에 관여하는 위젯은 예상하는 대로 Row 위젯이다).
- Column 위젯의 기본 정렬 방향을 설정하는 것이다.
- 프로젝트의 루트 폴더에 ‘assets’ 폴더를 추가 하고 “pubspec.yaml” 파일에 “flutter:” 아래에 “assets:”를 추가하고 “assets:” 아래에 추가한 경로인 “- assets/”를 기록해 준 후 “pub get” 명령을 수행하면 정상적으로 “assets/” 경로 내에 추가 되는 이미지들을 사용할 수 있다.
- 통신 중이거나 뭔가를 실행하는 중일 때 나타나는 플러터의 웨이팅 애니메이션 위젯이라고 생각하면 된다.
SplashScreen 프로젝트 파일 구조
최종 파일 구조는 이와 같이 된다.
assets/ : 로고 이미지 파일 추가 및 사용 경로
lib/ : 실제 구현 코드파일들이 들어가 있는 경로
pubspec.yaml : 프로젝트 환경 파일
정리
- 플러터는 구글에서 개발한 크로스 플랫폼 프레임워크이다.
- 플러터는 구글의 머티리얼 디자인과의 호환성이 가장 좋고 기본적으로 머티리얼 디자인을 사용하는 경우가 많다.
- Container 위젯은 배경색 등 영역을 꾸밀 수 있다.
- Image 위젯으로 지정한 “assets/” 경로의 assets을 이용할 수 있다.
- “flutter pub get” 명령으로 “pubspec.yaml”의 변경내용을 적용하거나 필요한 종속 라이브러리들을 다운로드 받을 수 있다.
- Column과 Row 위젯은 각각 ‘행’과 ‘열’ 영역 관리를 담당한다.
