#004 #레시피 앱 UI 만들기

✔️ 소스코드 flutter_recipe 프로젝트

flutter-book

flutter-coder • Updated May 21, 2025

👈목표 결과물

✔️ 경로 설정 후 Pub Get 클릭

✔️ Main.dart 기본 코딩

내부를 다 지우고 stateless 위젯을 생성한다.

✔️ Scaffold 구조 만들고 AppBar, Column추가

비어있는 AppBar랑 도화지가 생겼다.

✔️ 컬럼의 자식요소로 Container 생성

body영역에 Container를 다섯개 생성

플러터에서 Container는 HTML의 DIV태그와 유사하다. 빈 박스를 만들고 그 내부를 디자인하거나 다른 위젯을 담을 때 사용한다.

Container요소에 Extract Widget으로 추출

ctrl + alt + w 로 위젯으로 추출한뒤에 recipe_title 파일을 만들어서 components 폴더에 넣는다. 이러한 행위를 component화 한다고 말할 수 있고, 이렇게 만든것은 재사용 할 수 있다.

만들어진 위젯을 recipe_title파일로 빼놓았다.

recipe_menu도 마찬가지

recipe_list_item

Java

import 'package:flutter/cupertino.dart';

class RecipeListItem extends StatelessWidget {
  final String imageName;
  final String title;

  RecipeListItem(this.imageName, this.title);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

마지막 Container요소 역시 위젯으로 따로 빼서 RecipeListItem으로 명명한다.

그리고 내부에 final요소로 imageName 과 title을 선언해서 생성자도 같이 만들어 준다. 굳이 final로 선언한 이유는 RecipeListItem은 생성이 될때 반드시 imageName과 title이 필요한 위젯이라는 것을 명시하기 위함이고, 이는 향후 플러터 프레임워크에서 위젯들을 재생성 할 때 final로 불변요소의 상태를 추적하지 않기 때문에, 성능이 더 향상 될 수 있다.

recipe_page 전체코드

Java

import 'package:flutter/material.dart';

import 'components/recipe_menu.dart';
import 'components/recipe_title.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: _buildRecipeAppBar(),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RecipeTitle(),
              RecipeMenu(),
              RecipeListItem("coffee", "Made Coffee"),
              RecipeListItem("burger", "Made Burger"),
              RecipeListItem("pizza", "Made Pizza"),
            ],
          ),
        ),
      ),
    );
  }

  AppBar _buildRecipeAppBar() {
    return AppBar();
  }
}

class RecipeListItem extends StatelessWidget {
  final String imageName;
  final String title;

  RecipeListItem(this.imageName, this.title);

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

✔️ AppBar

AppBar를 사용할 때 leading요소의 위치와 action, 그리고 title의 위치를 숙지 한다.

AppBar 구현

Java

  AppBar _buildRecipeAppBar() {
    return AppBar(
      backgroundColor: Colors.white, // appbar 배경색
      elevation: 1.0,  // appbar의 그림자 효과 조정
      actions: [
        Icon(
          CupertinoIcons.search, // 쿠퍼티노 아이콘 검색 모양
          color: Colors.black,
        ),
        SizedBox(width: 15),
        Icon(
          CupertinoIcons.heart, // 쿠퍼티노 아이콘 하트 모양
          color: Colors.redAccent,
        ),
        SizedBox(width: 15),
      ],
    );
  }

appbar에 적용된 모습

✔️ RecipeTitle 구현

Build메소드 안에 “Recipes” 텍스트를 넣고, styling을 해준다.

Padding은 항상 구현후 감싸주면 좀 편리하다. 해당 위젯에 alt + enter를 치면 해당 메뉴가 나오는데 Wrap with Padding을 선택한다.

RecipeTitle 전체 코드

Java

class RecipeTitle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Text(
        "Recipes",
        style: TextStyle(fontSize: 30),
      ),
    );
  }
}

완성화면

✔️ Theme 적용하기

MaterialApp 구조에 theme 선택적매개변수에 ThemeData(fontFamily: “PatuaOne”) 을 지정해준다.

결과

✔️ Container와 SizedBox의 차이점?!

container 와 sizedBox는 빈 박스 위젯으로 비슷하지만, container는 내부에 decoration을 할 수 있어서 여러가지 꾸밀 수 있다. 하지만 sizedBox는 마진을 줄 때 주로 사용한다.

➖ Container 위젯의 특징

내부 요소가 없으면 화면 크기만큼 확장한다.

내부요소가 있으면 그 크기만큼 줄어든다.

recipe_menu.dart 전체 코드

SQL

import 'package:flutter/material.dart';

class RecipeMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _buildMenuItem(Icons.food_bank, "ALL"),
        SizedBox(width: 25),
        _buildMenuItem(Icons.emoji_food_beverage, "Coffee"),
        SizedBox(width: 25),
        _buildMenuItem(Icons.fastfood, "Burger"),
        SizedBox(width: 25),
        _buildMenuItem(Icons.local_pizza, "Pizza"),
      ],
    );
  }

  Widget _buildMenuItem(IconData mIcon, String text) {
    return Container(
      width: 60,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.black12),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(mIcon, color: Colors.redAccent, size: 30),
          SizedBox(height: 5),
          Text(
            text,
            style: TextStyle(color: Colors.black87),
          ),
        ],
      ),
    );
  }
}