레시피 앱 만들기

코드

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

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

// 클래스 확실히 구분하기. 만들고 메서드로 빼기
// 전체 앱 클래스
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: RecipePage(),
      theme: ThemeData(
        textTheme: GoogleFonts.patuaOneTextTheme(),
      ),
    );
  }
}

// 페이지 클래스
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(
          // Column은 스크롤 불가
          children: [
            Title(),
            Menu(),
            RecipeItem("coffee"),
            RecipeItem("pizza"),
            RecipeItem("burger"),
          ],
        ),
      ),
    );
  }

  AppBar _appbar() {
    return AppBar(
      actions: [
        Icon(Icons.search),
        SizedBox(width: 16),
        Icon(CupertinoIcons.heart, color: Colors.redAccent),
        SizedBox(width: 16),
      ],
    );
  }
}

class RecipeItem extends StatelessWidget {
  final text;

  RecipeItem(this.text);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(height: 30),
        AspectRatio(
          aspectRatio: 2 / 1,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.asset(
              "assets/${text}.jpeg",
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(height: 10),
        Text("Made ${text}", style: TextStyle(fontSize: 20)),
        Text(
          "Have you ever made your own ${text}? Once you've tried a homemade ${text}, you'll never go back.",
          style: TextStyle(color: Colors.grey, fontSize: 12),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Row(
      // row가 늘어남 > column 디폴트 정렬은 센터라 text가 센터
      children: [
        MenuItem(mIcon: Icons.food_bank, mText: "ALL"),
        SizedBox(width: 25),
        MenuItem(mIcon: Icons.emoji_food_beverage, mText: "Coffe"),
        SizedBox(width: 25),
        MenuItem(mIcon: Icons.fastfood, mText: "Burger"),
        SizedBox(width: 25),
        MenuItem(mIcon: Icons.local_pizza, mText: "Pizza"),
      ],
    );
  }
}

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

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

// 선택적 매개변수 - 생성자 직접 만들기
// 다른 것: 아이콘, 이름
class MenuItem extends StatelessWidget {
  final mIcon;
  final mText;

  MenuItem({required this.mIcon, required this.mText});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 80,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.black12),
        borderRadius: BorderRadius.circular(30),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(mIcon, color: Colors.redAccent, size: 30),
          SizedBox(height: 3),
          Text("${mText}", style: TextStyle(color: Colors.black87))
        ],
      ),
    ); // container에 자식 넣기 가능 -child 필요
  }
}

사용 기능

1. assets 폴더 생성 및 사진 추가

2. pubspec.yaml에 폴더명

3. Pub get 반드시 눌러 적용하기

• 클래스 저장시 자동 줄바꿈

실행