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

김주희

Jun 08, 2025

Contents

레이아웃 디자인

💡

출처 만들면서 배우는 플러터 앱 프로그래밍 - 최주호, 김근호, 이지원 공저 / 앤써북

레이아웃

초기 세팅

AppBar 아이콘 생성 및 여백주기

AppBar 생성자 Refactor - Extract Method

ListView

Container 위젯으로 추출하기

Row 위젯으로 추출하기

Column 위젯으로 추출하기

위젯 component 디렉토리로 옮기기

Scaffold 위젯으로 만들기

MaterialApp은 앱 전체 전역적인 설정이라고 한다면 Scaffold는 한 페이지에 대한 설정이라고 할 수 있다. 따라서 Scaffold를 기준으로 위젯을 만들어서 한 페이지로 추출해낸다.

그러나 Scaffold는 위젯으로 추출이 안되기 때문에 위젯을 따로 밑에서 만들고 return Placeholder(); 자리를 Scaffold로 대체한다.

디자인

전체 여백 주기

ListView에 여백을 주면 전체 스크롤 부분에 한 번에 여백 설정이 된다. 이때 AppBar의 여백과 일치해야 된다. ListView를 padding으로 감싼다.

AppBar 아이콘 디자인 - 색상

폰트 크기, 글씨체

폰트는 googleFont라는 라이브러리를 가져다가 쓸 예정이므로 의존성을 추가해준다.

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 디자인

컨테이너 크기를 잡아주자

decoration을 통해 테두리를 만들어주자

border: Border.all(color: Colors.black12) → 테두리를 black12 색상으로 만든다.
borderRadius: BorderRadius.circular(30) → 테두리의 각 모서리를 둥글게 만든다.

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

Column 기준으로 메인축 가운데 정렬이 필요하다.

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

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

이미지 디자인

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

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

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

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

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

Flutter