How can I dynamically update the border if the appropriate index is selected

42 Views Asked by At

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

enter image description here

thanks in advance

0

There are 0 best solutions below