[Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠

[Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠

https://designus.io/reference/service/15

레퍼런스 (쿠팡이츠) | 디자이너스

 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("서울 강남구 강남대로 396"),
          actions: [
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.doorbell_outlined),
            ),
            IconButton(
              onPressed: () {},
              icon: Icon(Icons.search),
            ),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
            Padding(
              padding: EdgeInsets.symmetric(vertical: 10.0),
              child: Container(
              width: 500.0,
              height: 200.0,
              color: Colors.orange,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(10.0), // 모서리를 둥글게 할 수 있습니다.
                child: Image.asset(
                  'assets/images/ad_image.jpg',  // 이미지 경로를 설정하세요
                  fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                ),
              ),
                        ),
            ),
              Container(
                child: Row(
                  textDirection: TextDirection.ltr,
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children:[
                          Container(
                            width: 60,
                            height: 60,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(50.0), // 20.0 만큼 둥글게 만들기
                          ),
                          child: ClipRRect(
                            borderRadius: BorderRadius.circular(30.0),
                            child: Image.asset(
                              'assets/images/img1.png',  // 이미지 경로를 설정하세요
                              fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                            ),
                          ),
                        ),
                          Container(
                              height:30.0,
                              width:50.0,
                              child: Align(
                                  alignment: Alignment.center,
                                  child: Text(
                                      '포장 주문',
                                      style: TextStyle(
                                        color: Colors.black,
                                        fontSize: 10.0,
                                      )
                                  )
                              )
                          ),
                ]
                      ),
                    ),
                    Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children:[
                            Container(
                              width: 60,
                              height: 60,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.circular(50.0), // 20.0 만큼 둥글게 만들기
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(30.0),
                                child: Image.asset(
                                  'assets/images/img3.jpg',  // 이미지 경로를 설정하세요
                                  fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                                ),
                              ),
                            ),
                            Container(
                                height:30.0,
                                width:50.0,
                                child: Align(
                                    alignment: Alignment.center,
                                    child: Text(
                                        '한식',
                                        style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 10.0,
                                        )
                                    )
                                )
                            ),
                          ]
                      ),
                    ),
                    Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children:[
                            Container(
                              width: 60,
                              height: 60,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.circular(50.0), // 20.0 만큼 둥글게 만들기
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(30.0),
                                child: Image.asset(
                                  'assets/images/img4.jpg',  // 이미지 경로를 설정하세요
                                  fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                                ),
                              ),
                            ),
                            Container(
                                height:30.0,
                                width:50.0,
                                child: Align(
                                    alignment: Alignment.center,
                                    child: Text(
                                        '치킨',
                                        style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 10.0,
                                        )
                                    )
                                )
                            ),
                          ]
                      ),
                    ),
                    Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children:[
                            Container(
                              width: 60,
                              height: 60,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.circular(50.0), // 20.0 만큼 둥글게 만들기
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(30.0),
                                child: Image.asset(
                                  'assets/images/img5.png',  // 이미지 경로를 설정하세요
                                  fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                                ),
                              ),
                            ),
                            Container(
                                height:40.0,
                                width:50.0,
                                child: Align(
                                    alignment: Alignment.center,
                                    child: Text(
                                        '분식',
                                        style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 10.0,
                                        )
                                    )
                                )
                            ),
                          ]
                      ),
                    ),
                    Container(
                      child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children:[
                            Container(
                              width: 60,
                              height: 60,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.circular(50.0), // 20.0 만큼 둥글게 만들기
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(30.0),
                                child: Image.asset(
                                  'assets/images/img6.jpg',  // 이미지 경로를 설정하세요
                                  fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                                ),
                              ),
                            ),
                            Container(
                                height:30.0,
                                width:50.0,
                                child: Align(
                                    alignment: Alignment.center,
                                    child: Text(
                                        '돈까스',
                                        style: TextStyle(
                                          color: Colors.black,
                                          fontSize: 10.0,
                                        )
                                    )
                                )
                            ),
                          ]
                      ),
                    ),
                  ],

                )
              ),
              Container( height:0.50,
                width:500.0,
                color:Colors.grey,),
              Container(
                height:50.0,
                width:500.0,
                child: Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 13.0),
                    child: Text(
                      '골라 먹는 맛집',
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 20.0,
                        fontWeight: FontWeight.w300
                      )
                    ),
                  )
                )
              ),
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    OutlinedButton(
                        onPressed: (){},
                        child: Text("인증 맛집"),
                        style: OutlinedButton.styleFrom(
                          minimumSize: Size(45.0,30.0)
                        )
                    ),
                    OutlinedButton(
                        onPressed: (){},
                        child: Text("추천순"),
                        style: OutlinedButton.styleFrom(
                            minimumSize: Size(45.0,30.0)
                        )
                    )
                    ,OutlinedButton(
                        onPressed: (){},
                        child: Text("배달비"),
                        style: OutlinedButton.styleFrom(
                            minimumSize: Size(45.0,30.0)
                        )
                    ),
                    OutlinedButton(
                        onPressed: (){},
                        child: Text("최소주문"),
                        style: OutlinedButton.styleFrom(
                            minimumSize: Size(45.0,30.0)
                        )
                    )
                  ],
                )
              ),
              Container(
                child:Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Container(
                        width: 280,
                        height: 180,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(20.0), // 20.0 만큼 둥글게 만들기
                        ),
                        child: Image.asset(
                          'assets/images/img2.jpg',  // 이미지 경로를 설정하세요
                          fit: BoxFit.cover,       // 이미지를 컨테이너에 맞게 잘라서 표시
                        ),
                      ),
                      Container(
                        child:Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Container(
                              width: 120,
                              height: 90,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                borderRadius: BorderRadius.circular(20.0), // 20.0 만큼 둥글게 만들기
                              )
                            ),
                            Container(
                                width: 120,
                                height: 90,
                                decoration: BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(20.0), // 20.0 만큼 둥글게 만들기
                                )
                            )
                          ],
                        )
                      )
                    ]
                )
              ),
              Container(
                  height:50.0,
                  width:500.0,
                  child: Align(
                      alignment: Alignment.centerLeft,
                      child: Text(
                          '베트남 노상 식당',
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20.0,
                          )
                      )
                  )
              ),
          ]
        ),
        ),

        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 1,
          fixedColor: Colors.black,
          backgroundColor: Colors.grey,
          unselectedLabelStyle: TextStyle(color: Colors.grey),
            unselectedItemColor: Colors.grey,
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: '홈',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: '검색',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.favorite),
              label: '즐겨찾기',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.check_box),
              label: '주문내역',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person_outline),
              label: '주문내역',
            ),
          ]
        ),
      ),
    );
  }
}