So I have the following function that creates a list of widgets and saves them in a variable, and then I add the variable as children in a Wrap widget. My problem is that I want to update the border style based on the selected index but it doesn't update it stays static to the first one since the first is selected when the list is generated.
The code:
int selectedFeature = 0;
List<Widget> features = <Widget>[];
void generateFeatured() {
var featured = <Widget>[];
if (movies.length >= 5) {
for (var i = 0; i < 5; i++) {
featured.add(
Container(
height: 150,
width: 220,
decoration: BoxDecoration(
// color: const Color(0xff39a936),
border: selectedFeature == i
? Border.all(color: const Color(0xff39a936), width: 2)
: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(
25,
),
image: DecorationImage(
fit: BoxFit.cover,
alignment: Alignment.topCenter,
image: NetworkImage(
movies[i]["cover_image"].toString(),
),
),
),
child: Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
bottom: 15,
top: 15,
),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
child: Text(
movies[i]["title"].toString().toUpperCase(),
style: const TextStyle(
fontFamily: "MADE",
fontWeight: FontWeight.bold,
),
),
).asGlass(
frosted: false,
clipBorderRadius: BorderRadius.circular(4),
tintColor: const Color(0xff41535f),
),
),
),
),
);
}
} else {
for (var i = 0; i < movies.length; i++) {
featured.add(
Container(
height: 150,
width: 220,
decoration: BoxDecoration(
// color: const Color(0xff39a936),
border: selectedFeature == i
? Border.all(color: const Color(0xff39a936), width: 2)
: Border.all(color: Colors.transparent),
borderRadius: BorderRadius.circular(
25,
),
image: DecorationImage(
fit: BoxFit.cover,
alignment: Alignment.topCenter,
image: NetworkImage(
movies[i]["cover_image"].toString(),
),
),
),
child: Padding(
padding: const EdgeInsets.only(
left: 20,
right: 20,
bottom: 15,
top: 15,
),
child: Align(
alignment: Alignment.bottomLeft,
child: Container(
padding:
const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
child: Text(
movies[i]["title"].toString().toUpperCase(),
style: const TextStyle(
fontFamily: "MADE",
fontWeight: FontWeight.bold,
),
),
).asGlass(
frosted: false,
clipBorderRadius: BorderRadius.circular(4),
tintColor: const Color(0xff41535f),
),
),
),
),
);
}
}
setState(() {
features = featured;
});
}
The widget
Wrap(
alignment: WrapAlignment.start,
spacing: 15,
runSpacing: 15,
children: features,
),
The result: wrong image having the border
thanks in advance
