From ea2fd3bb68ebc1f37cc35c055557c51244e3db2d Mon Sep 17 00:00:00 2001 From: cho4u4o Date: Sun, 6 Oct 2024 18:43:02 +0900 Subject: [PATCH] feat : add sort button, item count --- lib/screens/products/item_list_page.dart | 60 +++- lib/screens/products/liked_list_page.dart | 190 +++---------- lib/screens/products/product_detail_page.dart | 257 +++++------------- 3 files changed, 163 insertions(+), 344 deletions(-) diff --git a/lib/screens/products/item_list_page.dart b/lib/screens/products/item_list_page.dart index 3e5ed41..f25b253 100644 --- a/lib/screens/products/item_list_page.dart +++ b/lib/screens/products/item_list_page.dart @@ -15,11 +15,20 @@ class ItemListPage extends StatefulWidget { class _ItemListPageState extends State { late Future> _products; + int cnt = 0; @override void initState() { super.initState(); _products = getProducts(); + countProducts(); + } + + Future countProducts() async { + List products = await getProducts(); // getProducts()에서 결과를 대기 + setState(() { + cnt = products.length; // 제품 개수를 cnt에 설정 + }); } Future> getProducts() async { @@ -82,13 +91,39 @@ class _ItemListPageState extends State { slivers: [ SliverToBoxAdapter( child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 30.0), + padding: const EdgeInsets.symmetric( + horizontal: 30.0, + ), child: Text( widget.name, style: titleText(), ), ), ), + const SliverToBoxAdapter( + child: SizedBox( + height: 10, + ), + ), + SliverPadding( + padding: const EdgeInsets.symmetric(horizontal: 20), + sliver: SliverToBoxAdapter( + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + '상품 $cnt', + style: subTitleText(), + ), + IconButton( + icon: const Icon(Icons.sort_outlined), + onPressed: () {}, + ), + ], + ), + ), + ), SliverPadding( padding: const EdgeInsets.all(20), sliver: SliverToBoxAdapter( @@ -131,4 +166,27 @@ class _ItemListPageState extends State { ), ); } + + Container buildFilterButton(String label) { + return Container( + height: 45, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + border: Border.all(color: gray300, width: 1), + color: white, + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 13.0, vertical: 8), + child: Center( + child: Text( + label, + style: const TextStyle( + fontFamily: "Pretendard", + fontSize: 15, + fontWeight: FontWeight.bold), + ), + ), + ), + ); + } } diff --git a/lib/screens/products/liked_list_page.dart b/lib/screens/products/liked_list_page.dart index 1f19fe5..0a77dff 100644 --- a/lib/screens/products/liked_list_page.dart +++ b/lib/screens/products/liked_list_page.dart @@ -16,7 +16,6 @@ class LikedListPage extends StatefulWidget { class _LikedListPageState extends State { final NumberFormat numberFormat = NumberFormat('###,###,###,###'); - final int productLength = 6; @override Widget build(BuildContext context) { @@ -31,20 +30,12 @@ class _LikedListPageState extends State { mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ IconButton( - icon: const Icon( - Icons.arrow_back_ios, - size: 25, - ), + icon: const Icon(Icons.arrow_back_ios, size: 25), onPressed: () {}, ), SizedBox(height: 50, width: screenWidth - 150), IconButton( - icon: const Icon( - Icons.search, - size: 25, - ), - onPressed: () {}, - ), + icon: const Icon(Icons.search, size: 25), onPressed: () {}), ], ), ), @@ -61,148 +52,18 @@ class _LikedListPageState extends State { child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: mainPrimary, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "전체", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - color: white, - fontWeight: FontWeight.bold), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: white, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "스마트폰", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - fontWeight: FontWeight.bold), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: white, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "노트북", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - fontWeight: FontWeight.bold), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: white, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "웨어러블", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - fontWeight: FontWeight.bold), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: white, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "노트북", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - fontWeight: FontWeight.bold), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Container( - height: 45, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray300, width: 1), - color: white, - ), - child: const Padding( - padding: EdgeInsets.symmetric( - horizontal: 13.0, vertical: 8), - child: Center( - child: Text( - "웨어러블", - style: TextStyle( - fontFamily: "Pretendard", - fontSize: 15, - fontWeight: FontWeight.bold), - ), - ), - ), - ), + buildFilterButton("전체"), + const SizedBox(width: 10), + buildFilterButton("스마트폰"), + const SizedBox(width: 10), + buildFilterButton("스마트폰"), + const SizedBox(width: 10), + buildFilterButton("스마트폰"), + const SizedBox(width: 10), + buildFilterButton("스마트폰"), + const SizedBox(width: 10), + buildFilterButton("스마트폰"), + const SizedBox(width: 10), ], ), ), @@ -225,4 +86,27 @@ class _LikedListPageState extends State { ), ); } + + Container buildFilterButton(String label) { + return Container( + height: 45, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20), + border: Border.all(color: gray300, width: 1), + color: white, + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 13.0, vertical: 8), + child: Center( + child: Text( + label, + style: const TextStyle( + fontFamily: "Pretendard", + fontSize: 15, + fontWeight: FontWeight.bold), + ), + ), + ), + ); + } } diff --git a/lib/screens/products/product_detail_page.dart b/lib/screens/products/product_detail_page.dart index 199441f..392aa45 100644 --- a/lib/screens/products/product_detail_page.dart +++ b/lib/screens/products/product_detail_page.dart @@ -1,6 +1,5 @@ import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; -import 'package:intl/intl.dart'; import 'package:saphy/screens/purchase/purchase_page.dart'; import 'package:saphy/utils/colors.dart'; import 'package:saphy/utils/number_format.dart'; @@ -196,9 +195,7 @@ class _ProductDetailState extends State { ), ], ), - const SizedBox( - height: 10, - ), + const SizedBox(height: 10), Container( // 등급 안내 상자 width: double.infinity, @@ -314,138 +311,26 @@ class _ProductDetailState extends State { ), ), ), - const SizedBox( - height: 20, - ), - Container( - width: double.infinity, - height: 100, - decoration: BoxDecoration( - color: white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray400, width: 0.5)), - child: const Padding( - padding: EdgeInsets.all(20), - child: Text("다른 색상 메뉴"), - ), - ), - const SizedBox( - height: 20, - ), - Container( - width: double.infinity, - height: 100, - decoration: BoxDecoration( - color: white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray400, width: 0.5), - ), - child: const Padding( - padding: EdgeInsets.all(20), - child: Text("쿠폰 발급 메뉴"), - ), - ), - const SizedBox( - height: 20, - ), + const SizedBox(height: 20), + spaceDivider("다른 색상 메뉴"), + const SizedBox(height: 20), + spaceDivider("쿠폰 발급 메뉴"), + const SizedBox(height: 20), Row( // 버튼 mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.end, children: [ - Flexible( - flex: 1, - child: InkWell( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => PurchasePage( - product: widget.product, - )), - ); - }, - child: Container( - height: 50, - decoration: BoxDecoration( - color: const Color(0xff404756), - borderRadius: BorderRadius.circular(10), - ), - child: const Center( - child: Text( - "구매하기", - style: TextStyle( - fontWeight: FontWeight.bold, - fontFamily: "Pretendard", - fontSize: 15, - color: white, - ), - ), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Flexible( - flex: 1, - child: Container( - height: 50, - decoration: BoxDecoration( - color: const Color(0xff404756), - borderRadius: BorderRadius.circular(10), - ), - child: const Center( - child: Text( - "판매하기", - style: TextStyle( - fontWeight: FontWeight.bold, - fontFamily: "Pretendard", - fontSize: 15, - color: white, - ), - ), - ), - ), - ), + Flexible(flex: 1, child: button("구매하기")), + const SizedBox(width: 10), + Flexible(flex: 1, child: button("판매하기")), ], ), - const SizedBox( - height: 20, - ), - Container( - // 상품 정보 - width: double.infinity, - height: 900, - decoration: BoxDecoration( - color: white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray400, width: 0.5)), - child: const Padding( - padding: EdgeInsets.all(20), - child: Text("상품 정보 사진 칸"), - ), - ), - const SizedBox( - height: 20, - ), - Container( - // 상품 정보 - width: double.infinity, - height: 400, - decoration: BoxDecoration( - color: white, - borderRadius: BorderRadius.circular(20), - border: Border.all(color: gray400, width: 0.5)), - child: const Padding( - padding: EdgeInsets.all(20), - child: Text("댓글 칸"), - ), - ), - const SizedBox( - height: 160, - ), + const SizedBox(height: 20), + spaceDivider("상품 정보 사진 칸"), + const SizedBox(height: 20), + spaceDivider("댓글 칸"), + const SizedBox(height: 160), ], ), ), @@ -457,76 +342,20 @@ class _ProductDetailState extends State { child: Container( width: screenWidth, height: 100, - color: const Color(0xfff4f4f4f4), + color: altWhite, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20.0), child: Row( - // 버튼 mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.center, children: [ IconButton( onPressed: () {}, icon: const Icon(Icons.favorite_outline)), - const SizedBox( - width: 10, - ), - Flexible( - flex: 1, - child: InkWell( - onTap: () { - Navigator.push( - context, - MaterialPageRoute( - builder: (context) => PurchasePage( - product: widget.product, - )), - ); - }, - child: Container( - height: 50, - decoration: BoxDecoration( - color: const Color(0xff404756), - borderRadius: BorderRadius.circular(10), - ), - child: const Center( - child: Text( - "구매하기", - style: TextStyle( - fontWeight: FontWeight.bold, - fontFamily: "Pretendard", - fontSize: 15, - color: white, - ), - ), - ), - ), - ), - ), - const SizedBox( - width: 10, - ), - Flexible( - flex: 1, - child: Container( - height: 50, - decoration: BoxDecoration( - color: const Color(0xff404756), - borderRadius: BorderRadius.circular(10), - ), - child: const Center( - child: Text( - "판매하기", - style: TextStyle( - fontWeight: FontWeight.bold, - fontFamily: "Pretendard", - fontSize: 15, - color: white, - ), - ), - ), - ), - ), + const SizedBox(width: 10), + Flexible(flex: 1, child: button("구매하기")), + const SizedBox(width: 10), + Flexible(flex: 1, child: button("판매하기")), ], ), ), @@ -536,4 +365,52 @@ class _ProductDetailState extends State { ), ); } + + InkWell button(String label) { + return InkWell( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => PurchasePage( + product: widget.product, + )), + ); + }, + child: Container( + height: 50, + decoration: BoxDecoration( + color: const Color(0xff404756), + borderRadius: BorderRadius.circular(10), + ), + child: Center( + child: Text( + label, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontFamily: "Pretendard", + fontSize: 15, + color: white, + ), + ), + ), + ), + ); + } + + Container spaceDivider(String label) { + return Container( + width: double.infinity, + height: 100, + decoration: BoxDecoration( + color: white, + borderRadius: BorderRadius.circular(20), + border: Border.all(color: gray400, width: 0.5), + ), + child: Padding( + padding: const EdgeInsets.all(20), + child: Text(label), + ), + ); + } }