[Flutter] 6. 레시피 앱 만들기

레이아웃

초기 세팅

AppBar 아이콘 생성 및 여백주기

AppBar 생성자 Refactor - Extract Method

ListView

Container 위젯으로 추출하기

Row 위젯으로 추출하기

Column 위젯으로 추출하기

위젯 component 디렉토리로 옮기기

Scaffold 위젯으로 만들기

디자인

전체 여백 주기

AppBar 아이콘 디자인 - 색상

폰트 크기, 글씨체

google_fonts | Flutter package

A Flutter package to use fonts from fonts.google.com. Supports HTTP fetching, caching, and asset bundling.

https://pub.dev/packages/google_fonts

Container 디자인

1. 컨테이너 크기를 잡아주자

2. decoration을 통해 테두리를 만들어주자
1. border: Border.all(color: Colors.black12) → 테두리를 black12 색상으로 만든다.
2. borderRadius: BorderRadius.circular(30) → 테두리의 각 모서리를 둥글게 만든다.

3. 테두리를 기준으로 아이콘과 텍스트가 가운데 정렬이 되어있지 않기 때문에 Column을 정렬해준다.
1. Column 기준으로 메인축 가운데 정렬이 필요하다.

4. 내부 아이콘의 색깔과 크기를 지정해주자

5. 마지막으로 아이콘과 텍스트 사이에 여백을 주자

이미지 디자인

1. 먼저 fit 속성을 cover로 지정해준다.

2. 비율 주기 전에 자르기 위해 이미지를 widget으로 감싼다. 그리고 위젯의 이름을 ClipRRect으로 바꾼다. 그리고 설정을 통해 모서리에 곡선을 준다. ClipRRect은 이미지나 자식 위젯의 모서리를 둥글게 잘라내는 역할을 한다.

3. ClipRRect을 다시 한 번 widget으로 감싼다. 그리고 그 위젯의 이름은 AspectRatio로 변경한다. AspectRatio 위젯은 지정된 가로세로 비율에 맞게 자식 위젯을 조정한다. 원래 double 타입의 숫자로 설정 가능하지만 가로/ 세로 비율을 실수로 정확하게 알기 어렵기 때문에 연산자를 사용해서 비율을 지정한다. 즉, 2 / 1은 가로 2 : 세로1을 의미한다.

4. Column의 cross축 시작점을 기준으로 정렬해서 글씨가 왼쪽에서부터 시작되도록 정렬한다.

5. 마지막으로 Column 사이에 여백을 준다.