Styjun

I'm having trouble with a listview.builder inside a listview.builder.
When I scroll to the bottom and scroll back to the top, the listview items in the second listview show information from other categories.

There seems to be limited info on this. I've tried adding a key to each of the listview builders. All to no avail.

See this example, where the data that appears under the "Hot Food" category changes from Hot foods to drinks after scrolling down and up again.
Gif of screen with correct, then incorrect data.

body: new ListView.builder(
 key: new Key(new Random(20).toString()),
 shrinkWrap: true,
 itemCount: catData == null ? 0 : catData.length,
 itemBuilder: (BuildContext context, currCat) 
 currCatId = int.parse(catData[currCat]['itemCategoryId']);
 print(
 "ListView1 catdata: " + catData[currCat]['itemCategoryDesc']);
 return new Column(mainAxisSize: MainAxisSize.min, children: <
 Widget>[
 new Flexible(
 fit: FlexFit.loose,
 child: new Row(
 mainAxisSize: MainAxisSize.min,
 children: <Widget>[
 new Expanded(
 child: new ListTile(
 title: new Text(catData[currCat]['itemCategoryDesc']),
 ),
 )
 ],
 ),
 ),
 new Flexible(
 child:
 menuSubList(int.parse(catData[currCat]['itemCategoryId'])),
 )
 ]);
 ));

return new ListView.builder(
 addAutomaticKeepAlives: true,
 key: new Key(new Random(20).toString()),
 physics: NeverScrollableScrollPhysics(),
 shrinkWrap: true,
 padding: EdgeInsets.all(0.0),
 itemCount: subCatData == null ? 0 : subCatData.length,
 itemBuilder: (BuildContext context, i) 
 return new Column(mainAxisSize: MainAxisSize.min,
 children: <Widget>[
 new Flexible(
 fit: FlexFit.loose,
 child: new Row(
 mainAxisSize: MainAxisSize.min,
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 new Flexible(
 fit: FlexFit.loose,
 child:
 new ListTile(
 leading: Image.network(
 "http://thisipswich.com/ssimg/$subCatData[i]['menuItemPic'] != null ? subCatData[i]['menuItemPic'] : 'noimage.png'",
 fit: BoxFit.scaleDown,
 width: 75.0,
 height: 75.0,
 ),
 // dense: true,
 title: new Text(new ConvertTitle().convertTitleCase(
 "$subCatData[i]['menuItemDesc'] $subCatData[i]['menuItemPrice']")),
 subtitle: new Text(
 "Cat: $subCatData[i]["itemCategoryDesc"] $subCatData[i]['menuItemVegetarian'] == '1' ? 'nVeg' : ''"),
 onTap: () 
 var datapass = subCatData[i];
 var menuIdPass = subCatData[i]['menuItemId'];
 _selectMenuItem(datapass, menuIdPass);
 ,
 ),
 ),
 new IconButton(
 icon: new Icon(Icons.add_shopping_cart),
 onPressed: () 
 _addItemToCart(context, i);
 
 ),
 ]
 ),

 ),

 ]
 );

 
 );

 List getMenuByCat(int catId) 
 print("getMenubyCat. catId: " + catId.toString());
 print("getMEnubyCat. Data: " + data.toString());
 List dataCopy = data.map((element)=>element).toList();
// List dataCopy = new List.from(data);
 menuItemByCat = dataCopy
 .where((item) => item['menuItemCategory'] == catId.toString())
 .toList();
 return menuItemByCat;