How can I assign any iterable to a widget? - list

Question

error: The element type 'List' can't be assigned to the list type 'Widget'.
I am learning to make flutter apps and this same code is illustrated by other person who is teaching me in that video and it works fine. Maybe its a version problem.
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children: [
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
],
),
)
],
),
);

Answer 1

You should remove [ ] while mapping, check below
ListView(
children: widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text(
'₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList(),
),

Answer 2

just remove the [] of the children of the ListView
Your code should be as follows:
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: [
ListTile(
title: Text('₹${widget.order.amount}'),
subtitle: Text(DateFormat('dd/MM/yyyy hh:mm').format(widget.order.dateTime)),
trailing: IconButton(icon: Icon(_expanded ? Icons.expand_less :Icons.expand_more),
onPressed: (){
setState(() {
_expanded = !_expanded;
});
}),
),
if(_expanded)
Container(
height: min(widget.order.products.length * 20.0 + 10, 100),
child: ListView(
children:
widget.order.products.map((prod) => Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(prod.title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold
),
),
Text('₹${prod.quantity}x ₹${prod.price}',
style: TextStyle(
fontSize: 18,
color: Colors.grey
),
)
],
),).toList()
,
),
)
],
),
);
Since you are already creating the list of widgets in the .toList(), it shouldn't be surrounded by []

Answer 3

The ListView widget requires 'List of Widgets', however, you're providing it with nested list of widgets as you're using map and returning 'Rows' while converting them into a list. So, in short ListView renders list of rows inside another list.
You may use the 'Spread Operator' to resolve the issue. It will take the each Row widget in nested list and place it as a direct child of 'ListView'.
Using three dots '...' before mapping the product will resolve the error. Like this;
"...widget.order.products.map((prod) => Row("
OR
just remove the [] of the children of the ListView. It will do the same trick.