스타벅스 UI - 커스텀 위젯 (bottomSheet)

[name27]

// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
import 'package:new_project_for_starbucks_app/DrinkTile.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, //debug 배너 제거
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          foregroundColor: Colors.black,
          elevation: 0,
          leading: Icon(Icons.arrow_back),
          actions: [
            Icon(Icons.search),
          ],
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: ListView(
            children: [
              Text(
                'New',
                style: TextStyle(
                  fontSize: 35,
                  fontWeight: FontWeight.bold,
                ),
              ),
              DrinkTile(
                title: '골든 미모사 그린 티',
                subtitle: 'Golden Mimosa Green Tea',
                price: 6100,
                imgUrl: 'assets/images/item_drink1.jpeg'
              ),
              DrinkTile(
                title: '블랙 햅쌀 고봉 라떼',
                subtitle:'Black Rice Latte',
                price:6300,
                imgUrl:'assets/images/item_drink2.jpeg'
              ),
              DrinkTile(
                title: '아이스 블랙 햅쌀 고봉 라떼',
                subtitle:'Iced Black Rice Latte',
                price:6300,
                imgUrl:'assets/images/item_drink3.jpeg'
              ),
              DrinkTile(
                title: '스타벅스 튜메릭 라떼',
                subtitle:'Starbucks Turmeric Latte',
                price:6100,
                imgUrl:'assets/images/item_drink4.jpeg'
              ),
              DrinkTile(
                title: '아이스 스타벅스 튜메릭 라떼',
                subtitle:'Iced Starbucks Turmeric Latte',
                price:6100,
                imgUrl:'assets/images/item_drink5.jpeg'
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: 2,
          selectedItemColor: Colors.green,
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.payment), label: 'Pay'),
            BottomNavigationBarItem(icon: Icon(Icons.coffee), label: 'Order'),
            BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),
            BottomNavigationBarItem(
                icon: Icon(Icons.more_horiz), label: 'Other'),
          ],
        ),
        bottomSheet: Container(
          height: 64,
          color: Colors.black87,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text('주문할 매장을 선택해주세요', style: TextStyle(color: Colors.white),),
                Icon(Icons.keyboard_arrow_down, color: Colors.white,)
              ],
            ),
          ),
        ),
      ),
    );
  }
}

[name27]

DrinkTile.dart

// ignore_for_file: prefer_const_constructors
// ignore_for_file: prefer_const_literals_to_create_immutables
import 'package:flutter/material.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

class DrinkTile extends StatelessWidget {
  const DrinkTile({super.key, required this.title, required this.subtitle, required this.price, required this.imgUrl});
  final String title;
  final String subtitle;
  final int price;
  final String imgUrl;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 16),
      child: Row(
        children: [
          CircleAvatar(
            backgroundImage: AssetImage(imgUrl),
            radius: 48,
          ),
          SizedBox(width: 16,),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Text(
                subtitle,
                style: TextStyle(
                  fontSize: 14,
                  color: Colors.black45,
                  fontWeight: FontWeight.w200,
                ),
              ),
              Text(
                '$price원',
                style: TextStyle(
                  fontSize: 16,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}