스타벅스 앱 화면 제작

앱 화면 예제

 

시간이 없어서 코딩만 올리고 나중에 수정하겠습니다.

import 'package:contact_app/DrinkTile.dart';

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({super.key});

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          centerTitle: false,

          backgroundColor: Colors.transparent,

          elevation: 0,

          foregroundColor: Colors.black,

          leading: Padding(

            padding: const EdgeInsets.all(8.0),

            child: Icon(Icons.arrow_back),

          ),

          actions: [

            Padding(

              padding: const EdgeInsets.only(right: 24),

              child: Icon(Icons.search),

            ),

          ],

        ),

        body: Column(

          crossAxisAlignment: CrossAxisAlignment.start,

          children: [

            Padding(

              padding: const EdgeInsets.only(left: 32),

              child: Text(

                'New',

                style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold),

              ),

            ),

            Expanded(

              child: ListView(

                children: [

                  DrinKTile(

                      name: '골드 미모사 그린 티',

                      englishName: 'Golden Mimosa Green Tea',

                      price: '6100원',

                      imgAssets: 'assets/images/item_drink1.jpeg'),

                  DrinKTile(

                      name: '블랙 햅쌀 고봉 라떼',

                      englishName: 'Black Rice Latte',

                      price: '6300원',

                      imgAssets: 'assets/images/item_drink2.jpeg'),

                  DrinKTile(

                      name: '아이스 블랙 햅쌀 고봉 라떼',

                      englishName: 'Iced Black Rice Latte',

                      price: '6300원',

                      imgAssets: 'assets/images/item_drink3.jpeg'),

                  DrinKTile(

                      name: '스타벅스 튜메릭 라떼',

                      englishName: 'Starbucks Turmeric Latte',

                      price: '6100원',

                      imgAssets: 'assets/images/item_drink4.jpeg'),

                  DrinKTile(

                      name: '아이스 스타벅스 튜메릭 라떼',

                      englishName: 'Iced Starbucks Turmeric Latte',

                      price: '6100원',

                      imgAssets: 'assets/images/item_drink5.jpeg'),

                ],

              ),

            ),

          ],

        ),

        bottomSheet: Container(

          height: 60,

          alignment: Alignment.bottomCenter,

          decoration: BoxDecoration(color: Colors.black),

          child: Padding(

            padding: const EdgeInsets.all(16.0),

            child: Row(

              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              children: [

                Text(

                  '주문할 매장을 선택해주세요.',

                  style: TextStyle(color: Colors.white),

                ),

                Icon(

                  Icons.expand_more,

                  color: Colors.white,

                )

              ],

            ),

          ),

        ),

        bottomNavigationBar: BottomNavigationBar(

          type: BottomNavigationBarType.fixed,

          items: [

            BottomNavigationBarItem(

              icon: Icon(

                Icons.home,

              ),

              label: 'Home',

            ),

            BottomNavigationBarItem(

                icon: Icon(Icons.credit_card_rounded), label: 'Pay'),

            BottomNavigationBarItem(icon: Icon(Icons.coffee), label: 'Order'),

            BottomNavigationBarItem(icon: Icon(Icons.shop), label: 'Shop'),

            BottomNavigationBarItem(

                icon: Icon(Icons.more_horiz), label: 'Other'),

          ],

          selectedItemColor: Colors.green,

          currentIndex: 2,

        ),

      ),

    );

  }

}

위에 것이 메인코딩이고

 

 

import 'package:flutter/material.dart';

import 'package:flutter/src/widgets/container.dart';

import 'package:flutter/src/widgets/framework.dart';

class DrinKTile extends StatelessWidget {

  //MyWidget은 앞으로 사용될 위젯의 이름

  const DrinKTile(

      {super.key,

      required this.name,

      required this.englishName,

      required this.price,

      required this.imgAssets});

  final String name; //사용하는 변수가 된것

  final String englishName;

  final String price;

  final String imgAssets;

  @override

  Widget build(BuildContext context) {

    return ListTile(

      isThreeLine: true,

      title: Text(

        name,

        style: TextStyle(fontSize: 14, fontWeight: FontWeight.w200),

      ),

      subtitle: Column(

        crossAxisAlignment: CrossAxisAlignment.start,

        children: [

          Text(

            englishName,

          ),

          Text(

            price,

            style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),

          )

        ],

      ),

      leading: CircleAvatar(radius: 48, backgroundImage: AssetImage(imgAssets)),

    );

  }

}

 

위에 것이 DrinkTile 코딩입니다...

실행결과