프로젝트 생성
안드로이드 스튜디오에서 새 플러터 프로젝트를 생성한다.
SDK 경로 선택
자신의 SDK 경로를 선택한다.
경로가 이미 선택되어 있다면 next를 누른다.
프로젝트 정보
프로젝트명은 띄어쓰기를 언더바로 해야한다.
프로젝트 경로는 원하는 곳에 설정한다.
Organization은 실제 서비스 주소를 적어야 되지만 연습용이니 그대로 둔다.
안드로이드 언어는 Java로 한다. (Kotlin을 배운 사람은 코틀린으로.)
IOS 언어는 Swift로 한다.
플랫폼은 작동하기를 원하는 기종으로 한다.
안드로이드, IOS를 선택하고, UI 확인용으로 web을 추가로 선택해보는 것도 좋다.
widget_test.dart 삭제
현재는 필요 없는 파일이다.
assets 폴더 추가
아래와 같이 디렉토리를 선택한다.
assets 라는 이름으로 폴더를 생성한다.
아래와 같이 생성되었다.
에셋 다운로드 및 붙여넣기
아래 다운로드를 눌러 에셋을 다운로드 하자.
압축을 풀어 assets 파일에 복붙하자.
ctrl + c / ctrl + v
아래처럼 세팅되면 성공.
assets 폴더 등록하기
아래 파일을 더블클릭한다.
아래 코드를 복사하여
assets:
- assets/images/assets 주석이 보이는 곳에 붙여넣는다.
.
아래 코드를 복사하여
fonts:
- family: PatuaOne
fonts:
- asset: assets/fonts/PatuaOne-Regular.ttffonts 주석이 보이는 곳에 붙여넣는다.
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());
앱 실행
앱을 실행해보자.
실행에 문제가 있다면 아래 링크를 확인한다.
(휠버튼으로 클릭시 새탭에 뜬다.)
화면 확인
아래와 같이 나오면 정상이다.
디렉토리 구성하기
아래와 같이 디렉토리를 생성해본다.
.
파일 생성하기
모두 소문자와 언더바로 생성한다.
RecipeTitle 세팅
더블클릭
아래와 같이 작성한다.
import를 치고 ma를 치면 material 자동완성이 작동한다.
stl을 치면 stless 자동완성이 작동한다.
클래스명은 파스칼 표기법으로 작성한다.
(파일명은 스네이크 표기법)
RecipeMenu 세팅
더블클릭
아래와 같이 작성한다.
RecipeListItem 세팅
더블클릭
아래와 같이 작성한다.
필드와 생성자를 추가한다.
RecipePage 세팅
더블클릭
아래와 같이 작성한다.
RecipePage에 위젯 추가
앱바 생성 함수를 선언하고
스캐폴드와 스캐폴드의 매개변수를 작성한다.
패딩의 매개변수를 추가하고, 패딩은 수평 간격 20을 준다.
child는 Column()을 세팅한다.
Column의 children에 아래와같이 추가한다.
MyApp 세팅
더블클릭
아래와 같이 작성.
모든 Placeholoder를 Container로
recipe_list_item.dart
recipe_menu.dart
recipe_title.dart
에 있는
const Placeholoder() 를
Container() 로 변경한다.
중간 실행
백지 상태로 나오면 정상이다.
AppBar 꾸미기
RecipePage의 AppBar를 꾸며보자
먼저 쿠퍼티노 라이브러리를 추가한다.
import 'package:flutter/cupertino.dart';
앱바를 간략화 하였다.
그림판 속의 이름은 파라미터로 생각하면 된다.
앱바의 배경색은 흰색
그림자는 1.0
검색과 좋아요 Icon을 추가
SizedBox는 아이콘의 간격을 주기 위한 투명 상자이다.
실행해보면 actions 자리에 아이콘들이 생성 되었다.
RecipeTitle 제목 만들기
실행해보면
MaterialApp 테마 설정하기
테마데이터를 추가한다.
MaterialApp의 const를 없애야 한다.
(테마가 컴파일 타임에 가져올 수 없는 데이터이기 때문)
실행해본다.
아래와 같이 나오면 정상.
자신이 원하는 무료 폰트를 다운로드해서 적용해보자.
폰트 적용시 참고
https://happyhappy94.tistory.com/33
Container 위젯
Container 위젯과 SizedBox 위젯은 빈 박스 위젯이다.
차이점은 Container 위젯에는 decoration 속성이 있어서 박스에 색상을 입히거나 박스의 모양을 바꾸는 등 디자인을 할 수 있다는 점이다. SizedBox는 보통 간격을 줄 때 사용한다.
또한 Container 위젯은 자식이 없으면 가능한 박스를 크게 하려고한다. 반대로 자식이 있으면 자식 크기에 맞게 조정 된다.
재사용 위젯 생성 함수
RecipeMenu 클래스 아래에, 재사용을 위한 위젯을 생성하는 함수를 선언한다.
RecipeMenu 구현
실행해보자.
아래와 같이 나오면 정상.
아이콘과 박스모양을 자기가 원하는 대로 커스텀 해보자.
RecipeListItem 구현
생성자에서 필드로 받았던 imageName과 title을 이용해서
이미지와 제목을 화면에 보여준다.
실행해보자.
RecipePage에 값을 이미 넣어 놨기 때문에 바로 위젯이 출력된다.
아래와 같이 나오면 정상.
노란색 경고표시가 나오는데, 화면의 높이를 넘어가는 내용들이 있기 때문에 출력을 할 수 없어서 뜨는 것이다.
.
Row나 Column 등을 만들다보면 아래와 같은 매개변수가 나온다.
해당 옵션은 자식 위젯을 정렬하는 용도로 사용한다.
아래 링크를 참고하여 자신의 취향에 맞게 커스텀해보자.
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,ListView 적용하기
위의 경우처럼 화면을 넘어가는 위젯이 있을 경우 경고표시가 발생한다.
기종마다 화면크기가 다르기도 하고, 많은 컨텐츠들을 적용할 경우 스크롤이 필요하다.
실제 서비스되는 대부분의 앱화면에 ListView가 적용되어 있다.
Recipe앱도 적용해보자.
Column을 ListView로 변경하고
crossAxisAlignment 매개변수를 삭제한다.
ListView로 변경.
실행해보자.
아래와 같이 경고가 없어지고, 스크롤이 가능해진다.
이미지 비율 조절하기
RecipeListItem의 이미지를 종횡비로 조절해본다.
AspectRatio 위젯을 사용한다.
AspectRatio 위젯은 레이아웃에서 허용하는 가장 큰 너비를 시도한다.
이 상태에서 제공된 비율을 적용한다.
레이아웃 너비가 500이고 2 / 1 비율이라면,
이미지는 넓이 500 / 높이 250으로 세팅된다.
아래 처럼 따라해보자.
AspectRatio로 감쌀 위젯을 선택하고
Alt + Enter를 입력한다.
실행해보자.
이미지 비율이 달라지면서
이미지의 위 아래 부분이 자연스럽게 가려져서 보인다.
이미지 모서리 둥글게 하기
ClipRRect 위젯을 사용하면 이미지 모서리를 둥글게 할 수 있다.
Clip -> 자르다
R -> 모서리
Rect -> 사각형
사각형의 모서리를 자른다는 뜻이다.
다시 이미지 위젯을
Alt + Enter하여 ClipRRect로 감싼다.
실행해보자.
.
Container 위젯 같은 경우 decoration 등으로 모서리 곡선 등 디자인을 해줄 수 있기 때문에, ClipRRect를 사용할 필요가 없다.
Container를 쓸 수 없는 경우 위처럼 ClipRRect 등을 이용하면 된다.
끝
해당 예제에서 설정 등을 이리저리 바꿔보면서 디자인 해보자.
전체코드
https://github.com/jaybon1/dart_flutter_example/tree/master/flutter_ui/flutter_recipe
