Widget not redrawing despite Setstate & UniqueKey - flutter

Question

I have this code for selecting options in a product page.
The index is updating well, but the color of the selected option refuses to change (as well as the name of the selected option on the right -- see the image below), and i can't figure why..
I have tried to use Setstate(), and to use unique keys for the related parent widgets
Here the image:
import 'package:animate_do/animate_do.dart';
import 'package:flutter/material.dart';
import 'package:prem_market/models/product.dart';
import 'package:prem_market/models/product_variation.dart';
class DisplayAttributes extends StatefulWidget {
const DisplayAttributes({
Key key,
this.data,
Function onChanged,
}) : super(key: key);
final Product data;
#override
_DisplayAttributesState createState() => _DisplayAttributesState();
}
class _DisplayAttributesState extends State<DisplayAttributes> {
#override
void initState() {
super.initState();
}
#override
Widget build(BuildContext context) {
int activeOption = 0;
return Column(
children: [
...List.generate(
this.widget.data.attributes.length,
(index) => !this.widget.data.attributes[index].variation
? SizedBox()
: Column(
children: <Widget>[
SizedBox(
height: 25,
),
Padding(
padding: EdgeInsets.only(left: 25, right: 25),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
FadeInDown(
delay: Duration(milliseconds: 450),
child: Text(
this.widget.data.attributes[index].name,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.w600),
),
),
FadeInDown(
delay: Duration(milliseconds: 450),
child: Text(
activeOption == 100
? '-'
: this
.widget
.data
.attributes[index]
.options[activeOption],
style: TextStyle(
fontSize: 16,
//color: black.withOpacity(0.7)
),
),
)
],
)),
SizedBox(
height: 25,
),
FadeInDown(
delay: Duration(milliseconds: 500),
child: Padding(
padding: EdgeInsets.only(left: 20, right: 25),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: this
.widget
.data
.attributes[index]
.options
.asMap()
.map<int, GestureDetector>(
(i, String childData) {
return MapEntry(
i,
GestureDetector(
key: UniqueKey(),
onTap: () {
setState(() {
if (activeOption == i) {
//selected = false;
activeOption = 100;
} else {
activeOption = i;
//selected = true;
}
});
FocusScope.of(context)
.requestFocus(new FocusNode());
},
child: Padding(
padding: const EdgeInsets.only(
right: 15,
bottom: 5,
left: 5,
top: 5),
child: Container(
key: UniqueKey(),
//width: 50,
height: 50,
padding: EdgeInsets.symmetric(
horizontal: 10),
decoration: BoxDecoration(
color: activeOption == i
? Theme.of(context)
.textTheme
.headline6
.color
: Colors.grey[200],
borderRadius:
BorderRadius.circular(8),
boxShadow: [
BoxShadow(
spreadRadius: 0.5,
blurRadius: 1,
color: Theme.of(context)
.shadowColor
.withOpacity(0.1))
]),
child: Center(
child: Text(
childData,
key: UniqueKey(),
style: TextStyle(
fontSize: 16,
color: activeOption == i
? Theme.of(context)
.backgroundColor
: Theme.of(context)
.shadowColor),
),
),
),
),
));
})
.values
.toList(),
),
),
),
),
],
),
),
],
);
}
}

Answer 1

You are resetting activeOption to 0 in build function make it a global variable. Everytime you call setState() build method is called which again resets it to 0
#override
Widget build(BuildContext context) {
int activeOption = 0;
to
int activeOption = 0;
#override
Widget build(BuildContext context) {