Avoid rebuilding listview on item selection : Flutter - setstate

Question

I have listview.builder which gets data from FutureBuilder. When I press and hold any list item, first the whole listview gets rebuilt again, then the selected item is highlighted. I gunderstand this is because when setstate is called for item slecetion and the build method runs again, the future builder also fetches the data which causes this problem. How can I avoid this behavior and only highlight the selected item without rebuilding the whole listview? I'm not sure how can I implement Consumer in my code? This is my code:
_onSelected(int index) {
setState(() => _selectedIndex = index);
}
Color getColor( int index){
if(light_mode)
{
if(_selectedIndex != null && _selectedIndex == index)
return Color(0xFFFFB2FF);
else
return Color(0xFFFFFFFF);
}
else{
if(_selectedIndex != null && _selectedIndex == index)
return Color(0xFF8E8E8E);
else
return Color(0xFF6D6D6D);
}
}
#override
Widget build(BuildContext context) {
// TODO: implement build
final makeBody = Container(
decoration: BoxDecoration(
color: light_mode ? Color(0xFFFFFFFF) : Color(0xFF6D6D6D)),
child: setView()
);
}
Widget setView() {
return FutureBuilder<List<Juz>>(
future: getSurahData(context),
builder:( BuildContext context, AsyncSnapshot<List<Juz>> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
}
if ( snapshot.connectionState==ConnectionState.done) {
// Center(child: CircularProgressIndicator( value: 0.5, valueColor: AlwaysStoppedAnimation<Color>(Colors.white)));
//while(surahcountlist.isEmpty);
return returnListview();
}
else {
return Text("error");
}
);}
Widget returnListview(){
return Column(
textDirection: TextDirection.rtl,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
new Expanded(
child: SizedBox(
height: 200.0,
child: ListView.builder(
controller: hiding.controller,
itemCount:surahcountlist.length,
itemBuilder: (context, index) {
return new GestureDetector( //You need to make my child interactive
onLongPress: () => _onSelected(index),
child: Card(
color: getColor(index),
child: Column(
textDirection: TextDirection.rtl,
mainAxisAlignment:
MainAxisAlignment.start,
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: <Widget>[
showBSMLSV(index),
Wrap(
direction: Axis.horizontal,
alignment:
WrapAlignment.start,
runAlignment:
WrapAlignment.center,
textDirection:
TextDirection.rtl,
spacing: 2.0,
// gap between adjacent chips
runSpacing: 5.0,
children: makeSurahListview(
surahcountlist[index].surah_no,
surahcountlist[index].ayah_no,
surahcountlist[index].count)),
])));
}
) ))
]);
}

Answer 1

Use StatefulBuilder Widget for the list items and change state of that particular list item widget
flutter docs for stateful widget