ListView
The old rule is to start with the code first.
This is an item I created. It looks like this.
class _countItem extends State<countItem> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
children: <Widget>[
Container(
margin: EdgeInsets.all(15),
color: Colors.indigo,
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.all(10),
color: Colors.white,
child: Row(
children: <Widget>[
Text(
' ${widget.mapData['name']}',
style: TextStyle(fontSize: 16),
),
IconButton(
icon: Icon(Icons.exposure_neg_1),
color: Colors.grey,
onPressed: () {
setState(() {
widget.mapData['number']--;
});
},
),
Text(
' ${widget.mapData['number']}',
style: TextStyle(fontSize: 20, color: Colors.red),
),
IconButton(
icon: Icon(Icons.exposure_plus_1),
color: Colors.grey,
onPressed: () {
setState(() {
widget.mapData['number']++;
});
},
),
],
),
),
],
),
)
],
);
}
}
After creating the item, start creating the ListView
itemBuilder to create each item in it.
itemCount sets the number you want to traverse.
itemExtent sets the height of your item. The context in
the itemBuilder is used to determine which item you click on. The index is the subscript.
Widget itemList(List itemData) {
return ListView.builder(
itemCount: itemData.length,
itemExtent: 100.0,
itemBuilder: (BuildContext context, int index) {
return countItem(
// name: itemData[index]['name'],
// count: itemData[index]['count'],
mapData: itemData[index],
);
},
);
}