Add size selector in product detail
This commit is contained in:
parent
47ba03d1e2
commit
4593860a74
2 changed files with 214 additions and 141 deletions
30
.metadata
30
.metadata
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -17,137 +17,210 @@ 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 makeDismissible(
|
return StatefulBuilder(builder: (context, setState) {
|
||||||
context: context,
|
return makeDismissible(
|
||||||
child: DraggableScrollableSheet(
|
context: context,
|
||||||
initialChildSize: 0.7,
|
child: DraggableScrollableSheet(
|
||||||
minChildSize: 0.5,
|
initialChildSize: 0.7,
|
||||||
maxChildSize: 0.965,
|
minChildSize: 0.5,
|
||||||
builder: (_, controller) => FutureBuilder<dynamic>(
|
maxChildSize: 0.965,
|
||||||
future: getProduct(id),
|
builder: (_, controller) => FutureBuilder<dynamic>(
|
||||||
builder: (context, snapshot) {
|
future: getProduct(id),
|
||||||
if (snapshot.hasData) {
|
builder: (context, snapshot) {
|
||||||
var data = snapshot.data;
|
if (snapshot.hasData) {
|
||||||
return Container(
|
var data = snapshot.data;
|
||||||
decoration: const BoxDecoration(
|
return Container(
|
||||||
color: Color(0xff1b1c1e),
|
decoration: const BoxDecoration(
|
||||||
borderRadius:
|
color: Color(0xff1b1c1e),
|
||||||
BorderRadius.vertical(top: Radius.circular(20))),
|
borderRadius: BorderRadius.vertical(
|
||||||
padding: const EdgeInsets.all(16),
|
top: Radius.circular(20))),
|
||||||
child: ScrollConfiguration(
|
padding: const EdgeInsets.all(16),
|
||||||
behavior: HideScrollGlow(),
|
child: ScrollConfiguration(
|
||||||
child: ListView(
|
behavior: HideScrollGlow(),
|
||||||
controller: controller,
|
child: ListView(
|
||||||
children: [
|
controller: controller,
|
||||||
Center(
|
children: [
|
||||||
child: Text(
|
Center(
|
||||||
data[0]['TITLE'],
|
child: Text(
|
||||||
style: const TextStyle(
|
data[0]['TITLE'],
|
||||||
color: Colors.white,
|
style: const TextStyle(
|
||||||
fontSize: 30.0,
|
color: Colors.white,
|
||||||
fontWeight: FontWeight.w700,
|
fontSize: 30.0,
|
||||||
|
fontWeight: FontWeight.w700,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
CachedNetworkImage(
|
||||||
CachedNetworkImage(
|
imageUrl:
|
||||||
imageUrl:
|
"https://nekoya.moe.team/img/${data[0]['IMAGE']}",
|
||||||
"https://nekoya.moe.team/img/${data[0]['IMAGE']}",
|
placeholder: (context, url) =>
|
||||||
placeholder: (context, url) =>
|
const CircularProgressIndicator(
|
||||||
const CircularProgressIndicator(
|
color: Color(0xff8B0000),
|
||||||
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) =>
|
Text(
|
||||||
Image.asset('assets/images/image_error.webp'),
|
data[0]['DESCRIPTION'],
|
||||||
fadeOutDuration: const Duration(milliseconds: 5),
|
style: const TextStyle(
|
||||||
imageBuilder: (context, imageProvider) =>
|
color: Colors.white,
|
||||||
Container(
|
fontSize: 18.0,
|
||||||
margin: const EdgeInsets.all(5.0),
|
height: 2.0),
|
||||||
width: 300,
|
|
||||||
height: 300,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
image: DecorationImage(
|
|
||||||
image: imageProvider,
|
|
||||||
fit: BoxFit.cover)),
|
|
||||||
),
|
),
|
||||||
),
|
DataTable(columns: const [
|
||||||
Text(
|
DataColumn(label: Text('')),
|
||||||
data[0]['DESCRIPTION'],
|
DataColumn(label: Text(''))
|
||||||
style: const TextStyle(
|
], rows: [
|
||||||
color: Colors.white, fontSize: 18.0),
|
DataRow(cells: [
|
||||||
),
|
const DataCell(
|
||||||
const SizedBox(height: 20.0),
|
Text(
|
||||||
Text(
|
"Price",
|
||||||
"Price : Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}",
|
style: TextStyle(
|
||||||
style: const TextStyle(
|
color: Colors.white,
|
||||||
color: Colors.white,
|
fontSize: 18.0,
|
||||||
fontSize: 18.0,
|
fontWeight: FontWeight.w500),
|
||||||
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),
|
|
||||||
),
|
),
|
||||||
style: ButtonStyle(
|
DataCell(
|
||||||
backgroundColor:
|
Text(
|
||||||
MaterialStateProperty.all<Color>(
|
"Rp ${NumberFormat('#,##0.00', 'ID').format(data[0]['PRICE'])}",
|
||||||
const Color(0xff8B0000)),
|
style: const TextStyle(
|
||||||
shape: MaterialStateProperty.all<
|
color: Colors.white,
|
||||||
RoundedRectangleBorder>(
|
fontSize: 18.0,
|
||||||
RoundedRectangleBorder(
|
fontWeight: FontWeight.w500),
|
||||||
borderRadius:
|
),
|
||||||
BorderRadius.circular(
|
)
|
||||||
18.0))))),
|
]),
|
||||||
)
|
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<Color>(
|
||||||
|
const Color(0xff8B0000)),
|
||||||
|
shape: MaterialStateProperty.all<
|
||||||
|
RoundedRectangleBorder>(
|
||||||
|
RoundedRectangleBorder(
|
||||||
|
borderRadius:
|
||||||
|
BorderRadius.circular(
|
||||||
|
18.0))))),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
));
|
||||||
|
}
|
||||||
|
|
||||||
return const Center(
|
return const Center(
|
||||||
child: CircularProgressIndicator(
|
child: CircularProgressIndicator(
|
||||||
color: Color(0xff8B0000),
|
color: Color(0xff8B0000),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
})));
|
})));
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue