RecipeApp - 풀이

1. appBar 컴포넌트로 만들기

• 컴포넌트로 만드는 방법 - 같은 파일에서 사용 가능

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  Scaffold _appBar() {
    return Scaffold(
      appBar: AppBar(
        actions: [
          Icon(CupertinoIcons.search),
          SizedBox(width: 15),
          Icon(
            CupertinoIcons.heart,
            color: Colors.redAccent,
          ),
          SizedBox(width: 15),
        ],
      ),
      body: ListView(),
    );
  }
}

• 컴포넌트로 만드는 방법 - 외부에서도 사용 가능

import 'package:flutter/cupertino.dart';

class RecipeTitle extends StatelessWidget {

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

• 변수로 재사용 가능하게 만들기

• 따로 파일을 만들어서 분리하기

2. RecipeMenuItem 컴포넌트로 만들기

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: ListView(
          children: [
            RecipeTitle(),
            Row(
              children: [
                Container(
                  // Container 빈박스, 자식 하나 가질 수 있다.
                  width: 60,
                  height: 80,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30),
                    border: Border.all(color: Colors.black12),
                  ),
                  child: Column(
                    // 세로 -> 칼세이건
                    mainAxisAlignment: MainAxisAlignment.center,

                    children: [
                      Icon(
                        Icons.food_bank,
                        color: Colors.redAccent,
                        size: 30,
                      ),
                      Text(
                        "All",
                        style: TextStyle(color: Colors.black87),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  AppBar _appbar() {
    return AppBar(
      actions: [
        Icon(CupertinoIcons.search),
        //시그니처 매개변수 키 값이 없다, 그 위젯의 핵심은 시그니처로 키 값을 넣지 않는다.
        SizedBox(width: 15),
        Icon(
          CupertinoIcons.heart,
          color: Colors.redAccent,
        ),
        SizedBox(width: 15),
      ],
    );
  }
}

• 컴포넌트 : 메뉴 아이콘 하나

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RecipeMenuItem extends StatelessWidget {
  // final은 ? 타입도 포함하고 있음
  // final mIcon;
  // final text;
    IconData mIcon;
    String text;

  // const RecipeMenuItem(this.mIcon, this.text); // 키 값을 못씀
  RecipeMenuItem({required this.mIcon, required this.text}); // 선택적 매개변수
    
  @override
  Widget build(BuildContext context) {
    return Container(
      // Container 빈박스, 자식 하나 가질 수 있다.
      width: 60,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        border: Border.all(color: Colors.black12),
      ),
      child: Column(
        // 세로 -> 칼세이건
        mainAxisAlignment: MainAxisAlignment.center,

        children: [
          Icon(
            Icons.food_bank,
            color: Colors.redAccent,
            size: 30,
          ),
          Text(
            "All",
            style: TextStyle(color: Colors.black87),
          ),
        ],
      ),
    );
  }
}

3. RecipeMenu 컴포넌트로 만들기

• 컴포넌트 : 메뉴 아이콘 집합

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// 레시피 메뉴들의 모임
class RecipeMenu extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20),
      child: Row( //1. 메뉴 아이템들의 방향이 수평 방향이기 때문
        children: [
          _buildMenuItem(Icons.food_bank, "ALL"), // 2. 재사용
          SizedBox(width: 25),
          _buildMenuItem(Icons.emoji_food_beverage, "Coffee"), // 3. 재사용
          SizedBox(width: 25),
          _buildMenuItem(Icons.fastfood, "Burger"), // 4. 재사용
          SizedBox(width: 25),
          _buildMenuItem(Icons.local_pizza, "Pizza"), // 5. 재사용
        ],
      ),
    );
  }

  // 6. 재사용할 수 있는 함수로 만든다
  // 7. Widget은 모든 위젯의 부모이기 때문에 함수 리턴 타입은 Widget 으로 하는 것이 좋다
  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),
          ),
        ],
      ),
    );
  }
}

4. RecipeBody 컴포넌트로 만들기

import 'package:flutter/cupertino.dart';
import 'package:recipe_app2/components/recipe_menu.dart';
import 'package:recipe_app2/components/recipe_title.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: ListView(
        children: [
          RecipeTitle(),
          RecipeMenu(),
        ],
      ),
    );
  }
}