How to read nested data with firestore in flutter? - flutter

Question

I am display a list of products, searched plenty of articles and tutorials but didn't succeeded to display the list of units fetched from the firestore and the specific price of the unit from firestore. kindly help me to achieve it.
I want to display the unit in a dropdown list and the assigned price according to the unit, but unable to do so, as i am new to flutter and trying to do code with the help of tutorials.
product.dart
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
class Product with ChangeNotifier {
final String id;
final String title;
final String description;
final String imageUrl;
final String productCategoryName;
Product({
required this.id,
required this.title,
required this.description,
required this.imageUrl,
required this.productCategoryName,
});
}
class ProductProvider with ChangeNotifier {
List<Product> _products = [];
Future<void> fetchProducts() async {
await FirebaseFirestore.instance
.collection('products')
.get()
.then((QuerySnapshot productSnapshot) {
_products = [];
for (var element in productSnapshot.docs) {
_products.insert(
0,
Product(
id: element.data()['productId'],
title: element.data()['productTitle'],
description: element.data()['productDescription'],
imageUrl: element.data()['productImage'],
productCategoryName: element.data()['productCategory'],
),
);
}
});
}
List<Product> products() => _products;
List<Product> getByCatName(String catName) {
List<Product> catList = _products
.where((element) =>
element.productCategoryName.toLowerCase() == catName.toLowerCase())
.toList();
return catList;
}
Product getById(String prodId) {
return _products.firstWhere((element) => element.id == prodId);
}
List<Product> getBySearch(String search) {
List<Product> prodList = _products
.where((element) =>
element.title.toLowerCase().contains(search.toLowerCase()))
.toList();
notifyListeners();
return prodList;
}
}
feed_product.dart
import 'dart:io';
import 'package:badges/badges.dart';
import 'feed_product_dialog.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../models_providers/product.dart';
import '../screens/inner_screens/product_details_screen.dart';
class FeedsProduct extends StatefulWidget {
const FeedsProduct({Key? key}) : super(key: key);
#override
_FeedsProductState createState() => _FeedsProductState();
}
class _FeedsProductState extends State<FeedsProduct> {
String unitValue = '1kg';
late Product product;
#override
Widget build(BuildContext context) {
final productAttribute = Provider.of<Product>(context);
return InkWell(
onTap: () {
Navigator.of(context).pushNamed(
ProductDetailsScreen.routeName,
arguments: productAttribute.id,
);
},
child: Stack(
children: \[
Container(
height: 300,
decoration: BoxDecoration(
border: Border.all(width: 1, color: Colors.black),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: \[
Center(
child: Container(
constraints: BoxConstraints(
minHeight: Platform.isIOS ? 170 : 140,
maxHeight: MediaQuery.of(context).size.height * 0.21),
child: Center(
child: Image.network(productAttribute.imageUrl,
fit: BoxFit.cover),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: \[
Text(
productAttribute.title,
maxLines: 1,
style: const TextStyle(
fontSize: 16,
overflow: TextOverflow.ellipsis,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: \[
DropdownButton<String>(
value: unitValue,
elevation: 16,
style: const TextStyle(color: Colors.black),
onChanged: (String? newValue) {
setState(() {
unitValue = newValue!;
});
},
items: <String>\['500gm', '1kg'\]
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
IconButton(
onPressed: () async {
return showDialog(
context: context,
builder: (ctx) => FeedsProductDialog(
product: productAttribute,
),
);
},
icon: const Icon(Icons.more_horiz),
),
\],
),
\],
),
)
\],
),
),
Badge(
toAnimate: true,
animationType: BadgeAnimationType.slide,
shape: BadgeShape.square,
badgeColor: Colors.deepOrange,
borderRadius: BorderRadius.circular(8),
badgeContent:
const Text('New', style: TextStyle(color: Colors.white)),
),
\],
),
);
}
}