Add size selector in product detail

This commit is contained in:
Moe Poi ~ 2023-11-09 23:19:14 +07:00
parent 47ba03d1e2
commit 4593860a74
2 changed files with 214 additions and 141 deletions

View file

@ -4,7 +4,7 @@
# This file should be version controlled and should not be manually edited. # This file should be version controlled and should not be manually edited.
version: version:
revision: "367f9ea16bfae1ca451b9cc27c1366870b187ae2" revision: "d211f42860350d914a5ad8102f9ec32764dc6d06"
channel: "stable" channel: "stable"
project_type: app project_type: app
@ -13,26 +13,26 @@ project_type: app
migration: migration:
platforms: platforms:
- platform: root - platform: root
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: android - platform: android
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: ios - platform: ios
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: linux - platform: linux
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: macos - platform: macos
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: web - platform: web
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
- platform: windows - platform: windows
create_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 create_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
base_revision: 367f9ea16bfae1ca451b9cc27c1366870b187ae2 base_revision: d211f42860350d914a5ad8102f9ec32764dc6d06
# User provided section # User provided section

View file

@ -17,7 +17,9 @@ Widget makeDismissible({required context, required Widget child}) =>
Widget productDetail(context, id) { Widget productDetail(context, id) {
GlobalKey cartToolTipKey_ = GlobalKey(); GlobalKey cartToolTipKey_ = GlobalKey();
var selectedSize = 35;
return StatefulBuilder(builder: (context, setState) {
return makeDismissible( return makeDismissible(
context: context, context: context,
child: DraggableScrollableSheet( child: DraggableScrollableSheet(
@ -32,8 +34,8 @@ Widget productDetail(context, id) {
return Container( return Container(
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: Color(0xff1b1c1e), color: Color(0xff1b1c1e),
borderRadius: borderRadius: BorderRadius.vertical(
BorderRadius.vertical(top: Radius.circular(20))), top: Radius.circular(20))),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: ScrollConfiguration( child: ScrollConfiguration(
behavior: HideScrollGlow(), behavior: HideScrollGlow(),
@ -58,8 +60,10 @@ Widget productDetail(context, id) {
color: Color(0xff8B0000), color: Color(0xff8B0000),
), ),
errorWidget: (context, url, error) => errorWidget: (context, url, error) =>
Image.asset('assets/images/image_error.webp'), Image.asset(
fadeOutDuration: const Duration(milliseconds: 5), 'assets/images/image_error.webp'),
fadeOutDuration:
const Duration(milliseconds: 5),
imageBuilder: (context, imageProvider) => imageBuilder: (context, imageProvider) =>
Container( Container(
margin: const EdgeInsets.all(5.0), margin: const EdgeInsets.all(5.0),
@ -74,30 +78,98 @@ Widget productDetail(context, id) {
Text( Text(
data[0]['DESCRIPTION'], data[0]['DESCRIPTION'],
style: const TextStyle( style: const TextStyle(
color: Colors.white, fontSize: 18.0), color: Colors.white,
fontSize: 18.0,
height: 2.0),
), ),
const SizedBox(height: 20.0), DataTable(columns: const [
DataColumn(label: Text('')),
DataColumn(label: Text(''))
], rows: [
DataRow(cells: [
const DataCell(
Text( Text(
"Price : Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}", "Price",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.w500),
),
),
DataCell(
Text(
"Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}",
style: const TextStyle( style: const TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 18.0, fontSize: 18.0,
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
)
]),
DataRow(cells: [
const DataCell(
Text( Text(
"Stock : ${data[0]['STOCK'].toString()}", "Stock",
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
fontWeight: FontWeight.w500),
),
),
DataCell(
Text(
data[0]['STOCK'].toString(),
style: const TextStyle( style: const TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 18.0, fontSize: 18.0,
fontWeight: FontWeight.w500), fontWeight: FontWeight.w500),
), ),
)
]),
DataRow(cells: [
const DataCell(
Text( Text(
"Size : ${data[0]['SIZE']}", "Size",
style: const TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 18.0, fontSize: 18.0,
fontWeight: FontWeight.w500), 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), const SizedBox(height: 30.0),
Tooltip( Tooltip(
key: cartToolTipKey_, key: cartToolTipKey_,
@ -150,4 +222,5 @@ Widget productDetail(context, id) {
), ),
); );
}))); })));
});
} }