프로젝트 생성
안드로이드 스튜디오에서 새 플러터 프로젝트를 생성한다.
SDK 경로 선택
자신의 SDK 경로를 선택한다.
경로가 이미 선택되어 있다면 next를 누른다.
프로젝트 정보
프로젝트명은 띄어쓰기를 언더바로 해야한다.
프로젝트 경로는 원하는 곳에 설정한다.
(flutter SDK 설치 경로에는 넣지 않도록 한다.)
Organization은 실제 서비스 주소를 적어야 되지만 연습용이니 그대로 둔다.
안드로이드 언어는 Java로 한다. (Kotlin을 배운 사람은 코틀린으로.)
IOS 언어는 Swift로 한다.
플랫폼은 작동하기를 원하는 기종으로 한다.
안드로이드, IOS를 선택하고, UI 확인용으로 web을 추가로 선택해보는 것도 좋다.
widget_test.dart 삭제
현재는 필요 없는 파일이다.
assets 폴더 추가
아래와 같이 디렉토리를 선택한다.
assets 라는 이름으로 폴더를 생성한다.
아래와 같이 생성되었다.
에셋 다운로드 및 붙여넣기
아래 다운로드를 눌러 에셋을 다운로드 하자.
압축을 풀어 assets 파일에 드래그앤 드롭하자.
아래처럼 세팅되면 성공.
assets 폴더 등록하기
아래 파일을 더블클릭한다.
아래 코드를 복사하여
assets:
- assets/assets 주석이 보이는 곳에 붙여넣는다.
pubspec.yaml 파일을 수정하면 습관적으로 pub get을 눌러주자.
main.dart 파일
아래 파일을 더블클릭 한다.
전체 삭제
화면의 예제를 삭제한다.
ctrl + a
백스페이스 또는 delete
라이브러리 임포트
화면 구현에 필요한 라이브러리를 가져온다.
material.dart는 안드로이드 스타일
cupertino.dart는 애플 스타일
import 'package:flutter/material.dart';
메인함수 작성
메인함수를 작성한다.
void main() {
}MyApp 위젯 작성
메인 함수 아래쪽에 위젯을 생성하자.
stl이라고 치면 stless 라는 문구가 보인다.
엔터를 친다.
stl
커서가 아래와 같이 깜빡인다.
그 상태 그대로 MyApp을 쳐보자.
아래와 같이 작성된다.
엔터로 마무리한다.
앱 실행 준비하기
main함수에 아래 코드를 입력한다.
runApp은 flutter가 앱을 실행시켜주는 함수다.
매개변수로 우리가 만든 위젯이 들어가 있다.
runApp(const MyApp());
앱 실행
앱을 실행해보자.
실행에 문제가 있다면 아래 링크를 확인한다.
(휠버튼으로 클릭시 새탭에 뜬다.)
화면 확인
아래와 같이 나오면 정상이다.
스토어 위젯 작성
아래와 같이 stl을 입력하여 위젯을 만든다.
StorePage라고 이름을 붙여준다.
MyApp 위젯 수정
MyApp의 build 함수의 리턴 부분을 수정한다.
아래 코드를 복붙해도 되고 직접 타이핑해도 된다.
return const MaterialApp(
home: StorePage(),
);
StorePage 위젯 수정
아래 안내된 스샷처럼 진행한다.
따라하기 어려우면 밑으로 내려 복붙하자.
return 뒤에 Scaffold()를 넣어주자.
Scaffold는 바닥이라는 뜻이고, 하얀 도화지라고 생각하면된다.
Scaffold의 body 매개변수로 SafeArea()를 넣어주자
SafeArea는 스마트폰 기종 별로 조금씩 다른 상태바 영역에 여백을 넣어주는 역할을 한다.
SafeArea의 child 매개변수로 Colunm()을 넣어주자.
Colunm은 위아래 방향으로 층층이 위젯을 쌓는 용도로 사용한다.
Colunm의 children 속성에
children 속성은 배열을 넣게 되어 있다.
아래와 같이 넣어보자.
children: [
Padding(),
Expanded(),
Expanded()
],Padding은 위젯에 여백을 주는 기능을 한다.
Expanded는 화면의 남은 부분을 채우는 역할을 한다.
빨간 줄이 뜨는 것은 필수 매개변수를 넣지 않아서 이다.
하나씩 처리해보자.
첫번째 Expanded에 Image 위젯을 넣는다.
Image.asset("assets/bag.jpeg", fit: BoxFit.cover)우리가 아까 추가한 파일들이다.
두번째 Expanded에도 마찬가지로 넣자.
Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)
Padding 부분을 작업한다.
Padding의 padding 매개변수에 아래와 같이 추가한다.
25의 공백을 준다.
const EdgeInsets.all(25.0)
Padding의 child 매개변수에 Row() 를 입력한다.
Row()Row는 Column과 반대로 좌우로 위젯을 쌓는 용도로 사용한다.
Row의 children 매개변수에 아래 코드를 넣는다.
children: const [
Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Kids", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Shoes", style: TextStyle(fontWeight: FontWeight.bold)),
Spacer(),
Text("Bag", style: TextStyle(fontWeight: FontWeight.bold)),
],Text는 글자를 넣는 위젯이다.
TextStyle은 글자의 스타일을 지정해준다.
Spacer는 위젯 사이의 공간을 만든다.
재 실행
기본적으로 flutter는 Hot Reload를 지원한다.
그래서 저장만해도 화면이 다시 그려진다.
하지만 assets 등 정적 파일이 바뀌었을 때에는
멈추었다가 다시 실행해야 정상적으로 작동한다.
정지를 먼저 눌렀다가 시작을 눌러보자.
아래와 같이 나오면 정상이다.
전체 코드
https://github.com/jaybon1/dart_flutter_example/tree/master/flutter_ui/flutter_store
