flutter widget state resets when screen scrolled - flutter

Question

i have a simple survey page lists questions and answers, when i select a answer changes background color that answer, but here is my issue when i scroll the page and answer is out of screen its resets its state and looks not selected
this is where i fetch questions and answers then pass to card then card widget passes answers to QuestionBlock widget (second code block)
widget
Widget surveyBuilder() {
return FutureBuilder<QuerySnapshot<Map<String, dynamic>>>(
future: FirebaseFirestore.instance
.collection('surveys')
.doc(widget.docId)
.collection('sorular')
.orderBy('index', descending: false)
.get(),
builder: (context, snapshot) {
if (snapshot.hasError) {
print(snapshot.error);
return Center(
child: Text(
"Something went wrong.",
style: TextStyle(
color: ColorConstants.instance.kPrimaryColor, fontSize: 20),
textAlign: TextAlign.center,
),
);
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(
color: ColorConstants.instance.kPrimaryColor,
),
);
}
if (snapshot.data!.size > 0) {
final data = snapshot.requireData;
soruSayisi = data.size;
return ListView.builder(
itemCount: data.size,
itemBuilder: (context, index) {
return card(
question: data.docs[index]['question'],
answers: List<String>.from(data.docs[index]['answers']),
index: index);
},
);
} else {
return Center(
child: Text(
'No Survey Left',
textAlign: TextAlign.center,
style: TextStyle(
color: ColorConstants.instance.kPrimaryColor,
fontSize: 20,
),
),
);
}
},
);
}
this is my answer builder widget im passing my answer list to this page
class QuestionBlock extends StatefulWidget {
QuestionBlock({Key? key, required this.cevaplar, required this.soru})
: super(key: key);
final List<String> answers;
final String soru;
#override
State<QuestionBlock> createState() => QuestionBlockState();
}
class QuestionBlockState extends State<QuestionBlock> {
int? selectedIndex;
#override
Widget build(BuildContext context) {
return ListView.builder(
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: widget.cevaplar.length,
itemBuilder: ((context, index) {
return answerCard(widget.answers[index], index);
}),
);
}
Widget answerCard(String answer, int index) {
return GestureDetector(
onTap: () {
setState(() {
selectedIndex = index;
cevaplarMap[widget.soru] = answer;
});
},
child: Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
decoration: BoxDecoration(
color: selectedIndex == index
? ColorConstants.instance.kPrimaryColor
: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Colors.grey.withOpacity(.3)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
spreadRadius: 1,
blurRadius: 5,
offset: Offset(0, 3), // changes position of shadow
),
]),
margin: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Text(
cevap,
style: TextStyle(
color: selectedIndex == index ? Colors.white : Colors.black,
fontFamily: 'Roboto',
fontSize: 16),
),
),
);
}
}