레시피 글자

Have you ever made your own coffee? Once you've tried a homemade coffee, you'll never go back.

main.dart

import 'package:flutter/material.dart';
import 'package:rapp2/pages/home_page.dart';

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

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

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

pages/home_page.dart

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

import '../components/list_item.dart';
import '../components/menu_item.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _appbar(),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: ListView(
          children: [
            Text("Recipes", style: TextStyle(fontSize: 30)),
            SizedBox(height: 10),
            Row(
              children: [
                MenuItem(Icons.food_bank, "ALL"),
                SizedBox(width: 25),
                MenuItem(Icons.emoji_food_beverage, "Coffee"),
                SizedBox(width: 25),
                MenuItem(Icons.fastfood, "Burger"),
                SizedBox(width: 25),
                MenuItem(Icons.local_pizza, "Pizza"),
              ],
            ),
            ListItem(
              mText: "Coffee",
              mUrl: "coffee.jpeg",
              h: 20,
            ),
            ListItem(mText: "Burger", mUrl: "burger.jpeg"),
            ListItem(mText: "Pizza", mUrl: "pizza.jpeg"),
          ],
        ),
      ),
    );
  }

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

components/menu_item.dart

import 'package:flutter/material.dart';

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

  @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(Icons.food_bank, color: Colors.redAccent),
          SizedBox(height: 5),
          Text("ALL", style: TextStyle(color: Colors.black87)),
        ],
      ),
    );
  }
}

components/list_item.dart

import 'package:flutter/material.dart';

class ListItem extends StatelessWidget {
  final mText;
  final mUrl;
  final double h;

  ListItem({required this.mText, required this.mUrl, this.h = 0.0});

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