Retrieving information from nested lists (Flutter) - list

Question

I have what appears to most likely be a simple problem for everyone else, yet for some reason I can't seem to fix. I am a complete Flutter noob, but with coding experience. I am hoping to get tips around structuring data, and I have created a list which houses another list, like so:
class Store{
final String name;
final String image;
final List <Product> products; // this is defined in another class, and it requires a name(string), description(string), price (double)
Store({required this.name, required this.image, required this.features, required this.price})
List <Store> store= [
Store(name: "Ikea:, image: "ikealogo.png",
products :[Product(name: "wood table", description: "a very nice wood table", price: 12.50),
Product(name: "comfy chair", description: "a very nice leather chair", price: 10.50),
Product(name: "awesome lamp", description: "an ultra bright lamp", price: 5.50),]),
Store(name: "Bestbuy:, image: "bestbuylogo.png",
products :[Product(name: "television", description: "a very nice television", price: 350.00),
Product(name: "radio", description: "a very loud radio", price: 15.50),
Product(name: "cellphone", description: "a very small phone", price: 78.50),]),
];
}
Basically I have like 20 more of these things, following the same format.
Now for my problem, I can't seem to create a list out of the "Product" info nested within "Store". I can create lists with Store just fine, and I can call on the name and logo for all parts of the UI. My challenge is getting the Product information after a Store is selected, as the code I use currently shows "Iterable" when I hover over it. On the other hand, I get "List" just fine when I define or call the store list on another route.
#override
Widget build(BuildContext context) {
final product = Store.store.map((store) {
final productlist = store.products.toList();
});
I know that my code may not make any sense, and you can give me any kind of recommendations to alter the data structure altogether. For now (without using databases just yet), I want to show what products are available based on the store selected.
I hope everyone has a safe and productive day. Thank you!

Answer 1

In the example below I have set up a drop down button to show the list of stores. Selection causes a repaint which show the products in the selected store.
Hope the helps.
class _MyHomePageState extends State<MyHomePage> {
int _storeIdx = 0;
Store get _currentStore => storeList[_storeIdx];
List<Store> storeList = [
Store(name: "Ikea:", image: "ikealogo.png", products: [
Product(name: "wood table", description: "a very nice wood table", price: 12.50),
Product(name: "comfy chair", description: "a very nice leather chair", price: 10.50),
Product(name: "awesome lamp", description: "an ultra bright lamp", price: 5.50),
]),
Store(name: "Bestbuy:", image: "bestbuylogo.png", products: [
Product(name: "television", description: "a very nice television", price: 350.00),
Product(name: "radio", description: "a very loud radio", price: 15.50),
Product(name: "cellphone", description: "a very small phone", price: 78.50),
]),
];
#override
Widget build(BuildContext context) {
int _offset = 0;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DropdownButton(
value: _storeIdx,
items: storeList
.map((Store s) => DropdownMenuItem(
child: Text(s.name),
value: _offset++,
))
.toList(),
onChanged: (int? value) {
setState(() {
_storeIdx = value ?? 0;
});
},
hint: const Text('Select store')),
Text("Currently ${_currentStore.name}"),
..._currentStore.products.map((Product p) => Text(p.name)).toList(),
],
),
),
);
}
}
Note that the spread operator ... is quite useful when you are trying to flatten a hierarchy of widgets.
Also, sometimes in Flutter, there is a tendency to have one humongous build method. Sometimes it is clearer to break a screen in separate widgets or to break the build method into several methods each returning an array of widgets that can then be consolidated in the build method.

Answer 2

I can't help but notice that store inside of Store class is not a static variable which means Store.store should not be accessible. However, if store were a static variable inside Store class Store.store will work.
So,
class Product {
String name;
Product(this.name);
#override
String toString() {
return "Product($name)";
}
}
class Store {
List<Product> products;
Store(this.products);
static List<Store> stores = [
Store([
Product("Soap"),
Product("Bar"),
]),
Store([
Product("Sponge"),
Product("ChocoBar"),
]),
];
}
void main() {
print(Store.stores[0].products);
print(Store.stores[1].products);
}
Will yield an output of :
[Product(Soap), Product(Bar)]
[Product(Sponge), Product(ChocoBar)]
which is what we expect to find.