I made an e-commerce app . i used the list view builder for listing the products. Now i need to display the product details page when tapped on the the desired list . How can i access the product i tapped and show its details in an another page. Below is my code for UI
class MainPage extends StatelessWidget {
const MainPage({super.key});
@override
Widget build(BuildContext context) {
final products = context.watch<Shop>().shop;
return Scaffold(
backgroundColor: AppColors.backgroundColor,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
foregroundColor: AppColors.inversePrimaryColor,
title: const Text('Main Page'),
centerTitle: true,
actions: [
IconButton(
onPressed: () {
Navigator.pushNamed(context, '/cart_page');
},
icon: Icon(Icons.shopping_cart),
),
],
),
drawer: CustomDrawer(),
body: ListView(
children: [
SizedBox(height: 25.h),
// SubTitle
Center(
child: Text(
'Please Select a Product from the Following',
style: TextStyle(
color: AppColors.inversePrimaryColor, fontSize: 15.h),
),
),
SizedBox(
height: 550.h,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.all(15.h),
itemBuilder: (context, index) {
final product = products[index];
return GestureDetector(
child: ProductTile(product: product),
);
},
itemCount: products.length,
),
),
],
),
);
}
}
here is my Product model
class Shop extends ChangeNotifier {
// Product List
List<Product> _shop = [
// Product 1
Product(
name: 'Nike Sneakers',
price: 424.77,
description:
'''Say hello to the next generation of Air technology. The Air Max Dn features our Dynamic Air unit system of dual-pressure tubes, creating a reactive sensation with every step. This results in a futuristic design that's comfortable enough to wear from day to night. Go ahead—Feel the Unreal.''',
imagePath: "assets/images/image1.jpg",
),
// Product 2
Product(
name: '''Men's Sneakers''',
price: 74.99,
description:
'If you love the thrill of riding a motorcycle, you need a pair of shoes that match your passion. That’s why we created City-Ride, a part of our exclusive Motomania Collection. These shoes are designed to give you a unique and stylish look, whether you’re on the road or off it. The shoes feature a stunning design on the top, with intricate details that make them stand out. They also have a PU Foam insole and a Tyre-Tech sole, which provide comfort and durability for your feet. With City-Ride, you can enjoy the speed and style of a true motorcycle enthusiast. CAMPUS brings you the ultimate shoes for your ride',
imagePath: "assets/images/image2.jpg",
),
// Product 3
Product(
name: 'BaseBall Cap',
price: 25.00,
description:
'''This 5-panel, flexfit, low-profile baseball cap is a great wear. It's perfect for teams or individuals, for the field or the street. The addition of spandex to the material makes for a form-fit, and the extras like a sewn-in sweatband and embroidered ventilation holes make this piece a smart buy.''',
imagePath: "assets/images/image3.jpg",
),
// Product 4
Product(
name: '''Men's Sandal''',
price: 24.77,
description:
'''he often imitated, never duplicated, category-defining, two-strap wonder from Birkenstock. A comfort legend and a fashion staple. With adjustable straps and a magical cork footbed that conforms to the shape of your foot, a truly custom fit is as effortless as the classic design.''',
imagePath: "assets/images/image4.jpg",
),
// Product 5
Product(
name: '''Men's T-shirt''',
price: 30.55,
description:
'''T-shirt in lightweight cotton jersey with a round, rib-trimmed neckline and a straight-cut hem. Regular fit for comfortable wear and a classic silhouette.''',
imagePath: "assets/images/image5.jpg",
),
];
// User Cart
List<Product> _cart = [];
// Get Product List
List<Product> get shop {
return _shop;
}
// Get Cart list
List<Product> get cart {
return _cart;
}
// Add to Cart
void addToCart(Product item) {
_cart.add(item);
notifyListeners();
}
// Delete item from cart
void deleteFromCart(Product item) {
_cart.remove(item);
notifyListeners();
}
}
this is the current state of my app enter image description here
Can anybody tell me how i can access the tapped product details and display it in Another page that is for showing Product Details. I am using Provider for state Management
I am not sure about Provider but you can surround your ListTile Item with a GestureDetector or InkWill Widget and when you tap on your list tile you can send the id of your item to the next page with page parameters for example:
GestureDetector(
onTap:(){
Navigator.of(context).push(
new MaterialPageRoute(
builder: (BuildContext context) =>
new productDetailsScreen(product:product),
),
)
);
},
child: ProductTile(product: product),
);
After create productDetailsScreen page like this:
import 'package:flutter/material.dart';
class productDetailsScreen extends StatelessWidget {
final Product Product;
const productDetailsScreen({Key? key, required this.Product})
: super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
//this is a mock code just to show you can show value of your productDetails field like this
title: const Text(product.name),
),
body: ...);
}
}