20-product listing UI completed

This commit is contained in:
vignesh 2022-06-17 12:23:49 +05:30
parent eac4d21d96
commit 6ad19b1820
3 changed files with 398 additions and 12 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 716 KiB

View File

@ -56,7 +56,9 @@ class _ProductListingState extends State<ProductListing>
),
],
),
Spacer(),
SizedBox(
height: 30,
),
TabBar(
indicator: BoxDecoration(
color: primaryColor,
@ -79,20 +81,374 @@ class _ProductListingState extends State<ProductListing>
Tab(text: "North In"),
],
),
Container(
width: double.maxFinite,
height: 600,
child: TabBarView(
controller: _tabController,
SizedBox(
height: 30,
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
children: [
Text('data'),
Text('data'),
Text('data'),
Text('data'),
Text('data'),
InkWell(
onTap: () {
BottomSheets(context);
},
child: Container(
height: 220,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
boxShadow: [
BoxShadow(
color: White,
offset: Offset(4.0, 4.0),
blurRadius: 10.0,
spreadRadius: 1.0,
),
],
),
child: Stack(
children: [
Column(
children: [
Image(
image: AssetImage(
'assets/images/Chicken_Briyani.png'),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15, right: 15),
child: Row(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Chicken Briyani',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: HeadText,
color: DarkGray,
),
),
SizedBox(
height: 5,
),
Text(
'₹ 180.00',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w600,
fontSize: HeadText,
color: DarkGray,
),
),
],
),
Spacer(),
Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(
left: 5,
right: 5,
),
height: 25,
width: 50,
decoration: BoxDecoration(
color: Color(0xFFF0A30C),
borderRadius:
BorderRadius.circular(5),
),
child: Row(
children: [
Text(
'4.2',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: White,
),
),
Spacer(),
Icon(
Icons.star_rate_rounded,
size: 20,
color: White,
)
],
),
),
SizedBox(
height: 5,
),
Text(
'56 ratings',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: Gray,
),
),
],
),
],
),
),
],
),
],
),
),
),
SizedBox(height: 10),
Container(
height: 220,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: White,
offset: Offset(4.0, 4.0),
blurRadius: 10.0,
spreadRadius: 1.0,
),
],
),
child: Stack(
children: [
Column(
children: [
Image(
image: AssetImage(
'assets/images/MuttonBriyani.png'),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15, right: 15),
child: Row(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Mutton Briyani',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: HeadText,
color: DarkGray,
),
),
SizedBox(
height: 5,
),
Text(
'₹ 270.00',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w600,
fontSize: HeadText,
color: DarkGray,
),
),
],
),
Spacer(),
Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(
left: 5,
right: 5,
),
height: 25,
width: 50,
decoration: BoxDecoration(
color: Color(0xFFF0A30C),
borderRadius:
BorderRadius.circular(5),
),
child: Row(
children: [
Text(
'3.8',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: White,
),
),
Spacer(),
Icon(
Icons.star_rate_rounded,
size: 20,
color: White,
)
],
),
),
SizedBox(
height: 5,
),
Text(
'56 ratings',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: Gray,
),
),
],
),
],
),
),
],
),
],
),
),
SizedBox(height: 10),
Container(
height: 220,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
boxShadow: [
BoxShadow(
color: White,
offset: Offset(4.0, 4.0),
blurRadius: 10.0,
spreadRadius: 1.0,
),
],
),
child: Stack(
children: [
Column(
children: [
Image(
image: AssetImage(
'assets/images/GrilledChicken.png'),
),
Padding(
padding: const EdgeInsets.only(
top: 10, left: 15, right: 15),
child: Row(
children: [
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Chicken Briyani',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w500,
fontSize: HeadText,
color: DarkGray,
),
),
SizedBox(
height: 5,
),
Text(
'₹ 180.00',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w600,
fontSize: HeadText,
color: DarkGray,
),
),
],
),
Spacer(),
Column(
crossAxisAlignment:
CrossAxisAlignment.end,
children: [
Container(
padding: EdgeInsets.only(
left: 5,
right: 5,
),
height: 25,
width: 50,
decoration: BoxDecoration(
color: Color(0xFFF0A30C),
borderRadius:
BorderRadius.circular(5),
),
child: Row(
children: [
Text(
'4.2',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: White,
),
),
Spacer(),
Icon(
Icons.star_rate_rounded,
size: 20,
color: White,
)
],
),
),
SizedBox(
height: 5,
),
Text(
'56 ratings',
style: TextStyle(
fontFamily: Font,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.w400,
fontSize: SubText,
color: Gray,
),
),
],
),
],
),
),
],
),
],
),
),
],
),
),
)
],
),
),
@ -100,3 +456,33 @@ class _ProductListingState extends State<ProductListing>
);
}
}
void BottomSheets(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10),
topRight: Radius.circular(10),
),
),
child: Column(
children: [
Image(
image: AssetImage('assets/images/Chicken_Briyani.png'),
),
Row(
children: [
Image(
image: AssetImage('assets/images/nonveg_icon.png'),
height: 10,
width: 10,
)
],
),
],
),
),
);
}