Flutter
[Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠
Song hyun
2024. 11. 6. 10:47
728x90
반응형
[Flutter] 23. 디자이너스 앱 레퍼런스를 보며 구현해보기 - 쿠팡 이츠
https://designus.io/reference/service/15
레퍼런스 (쿠팡이츠) | 디자이너스
세상의 모든 디자이너들을 위한 공간, 디자이너스(Designus)
designus.io
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: '주문내역',
),
]
),
),
);
}
}728x90
반응형