From 4593860a7449deb789aaee04b4fe57de983c01f8 Mon Sep 17 00:00:00 2001 From: Moe Poi ~ Date: Thu, 9 Nov 2023 23:19:14 +0700 Subject: [PATCH] Add size selector in product detail --- .metadata | 30 +-- lib/components/product_detail.dart | 325 ++++++++++++++++++----------- 2 files changed, 214 insertions(+), 141 deletions(-) diff --git a/.metadata b/.metadata index b41277d..a778330 100644 --- a/.metadata +++ b/.metadata @@ -4,7 +4,7 @@ # This file should be version controlled and should not be manually edited. version: - revision: "367f9ea16bfae1ca451b9cc27c1366870b187ae2" + revision: "d211f42860350d914a5ad8102f9ec32764dc6d06" channel: "stable" project_type: app @@ -13,26 +13,26 @@ project_type: app migration: platforms: - platform: root - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: android - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: ios - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: linux - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: macos - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: web - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 - platform: windows - create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 - base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 + create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 + base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06 # User provided section diff --git a/lib/components/product_detail.dart b/lib/components/product_detail.dart index 270d485..a927d1c 100644 --- a/lib/components/product_detail.dart +++ b/lib/components/product_detail.dart @@ -17,137 +17,210 @@ Widget makeDismissible({required context, required Widget child}) => Widget productDetail(context, id) { GlobalKey cartToolTipKey_ = GlobalKey(); + var selectedSize = 35; - return makeDismissible( - context: context, - child: DraggableScrollableSheet( - initialChildSize: 0.7, - minChildSize: 0.5, - maxChildSize: 0.965, - builder: (_, controller) => FutureBuilder( - future: getProduct(id), - builder: (context, snapshot) { - if (snapshot.hasData) { - var data = snapshot.data; - return Container( - decoration: const BoxDecoration( - color: Color(0xff1b1c1e), - borderRadius: - BorderRadius.vertical(top: Radius.circular(20))), - padding: const EdgeInsets.all(16), - child: ScrollConfiguration( - behavior: HideScrollGlow(), - child: ListView( - controller: controller, - children: [ - Center( - child: Text( - data[0]['TITLE'], - style: const TextStyle( - color: Colors.white, - fontSize: 30.0, - fontWeight: FontWeight.w700, + return StatefulBuilder(builder: (context, setState) { + return makeDismissible( + context: context, + child: DraggableScrollableSheet( + initialChildSize: 0.7, + minChildSize: 0.5, + maxChildSize: 0.965, + builder: (_, controller) => FutureBuilder( + future: getProduct(id), + builder: (context, snapshot) { + if (snapshot.hasData) { + var data = snapshot.data; + return Container( + decoration: const BoxDecoration( + color: Color(0xff1b1c1e), + borderRadius: BorderRadius.vertical( + top: Radius.circular(20))), + padding: const EdgeInsets.all(16), + child: ScrollConfiguration( + behavior: HideScrollGlow(), + child: ListView( + controller: controller, + children: [ + Center( + child: Text( + data[0]['TITLE'], + style: const TextStyle( + color: Colors.white, + fontSize: 30.0, + fontWeight: FontWeight.w700, + ), ), ), - ), - CachedNetworkImage( - imageUrl: - "https://nekoya.moe.team/img/${data[0]['IMAGE']}", - placeholder: (context, url) => - const CircularProgressIndicator( - color: Color(0xff8B0000), + CachedNetworkImage( + imageUrl: + "https://nekoya.moe.team/img/${data[0]['IMAGE']}", + placeholder: (context, url) => + const CircularProgressIndicator( + color: Color(0xff8B0000), + ), + errorWidget: (context, url, error) => + Image.asset( + 'assets/images/image_error.webp'), + fadeOutDuration: + const Duration(milliseconds: 5), + imageBuilder: (context, imageProvider) => + Container( + margin: const EdgeInsets.all(5.0), + width: 300, + height: 300, + decoration: BoxDecoration( + image: DecorationImage( + image: imageProvider, + fit: BoxFit.cover)), + ), ), - errorWidget: (context, url, error) => - Image.asset('assets/images/image_error.webp'), - fadeOutDuration: const Duration(milliseconds: 5), - imageBuilder: (context, imageProvider) => - Container( - margin: const EdgeInsets.all(5.0), - width: 300, - height: 300, - decoration: BoxDecoration( - image: DecorationImage( - image: imageProvider, - fit: BoxFit.cover)), + Text( + data[0]['DESCRIPTION'], + style: const TextStyle( + color: Colors.white, + fontSize: 18.0, + height: 2.0), ), - ), - Text( - data[0]['DESCRIPTION'], - style: const TextStyle( - color: Colors.white, fontSize: 18.0), - ), - const SizedBox(height: 20.0), - Text( - "Price : Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}", - style: const TextStyle( - color: Colors.white, - fontSize: 18.0, - fontWeight: FontWeight.w500), - ), - Text( - "Stock : ${data[0]['STOCK'].toString()}", - style: const TextStyle( - color: Colors.white, - fontSize: 18.0, - fontWeight: FontWeight.w500), - ), - Text( - "Size : ${data[0]['SIZE']}", - style: const TextStyle( - color: Colors.white, - fontSize: 18.0, - fontWeight: FontWeight.w500), - ), - const SizedBox(height: 30.0), - Tooltip( - key: cartToolTipKey_, - triggerMode: TooltipTriggerMode.manual, - showDuration: const Duration(seconds: 3), - waitDuration: const Duration(seconds: 3), - message: 'Successfully added to Cart ~', - padding: const EdgeInsets.all(30), - margin: const EdgeInsets.only( - top: 30, left: 30, right: 30), - decoration: BoxDecoration( - color: const Color(0xff212226), - borderRadius: BorderRadius.circular(22)), - textStyle: const TextStyle( - fontSize: 15, - fontStyle: FontStyle.italic, - color: Colors.white), - child: ElevatedButton.icon( - onPressed: () { - addToCart(id); - final dynamic cartToolTip_ = - cartToolTipKey_.currentState; - cartToolTip_.ensureTooltipVisible(); - }, - icon: const Icon(Icons.add_shopping_cart), - label: const Text( - 'Add to Cart', - style: TextStyle( - color: Colors.white, fontSize: 18.0), + DataTable(columns: const [ + DataColumn(label: Text('')), + DataColumn(label: Text('')) + ], rows: [ + DataRow(cells: [ + const DataCell( + Text( + "Price", + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500), + ), ), - style: ButtonStyle( - backgroundColor: - MaterialStateProperty.all( - const Color(0xff8B0000)), - shape: MaterialStateProperty.all< - RoundedRectangleBorder>( - RoundedRectangleBorder( - borderRadius: - BorderRadius.circular( - 18.0))))), - ) - ], - ), - )); - } + DataCell( + Text( + "Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}", + style: const TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500), + ), + ) + ]), + DataRow(cells: [ + const DataCell( + Text( + "Stock", + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500), + ), + ), + DataCell( + Text( + data[0]['STOCK'].toString(), + style: const TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500), + ), + ) + ]), + DataRow(cells: [ + const DataCell( + Text( + "Size", + style: TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: FontWeight.w500), + ), + ), + DataCell(DropdownButton( + value: selectedSize.toString(), + dropdownColor: const Color(0xff212226), + items: [ + '35', + '36', + '37', + '38', + '39', + '40', + '41', + '42', + '43', + '44', + '45' + ].map((value) { + return DropdownMenuItem( + value: value, + child: Text(value, + style: const TextStyle( + color: Colors.white, + fontSize: 18.0, + fontWeight: + FontWeight.w500))); + }).toList(), + onChanged: (newValue) { + setState(() { + selectedSize = + int.parse(newValue ?? '35'); + }); + }, + )) + ]) + ]), + const SizedBox(height: 30.0), + Tooltip( + key: cartToolTipKey_, + triggerMode: TooltipTriggerMode.manual, + showDuration: const Duration(seconds: 3), + waitDuration: const Duration(seconds: 3), + message: 'Successfully added to Cart ~', + padding: const EdgeInsets.all(30), + margin: const EdgeInsets.only( + top: 30, left: 30, right: 30), + decoration: BoxDecoration( + color: const Color(0xff212226), + borderRadius: BorderRadius.circular(22)), + textStyle: const TextStyle( + fontSize: 15, + fontStyle: FontStyle.italic, + color: Colors.white), + child: ElevatedButton.icon( + onPressed: () { + addToCart(id); + final dynamic cartToolTip_ = + cartToolTipKey_.currentState; + cartToolTip_.ensureTooltipVisible(); + }, + icon: const Icon(Icons.add_shopping_cart), + label: const Text( + 'Add to Cart', + style: TextStyle( + color: Colors.white, fontSize: 18.0), + ), + style: ButtonStyle( + backgroundColor: + MaterialStateProperty.all( + const Color(0xff8B0000)), + shape: MaterialStateProperty.all< + RoundedRectangleBorder>( + RoundedRectangleBorder( + borderRadius: + BorderRadius.circular( + 18.0))))), + ) + ], + ), + )); + } - return const Center( - child: CircularProgressIndicator( - color: Color(0xff8B0000), - ), - ); - }))); + return const Center( + child: CircularProgressIndicator( + color: Color(0xff8B0000), + ), + ); + }))); + }); }