RecipeApp - body만들기

Apr 09, 2024

1. 상단에 아이콘 만들기

아이콘이 안보이면 디폴트가 흰색이라 안보임

플러서 인스펙트로 확인하고 색상 변경하기

보통 키 값이 없으면 시그니처임


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

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

class RecipePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: _buildRecipeAppBar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            RecipeTitle(),
            RecipeMenu(),
            RecipeListItem("coffee", "made Coffee"),
            RecipeListItem("burger", "made Burger"),
            RecipeListItem("pizza", "made Pizza"),
          ],
        ),
      ),
    );
  }

  AppBar _buildRecipeAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 1.0,
      actions: [
        Icon(
        CupertinoIcons.heart,
        color: Colors.redAccent,
        ),
        SizedBox(width: 15,)
      ],
    );
  }
}

2. 제목 넣기

Text 넣기


import 'package:flutter/material.dart';

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

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


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: recipeTitle());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: ListView(
        children: [
          SizedBox(height: 20),
          Text(
            "Recipe",
            style: TextStyle(fontSize: 30),
          )
        ],
      ),
    );
  }
}

font 적용하기


import 'package:flutter/material.dart';
import 'package:recipe_app/pages/recipe_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: "PatuaOne"),
      home: RecipePage(),
    );
  }
}

타이틀 수정하기


import 'package:flutter/cupertino.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 20),
      child: ListView(
        children: [
          SizedBox(height: 20),
          Text(
            "Recipe",
            style: TextStyle(fontSize: 30),
          )
        ],
      ),
    );
  }
}

3. 아이콘 넣기


import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 20),
      child: 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),
        ),
      ],
    ),
  );
}

4. 사진과 Text 넣기


import 'package:flutter/material.dart';

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

  const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key);

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

5. overflow 문제 해결하기


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

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

class RecipePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: _buildRecipeAppBar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: ListView(
          children: [
            RecipeTitle(),
            RecipeMenu(),
            RecipeListItem("coffee", "made Coffee"),
            RecipeListItem("burger", "made Burger"),
            RecipeListItem("pizza", "made Pizza"),
          ],
        ),
      ),
    );
  }

  AppBar _buildRecipeAppBar() {
    return AppBar(
      backgroundColor: Colors.white,
      elevation: 1.0,
      actions: [
        Icon(
          CupertinoIcons.search,
          color: Colors.black,
        ),
        Icon(
          CupertinoIcons.heart,
          color: Colors.redAccent,
        ),
        SizedBox(width: 15,)
      ],
    );
  }
}

6. 사진 크기 조절하기


fit: BoxFit.cover


import 'package:flutter/material.dart';

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

  const RecipeListItem(this.imageName, this.title, {Key? key})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        Image.asset(
          "assets/images/$imageName.jpeg",
          fit: BoxFit.cover,
        ),
        SizedBox(height: 10),
        Text(
          title,
          style: TextStyle(fontSize: 20),
        ),
        Text(
          "Have you ever made your own $title? Once you've tried a homemade $title, you'll never go back.",
          style: TextStyle(color: Colors.grey, fontSize: 12),
        ),
      ]),
    );
  }
}

AspectRatio로 비율 수정하기


import 'package:flutter/material.dart';

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

  const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key);

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

7. 사진 모서리 둥글게 만들기


child: ClipRRect(
   borderRadius: BorderRadius.circular(20),


import 'package:flutter/material.dart';

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

  const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key);

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

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import '../components/recipe_list_item.dart'; import '../components/recipe_menu.dart'; import '../components/recipe_title.dart'; class RecipePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: _buildRecipeAppBar(), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ RecipeTitle(), RecipeMenu(), RecipeListItem("coffee", "made Coffee"), RecipeListItem("burger", "made Burger"), RecipeListItem("pizza", "made Pizza"), ], ), ), ); } AppBar _buildRecipeAppBar() { return AppBar( backgroundColor: Colors.white, elevation: 1.0, actions: [ Icon( CupertinoIcons.heart, color: Colors.redAccent, ), SizedBox(width: 15,) ], ); } }

import 'package:flutter/material.dart'; class RecipeTitle extends StatelessWidget { const RecipeTitle({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(top: 20), child: Text( "Recipes", style: TextStyle(fontSize: 20), ), ); } }

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: recipeTitle()); } } class recipeTitle extends StatelessWidget { const recipeTitle({ super.key, }); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: ListView( children: [ SizedBox(height: 20), Text( "Recipe", style: TextStyle(fontSize: 30), ) ], ), ); } }

import 'package:flutter/material.dart'; import 'package:recipe_app/pages/recipe_page.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, theme: ThemeData(fontFamily: "PatuaOne"), home: RecipePage(), ); } }

import 'package:flutter/cupertino.dart'; class recipeTitle extends StatelessWidget { const recipeTitle({ super.key, }); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: ListView( children: [ SizedBox(height: 20), Text( "Recipe", style: TextStyle(fontSize: 30), ) ], ), ); } }

import 'package:flutter/material.dart'; class RecipeMenu extends StatelessWidget { const RecipeMenu({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(top: 20), child: 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), ), ], ), ); }

import 'package:flutter/material.dart'; class RecipeListItem extends StatelessWidget { final String imageName; final String title; const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 2 / 1, child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.asset( "assets/images/$imageName.jpeg", fit: BoxFit.cover, ), ), ), SizedBox(height: 10), Text( title, style: TextStyle(fontSize: 20), ), Text( "Have you ever made your own $title? Once you've tried a homemade $title, you'll never go back.", style: TextStyle(color: Colors.grey, fontSize: 12), ), ], ), ); } }

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import '../components/recipe_list_item.dart'; import '../components/recipe_menu.dart'; import '../components/recipe_title.dart'; class RecipePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: _buildRecipeAppBar(), body: Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: ListView( children: [ RecipeTitle(), RecipeMenu(), RecipeListItem("coffee", "made Coffee"), RecipeListItem("burger", "made Burger"), RecipeListItem("pizza", "made Pizza"), ], ), ), ); } AppBar _buildRecipeAppBar() { return AppBar( backgroundColor: Colors.white, elevation: 1.0, actions: [ Icon( CupertinoIcons.search, color: Colors.black, ), Icon( CupertinoIcons.heart, color: Colors.redAccent, ), SizedBox(width: 15,) ], ); } }

import 'package:flutter/material.dart'; class RecipeListItem extends StatelessWidget { final String imageName; final String title; const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 20), child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [ Image.asset( "assets/images/$imageName.jpeg", fit: BoxFit.cover, ), SizedBox(height: 10), Text( title, style: TextStyle(fontSize: 20), ), Text( "Have you ever made your own $title? Once you've tried a homemade $title, you'll never go back.", style: TextStyle(color: Colors.grey, fontSize: 12), ), ]), ); } }

import 'package:flutter/material.dart'; class RecipeListItem extends StatelessWidget { final String imageName; final String title; const RecipeListItem(this.imageName, this.title, {Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ AspectRatio( aspectRatio: 2 / 1, child: Image.asset( "assets/images/$imageName.jpeg", fit: BoxFit.cover, ), ), SizedBox(height: 10), Text( title, style: TextStyle(fontSize: 20), ), Text( "Have you ever made your own $title? Once you've tried a homemade $title, you'll never go back.", style: TextStyle(color: Colors.grey, fontSize: 12), ), ], ), ); } }