I'm changing from Getx to Riverpod.
So, Problems fetching data from Firebase using Riverpod.
I have two product data on the server.
Initially after running, the ProductListPage doesn't show anything.
Enter the page again and the list will be displayed.
And every time you enter, the list is piled up.
How to fetch data from server using Riverpod?
Model
class Product {
String id;
String name;
String category;
String image;
String images;
String desc;
String price;
Timestamp createdAt;
Timestamp updatedAt;
Product();
Product.fromMap(Map<String, dynamic> data) {
id = data['id'] ?? "ID Data Null";
name = data['name'] ?? "Name Data Null";
category = data['category'] ?? "Category Data Null";
image = data['image'] ?? "Image Data Null";
//images = data['images'];
desc = data['desc'] ?? "Desc Data Null";
price = data['price'] ?? "Price Data Null";
createdAt = data['createdAt'];
updatedAt = data['updatedAt'];
}
Map<String, dynamic> toMap() {
return {
'id': id,
'name': name,
'category': category,
'images': images,
'image': image,
'desc': desc,
'price': price,
'createdAt': createdAt,
'updatedAt': updatedAt
};
}
}
Riverpod Provider
final productListProvider = StateNotifierProvider<ProductList>((ref) {
return ProductList();
});
class ProductList extends StateNotifier<List<Product>> {
//static Product productModel = Product();
ProductList([List<Product> state]) : super(state ?? []);
productAdd(Product product) {
state.add(product);
}
Future<void> refreshList() async {
getStateProducts();
}
getStateProducts() async {
QuerySnapshot snapshot = await FirebaseFirestore.instance
.collection('Products')
.get();
snapshot.docs.forEach((document) {
Product _product = Product.fromMap(document.data());
productAdd(_product);
print('DataBase: ${_product.name}');
});
}
ProductPage ListView
class ProductListPage extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final productObj = watch(productListProvider);
final product = watch(productListProvider.state);
productObj.getStateProducts(); //
return Scaffold(
appBar: AppBar(
title: Text('Product List'),
),
body: new RefreshIndicator(
child: ListView.separated(
itemBuilder: (BuildContext context, int index) {
return ListTile(
leading: Image.network(
product[index].image != null
? product[index].image
: 'https://www.testingxperts.com/wp-content/uploads/2019/02/placeholder-img.jpg',
width: 120,
fit: BoxFit.fitWidth,
),
title: Text(product[index].name),
subtitle: Text(product[index].category),
onTap: () {
// getxController.currentIndex(index);
// getxController.currentProduct =
// getxController.productList[index];
// return Get.to(ProductDetail(), arguments: "test");
},
);
},
itemCount: product.length,
separatorBuilder: (BuildContext context, index) {
return Divider(
color: Colors.black,
);
},
),
onRefresh: productObj.refreshList), // Refresh
);
}
}
question from:
https://stackoverflow.com/questions/65889304/flutter-riverpod-problems-fetching-data-from-firebase-using-riverpod 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…