Skip to content

Commit

Permalink
Refactor product tile widget in category screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@PlugFox
PlugFox committed Dec 19, 2023
1 parent 636bace commit 1d18219
Show file tree
Hide file tree
Showing 3 changed files with 349 additions and 143 deletions.
42 changes: 21 additions & 21 deletions example/assets/data/products.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"description": "OPPO F19 is officially announced on April 2021.",
"price": 280,
"discountPercentage": 17.91,
"rating": 4.3,
"rating": 2.3,
"stock": 123,
"brand": "OPPO",
"category": "smartphones",
Expand All @@ -75,7 +75,7 @@
"description": "Huawei’s re-badged P30 Pro New Edition was officially unveiled yesterday in Germany and now the device has made its way to the UK.",
"price": 499,
"discountPercentage": 10.58,
"rating": 4.09,
"rating": 3.09,
"stock": 32,
"brand": "Huawei",
"category": "smartphones",
Expand Down Expand Up @@ -110,7 +110,7 @@
"description": "Samsung Galaxy Book S (2020) Laptop With Intel Lakefield Chip, 8GB of RAM Launched",
"price": 1499,
"discountPercentage": 4.15,
"rating": 4.25,
"rating": 4.7,
"stock": 50,
"brand": "Samsung",
"category": "laptops",
Expand All @@ -128,7 +128,7 @@
"description": "Style and speed. Stand out on HD video calls backed by Studio Mics. Capture ideas on the vibrant touchscreen.",
"price": 1499,
"discountPercentage": 10.23,
"rating": 4.43,
"rating": 3.43,
"stock": 68,
"brand": "Microsoft Surface",
"category": "laptops",
Expand All @@ -147,7 +147,7 @@
"description": "Infinix Inbook X1 Ci3 10th 8GB 256GB 14 Win10 Grey – 1 Year Warranty",
"price": 1099,
"discountPercentage": 11.83,
"rating": 4.54,
"rating": 2.54,
"stock": 96,
"brand": "Infinix",
"category": "laptops",
Expand All @@ -166,7 +166,7 @@
"description": "HP Pavilion 15-DK1056WM Gaming Laptop 10th Gen Core i5, 8GB, 256GB SSD, GTX 1650 4GB, Windows 10",
"price": 1099,
"discountPercentage": 6.18,
"rating": 4.43,
"rating": 3.43,
"stock": 89,
"brand": "HP Pavilion",
"category": "laptops",
Expand All @@ -184,7 +184,7 @@
"description": "Mega Discount, Impression of Acqua Di Gio by GiorgioArmani concentrated attar Perfume Oil",
"price": 13,
"discountPercentage": 8.4,
"rating": 4.26,
"rating": 3.26,
"stock": 65,
"brand": "Impression of Acqua Di Gio",
"category": "fragrances",
Expand All @@ -202,7 +202,7 @@
"description": "Royal_Mirage Sport Brown Perfume for Men & Women - 120ml",
"price": 40,
"discountPercentage": 15.66,
"rating": 4,
"rating": 2.2,
"stock": 52,
"brand": "Royal_Mirage",
"category": "fragrances",
Expand All @@ -221,7 +221,7 @@
"description": "Product details of Best Fog Scent Xpressio Perfume 100ml For Men cool long lasting perfumes for Men",
"price": 13,
"discountPercentage": 8.14,
"rating": 4.59,
"rating": 3.59,
"stock": 61,
"brand": "Fog Scent Xpressio",
"category": "fragrances",
Expand All @@ -240,7 +240,7 @@
"description": "Original Al Munakh® by Mahal Al Musk | Our Impression of Climate | 6ml Non-Alcoholic Concentrated Perfume Oil",
"price": 120,
"discountPercentage": 15.6,
"rating": 4.21,
"rating": 1.21,
"stock": 114,
"brand": "Al Munakh",
"category": "fragrances",
Expand Down Expand Up @@ -296,7 +296,7 @@
"description": "Tea tree oil contains a number of compounds, including terpinen-4-ol, that have been shown to kill certain bacteria,",
"price": 12,
"discountPercentage": 4.09,
"rating": 4.52,
"rating": 3.52,
"stock": 78,
"brand": "Hemani Tea",
"category": "skincare",
Expand Down Expand Up @@ -333,7 +333,7 @@
"description": "Product name: rorec collagen hyaluronic acid white face serum riceNet weight: 15 m",
"price": 46,
"discountPercentage": 10.68,
"rating": 4.42,
"rating": 2.42,
"stock": 54,
"brand": "ROREC White Rice",
"category": "skincare",
Expand All @@ -351,7 +351,7 @@
"description": "Fair & Clear is Pakistan's only pure Freckle cream which helpsfade Freckles, Darkspots and pigments. Mercury level is 0%, so there are no side effects.",
"price": 70,
"discountPercentage": 16.99,
"rating": 4.06,
"rating": 1.06,
"stock": 140,
"brand": "Fair & Clear",
"category": "skincare",
Expand All @@ -370,7 +370,7 @@
"description": "Fine quality Branded Product Keep in a cool and dry place",
"price": 20,
"discountPercentage": 4.81,
"rating": 4.44,
"rating": 3.44,
"stock": 133,
"brand": "Saaf & Khaas",
"category": "groceries",
Expand All @@ -387,7 +387,7 @@
"description": "Product details of Bake Parlor Big Elbow Macaroni - 400 gm",
"price": 14,
"discountPercentage": 15.58,
"rating": 4.57,
"rating": 2.57,
"stock": 146,
"brand": "Bake Parlor Big",
"category": "groceries",
Expand Down Expand Up @@ -419,11 +419,11 @@
},
{
"id": 24,
"title": "cereals muesli fruit nuts",
"description": "original fauji cereal muesli 250gm box pack original fauji cereals muesli fruit nuts flakes breakfast cereal break fast faujicereals cerels cerel foji fouji",
"title": "Cereals muesli fruit nuts",
"description": "Original fauji cereal muesli 250gm box pack original fauji cereals muesli fruit nuts flakes breakfast cereal break fast faujicereals cerels cerel foji fouji",
"price": 46,
"discountPercentage": 16.8,
"rating": 4.94,
"rating": 3.94,
"stock": 113,
"brand": "fauji",
"category": "groceries",
Expand Down Expand Up @@ -461,7 +461,7 @@
"description": "Boho Decor Plant Hanger For Home Wall Decoration Macrame Wall Hanging Shelf",
"price": 41,
"discountPercentage": 17.86,
"rating": 4.08,
"rating": 3.08,
"stock": 131,
"brand": "Boho Decor",
"category": "home-decoration",
Expand Down Expand Up @@ -500,7 +500,7 @@
"description": "3D led lamp sticker Wall sticker 3d wall art light on/off button cell operated (included)",
"price": 20,
"discountPercentage": 16.49,
"rating": 4.82,
"rating": 3.82,
"stock": 54,
"brand": "LED Lights",
"category": "home-decoration",
Expand All @@ -519,7 +519,7 @@
"description": "Handcraft Chinese style art luxury palace hotel villa mansion home decor ceramic vase with brass fruit plate",
"price": 60,
"discountPercentage": 15.34,
"rating": 4.44,
"rating": 2.44,
"stock": 7,
"brand": "luxury palace",
"category": "home-decoration",
Expand Down
149 changes: 78 additions & 71 deletions example/lib/src/feature/shop/widget/category_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,89 +171,96 @@ class _ProductTile extends StatelessWidget {
: child;

@override
Widget build(BuildContext context) => Card(
clipBehavior: Clip.antiAlias,
color: Theme.of(context).cardColor,
margin: const EdgeInsets.all(4),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Stack(
children: <Widget>[
// Content
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Padding(
padding: const EdgeInsets.all(8),
child: discountBanner(
child: _ProductCardImage(product: product)),
),
),
Align(
alignment: const Alignment(-.65, .75),
child: _ProductPriceTag(product: product),
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
clipBehavior: Clip.antiAlias,
color: Theme.of(context).cardColor,
margin: const EdgeInsets.all(4),
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
child: Stack(
children: <Widget>[
// Content
Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Stack(
children: <Widget>[
Positioned.fill(
child: Padding(
padding: const EdgeInsets.all(8),
child: discountBanner(
child: _ProductCardImage(product: product)),
),
],
),
),
Align(
alignment: const Alignment(-.65, .75),
child: _ProductPriceTag(product: product),
),
],
),
),
),
SizedBox(
height: 36,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Center(
child: Text(
product.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12,
height: 0.8,
letterSpacing: -0.3,
fontWeight: FontWeight.w500,
),
),
SizedBox(
height: 36,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
child: Align(
alignment: const Alignment(0, -.5),
child: Text(
product.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12,
height: 0.9,
letterSpacing: -0.3,
fontWeight: FontWeight.w500,
),
),
),
),
],
),
),
],
),
),

// Tap area
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
onTap: () => onTap == null
? Octopus.push(
context,
Routes.product,
arguments: <String, String>{
'id': product.id.toString()
},
)
: onTap?.call(context, product),
),
// Tap area
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.circular(16),
hoverColor: theme.hoverColor,
splashColor: theme.splashColor,
highlightColor: theme.highlightColor,
onTap: () => onTap == null
? Octopus.push(
context,
Routes.product,
arguments: <String, String>{
'id': product.id.toString()
},
)
: onTap?.call(context, product),
),
),
],
),
);
),
],
),
);
}
}

class _ProductCardImage extends StatelessWidget {
Expand Down
Loading

0 comments on commit 1d18219

Please sign in to comment.