[창 1주차] foodrecipe 코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(), // 홈페이지 보여주기
);
}
}

class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
// 음식 사진 데이터
List<Map<String, dynamic>> dataList = [
{
"category": "수제버거",
"imgUrl": "https://i.ibb.co/pnZK1rz/burger.jpg",
},
{
"category": "건강식",
"imgUrl": "https://i.ibb.co/7KLJjJV/salad.jpg",
},
{
"category": "한식",
"imgUrl": "https://i.ibb.co/0V4RVK4/korean-food.jpg",
},
{
"category": "디저트",
"imgUrl": "https://i.ibb.co/HhGRhds/dessert.jpg",
},
{
"category": "피자",
"imgUrl": "https://i.ibb.co/QdDtTvt/pizza.jpg",
},
{
"category": "볶음밥",
"imgUrl": "https://i.ibb.co/gt9npFZ/stir-fried-rice.jpg",
},
];

// 화면에 보이는 영역
return Scaffold(
  appBar: AppBar(
    elevation: 0, // 그림자 없애기
    backgroundColor: Colors.white, // 배경 색상
    centerTitle: false, // title 중앙 정렬
    iconTheme: IconThemeData(color: Colors.black), // app bar icon color
    title: Text(
      "Food Recipe",
      style: TextStyle(
        color: Colors.black,
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    actions: [
      /// My Button
      IconButton(
        onPressed: () {
          print("go my page");
        },
        icon: Icon(
          Icons.person_outline,
        ),
      ),
    ],
  ),
  body: Column(
    children: [
      /// 검색
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: "상품을 검색해주세요.",
            border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.black),
            ),
            // 돋보기 아이콘
            suffixIcon: IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                print("돋보기 아이콘 클릭");
              },
            ),
          ),
        ),
      ),
      Divider(height: 1),

      /// 카테고리 목록
      Expanded(
        child: ListView.builder(
          // 보여주려는 데이터 개수
          itemCount: dataList.length,
          // itemCount 만큼 반복되며 화면에 보여주려는 위젯
          // index가 0부터 dataList.length - 1까지 증가하며 전달됩니다.
          itemBuilder: (context, index) {
            // dataList에서 index에 해당하는 data 꺼내기
            Map<String, dynamic> data = dataList[index];
            String category = data["category"];
            String imgUrl = data["imgUrl"];

            // 카드 형태의 위젯
            return Card(
              margin: const EdgeInsets.all(8),
              // 위젯들을 위로 중첩하기 위해 Stack 위젯 사용
              child: Stack(
                alignment: Alignment.center, // 중앙 정렬
                children: [
                  /// 배경 이미지
                  Image.network(
                    imgUrl,
                    width: double.infinity, // 가득 채우기
                    height: 120,
                    fit: BoxFit
                        .cover, // 이미지 비율을 유지하며 주어진 width와 height를 가득 채우기
                  ),

                  /// 배경 위에 글씨가 보이도록 반투명한 박스 추가
                  Container(
                    width: double.infinity,
                    height: 120,
                    color: Colors.black.withOpacity(0.5), // 투명도 50%
                  ),

                  /// 카테고리
                  Text(
                    category,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 36,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    ],
  ),

  /// AppBar 왼쪽에 아이콘을 누를 때 왼쪽에서 오른쪽으로 나오는 위젯
  /// 해당 위젯을 추가하면 AppBar 왼쪽에 아이콘이 자동으로 추가됨
  drawer: Drawer(
    child: Column(
      children: [
        // Drawer 윗 부분
        DrawerHeader(
          margin: const EdgeInsets.all(0),
          decoration: BoxDecoration(
            color: Colors.amber,
          ),
          child: SizedBox(
            width: double.infinity, // 가득 채우기
            child: Column(
              children: [
                /// 동그란 배경
                CircleAvatar(
                  radius: 36,
                  backgroundColor: Colors.white,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),

                    /// 이미지
                    child: Image.network(
                      "https://i.ibb.co/CwzHq4z/trans-logo-512.png",
                      width: 62,
                    ),
                  ),
                ),

                /// 닉네임 상단 여백
                SizedBox(height: 16),

                /// 닉네임
                Text(
                  "닉네임",
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                  ),
                ),

                /// 이메일
                Text(
                  "hello@world.com",
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ),
        ),

        /// 이벤트 배너
        // 특정 비율로 위젯을 보여주기
        AspectRatio(
          aspectRatio: 12 / 4, // 가로 : 세로 = 12 : 4 (이미지를 12:4로 준비했어요)
          /// 이벤트 배너 리스트
          /// 스크롤을 하는데, 특정 항목이 스냅이 걸리도록 만들고 싶은 경우 PageView를 사용해요.
          child: PageView(
            children: [
              Image.network("https://i.ibb.co/0mXKmZq/banner-1.jpg"),
              Image.network("https://i.ibb.co/DDgYrJR/banner-2.jpg"),
              Image.network("https://i.ibb.co/v1RMHN4/banner-3.jpg"),
              Image.network("https://i.ibb.co/NmNsrr2/banner-4.jpg"),
            ],
          ),
        ),

        /// 구매 내역
        ListTile(
          title: Text(
            '구매내역',
            style: TextStyle(fontSize: 18),
          ),
          trailing: Icon(
            Icons.arrow_forward_ios,
            color: Colors.black,
          ),
          onTap: () {
            // 클릭시 drawer 닫기
            Navigator.pop(context);
          },
        ),

        /// 레시피 공유하기
        ListTile(
          title: Text(
            '저장한 레시피',
            style: TextStyle(fontSize: 18),
          ),
          trailing: Icon(
            Icons.arrow_forward_ios,
            color: Colors.black,
          ),
          onTap: () {
            // 클릭시 drawer 닫기
            Navigator.pop(context);
          },
        ),
      ],
    ),
  ),
);

}
}