07 앱을 만들려면 알아야 하는 그 밖의 지식
7.1 앱 만들기 프로세스
기획(프로젝트 개요) - 사전 지식(필요한 지식 학습) - 사전 준비(프로젝트 생성 및 설정) - 레이아웃 구상 - 구현 - 테스트
* UI 프로토타입 도구
- 피그마 : UI 디자인 특화. UI를 간단하게 구현하고 CSS나 플러터 코드로 받아볼 수 있는 기능 제공
- 어도비 XD
- 플러터 플로우 : 플러터에 특화된 UI 구현 툴. 웹에서 UI를 구현하면 플러터 앱을 반환해주는 노코드 솔루션
* 폴더 구조 참고
- screen : 스크린 전체에 해당되는 위젯들을 모아두는 폴더
- component : 스크린을 구성하는 데 공통으로 사용될 만한 요소의 위젯들을 모아두는 폴더
- model : 모델
- const : 상수
7.2 플러그인 추가 방법
dependencies에 사용할 플러그인 추가 후 pub get 실행
7.4 연습용 앱 만들기 : 스플래시 스크린 앱
7.4.1 사용자 정의 위젯 만들기 : 스테이트리스 위젯
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Text(
'Splash Screen',
),
),
),
);
}
}
- 사용자 정의 위젯이 StatelessWidget 클래스를 상속받음
- build() 함수를 필수적으로 오버라이드함. 화면에 그릴 위젯을 입력
- runApp()의 매개변수로 사용해 앱 전체 화면으로 사용자 정의 위젯을 사용
7.4.2 배경색 바꾸기 : Container와 BoxDecoration 위젯
7.4.3 이미지 출력하기: Image 위젯
* Image 위젯의 생성자
- 기본: ImageProvider라는 또 다른 위젯에서 이미지를 그림
- Image.asset : 앱에 저장된 asset 파일로 이미지를 그림
- Image.network : URL을 통해서 이미지를 그림
- Image.file : 파일을 통해서 이미지를 그림
- Image.memory : 메모리에서 직접 이미지를 그림
Image.asset 사용하기
assets 폴더를 만들고 안에 logo.png 가져온 뒤, pubspec.yaml 파일에 이미지를 담을 asset 폴더를 지정
수정 후 pub get 기능을 실행해 프로젝트 설정 변경
7.4.4 위젯 정렬하기 : Row & Column 위젯
LinearProgressIndicator / CircularProgressIndicator : 플러터에서 제공하는 애니메이션 위젯. 일자 / 동그라미 형태의 로딩 애니메이션 실행
- 로고이미지와 로딩애니메이션을 Column으로 감싸 세로정렬. mainAxis를 center로 정렬해 가운데에 오게 함
- 이 상태로 이미지 가로 크기를 줄이면 배경이 같이 줄어드는 문제 발생. (Column은 세로로는 최대로 늘어나고 가로로는 최소 크기를 가지려 하기 때문)
- 해결을 위해 Column을 Row로 감싸고 Row의 MainAxis를 center로 정렬해 가로세로 모두 가운데 정렬
로딩위젯은 backGroundColor(위젯 배경 색상)과 valueColor(실제로 애니메이션으로 움직이는 부분의 색상) 매개변수 제공
valueColor은 색상이 애니메이션되어야 하므로 AlwaysStoppedAnimation 클래스를 사용해 색상을 제공할 수 있다.
완성 코드
import 'package:flutter/material.dart';
void main() {
runApp(SplashScreen());
}
class SplashScreen extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
color: Color(0xFFF99231), //0xFF(불두명도100%) + 색상코드
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(
'assets/logo.png',
width: 200,
),
CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation(
Colors.white,
),
),
],
),
],
),
),
),
);
}
}