I want to make product page like in Zara's App. I am having trouble implementing their app functionality like in the app. They have an area where you can view images, that can be implemented using PageView
widget but How do I implement the bottom sheet functionality which comes up when swiped up ? I tried using DraggableScrollableSheet
but then I cannot use PageView
for images because DraggableScrollableSheet
is there which takes up the whole screen. My current implementaion is as follows :
class _IndividualProductState extends State<IndividualProduct> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
child: Stack(
children: <Widget>[
// ---------------Image container -----------------------------------------
Container(
padding: EdgeInsets.all(20),
color: Colors.white,
height: MediaQuery.of(context).size.height * 0.78,
width: MediaQuery.of(context).size.width,
child: PageView(
scrollDirection: Axis.vertical,
controller: PageController(initialPage: 1),
children: <Widget>[
Image.network(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
fit: BoxFit.contain,
),
Image.network(
"https://m.media-amazon.com/images/I/81pV8zF-RML._AC_UL320_ML3_.jpg",
fit: BoxFit.contain,
),
],
),
),
// -------------------------- For Product Description ---------------------------------------
Scaffold(
backgroundColor: Colors.transparent,
body: DraggableScrollableSheet(
minChildSize: 0.17,
initialChildSize: 0.17,
maxChildSize: 0.93,
builder:
(BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.grey[100],
child: ListView(
padding: EdgeInsets.all(0),
controller: scrollController,
children: <Widget>[
Center(
heightFactor: 0.3,
child: ListTile(
title: Icon(MaterialCommunityIcons.minus, size: 32),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: CustomText(
"COMFORT KNIT TEXTURED TROUSER",
weight: FontWeight.w500,
size: 15,
),
),
],
),
);
},
),
),
// Close icon to close the product page
Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
child: Icon(
Icons.close,
size: 32,
),
onTap: () {
Navigator.pop(context);
},
),
),
],
// ),
),
// ),
),
);
// );
}
}
I want the images to be scrollable also can bring up the description sheet via swipe up.