I am in the process of creating an e-commerce application. I am using a ListView.builder to show the data but I'm struggling with fetching products based on the selected category.
Below is the model for the list of categories:
class Category {
final int id;
String name;
String image;
String slug;
Category({this.id, this.name, this.image, this.slug});
factory Category.fromJson(Map<String, dynamic> json) {
return Category(
id: json['id'],
name: json['name'],
image: json['image'].toString(),
slug: json['slug']
);
}
}
class Produit {
String productName;
String productImage;
int productPrice;
String description;
int rating;
int numberOfRating;
int category;
Produit({
this.productName,
this.productImage,
this.productPrice,
this.description,
this.rating,
this.numberOfRating,
this.category
});
factory Produit.fromJson(Map<String, dynamic> json) {
return Produit(
productName: json['name'],
productImage: json["image"],
productPrice: json["price"],
description: json["description"].toString(),
rating: json["rating"],
numberOfRating: json["numberOfRating"],
category: json["category"]
);
}
}
Here is the widget responsible for displaying the list of products by category:
class ProductPage extends StatefulWidget {
ProductPage({
Key key,
this.categoryId,
}) : super(key: key);
int categoryId;
@override
_ProductPageState createState() => _ProductPageState();
}
class _ProductPageState extends State<ProductPage> {
List<Produit> _products = List<Produit>();
Future<List<Produit>> fetchProducts() async {
var url = apilink + prod_url;
final response = await http.get(url);
var products = List<Produit>();
if (response.statusCode == 200) {
var productsJson = json.decode(response.body);
for (var productJson in productsJson) {
products.add(Produit.fromJson(productJson));
}
return products;
} else {
throw Exception('Unable to load data.');
}
}
@override
Widget build(BuildContext context) {
fetchProducts().then((value) {
_products.addAll(value);
});
return Container(
child: Scaffold(
appBar: AppBar(
title: Text('Products'),
backgroundColor: Colors.amber,
brightness: Brightness.light,
actions: <Widget>[
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) =>
new SearchWidget()));
},
icon: Icon(
Icons.search,
color: Colors.white,
),
iconSize: 30,
),
CartIconWithBadge(),
]),
body: Container(
child: ListView.builder(
itemCount: _products.length,
itemBuilder: (BuildContext context, int i) {
return Container(
child: (_products[i].category == widget.categoryId),
);
},
))),
);
}
}
I need assistance in displaying data based on the selected category. Your help is greatly appreciated. Thank you!