I have issue with using nested ListView builder in flutter. Data (Row wise data from api) is rendering correctly. After scrolling down once and comes back, the data is shuffling/ disappearing some datas. Help please.
See the api data below first. Then see the code.:
{
"status": 1,
"message": "Success",
"data": [
{
"row": 1,
"value": "OSA",
"column": "1",
"section": null,
"type": "input",
"width": "1400",
"height": 40,
"background": "Yellow",
},
{
"row": 2,
"value": "Category",
"column": "1",
"section": null,
"type": "input",
"width": "200",
"height": 40,
"background": "#A9D0F5",
},
{
"row": 2,
"value": "Brand",
"column": "2",
"section": null,
"type": "input",
"width": "300",
"height": 40,
"background": "#A9D0F5",
},
{
"row": 2,
"value": "Promo Price",
"column": "6",
"section": null,
"type": "input",
"width": "100",
"height": 40,
"background": "#A9D0F5",
},
{
"row": 3,
"value": "Foil",
"column": "category",
"section": "osa",
"type": "input",
"width": "15",
"height": 40,
"background": null,
},
{
"row": 3,
"value": "Diamond",
"column": "brand",
"section": "osa",
"type": "input",
"width": "15",
"height": 40,
"background": null,
},
]
}
Container(
color: Colors.white,
child: Observer(
builder: (_) => ListView.builder( // First ListView builder
shrinkWrap: true,
primary: false,
itemCount: _tableStore.rowDataList.length,
itemBuilder: (context, index) {
int previousRowNumber = -1;
int nextRowNumber = 0;
int currentRowNumber =
_tableStore.rowDataList[index].row!;
if (index > 0) {
previousRowNumber =
_tableStore.rowDataList[index - 1].row!;
}
if (index < _tableStore.rowDataList.length - 1) {
nextRowNumber =
_tableStore.rowDataList[index 1].row!;
}
if (currentRowNumber == nextRowNumber) {
cWiseList.add(_tableStore.rowDataList[index]);
return const SizedBox.shrink();
}
if (previousRowNumber == currentRowNumber) {
cWiseList.add(_tableStore.rowDataList[index]);
List<Data> colWiseList = [];
for (Data item in cWiseList) {
colWiseList.add(item);
}
cWiseList.clear();
return SizedBox(
child: Row(
children: [
ConstrainedBox(
constraints:
const BoxConstraints(maxHeight: 30),
child: ListView.builder( // Second ListView builder put inside constrainedBox
scrollDirection: Axis.horizontal,
shrinkWrap: true,
primary: false,
physics:
const NeverScrollableScrollPhysics(),
itemCount: colWiseList.length,
itemBuilder: (context, i) {
double ht = colWiseList[i]
.height!
.toDouble()
.h;
double wd = colWiseList[i].width !=
null
? double.parse(
colWiseList[i].width!) *
MediaQuery.of(context)
.size
.width /
100.w
: 20.w;
return colWiseList[i].type == 'hid'
? const SizedBox.shrink()
: Padding(
padding: const EdgeInsets
.symmetric(
vertical: 0.5,
horizontal: 1.5),
child: Container(
width: wd,
height: ht,
child: Center(
child: Text(
'${colWiseList[i].value}',
style: FontStyles
.black12Normal,
),
),
),
);
},
),
),
],
),
);
}
double height = _tableStore
.rowDataList[index].height!
.toDouble()
.h;
double width = _tableStore
.rowDataList[index].width !=
null
? double.parse(
_tableStore.rowDataList[index].width!) *
MediaQuery.of(context).size.width /
100
: 20.w;
return Column(
children: [
Container(
width: width,
height: height,
child: Center(
child: Text(
'${_tableStore.rowDataList[index].value}'),
),
),
],
);
},
),
),
),
CodePudding user response：
its flutter behavior. for the workaround see my old answer here https://stackoverflow.com/a/73173330/12838877
the documentation :
- Destruction
When a child is scrolled out of view, the associated element subtree, states and render objects are destroyed. A new child at the same position in the list will be lazily recreated along with new elements, states and render objects when it is scrolled back.
for more detail : Destruction mitigation ( scroll down the documentation)
CodePudding user response：
List view is always rebuilding its childreen when scrolling, to preserve it state, you need a key for each child,
check this vidio Flutter Widgets 101 Ep. 4