Flutter - How to change the border color and width for the selected index in the listview builder?

Question

I'm trying to create a product list using listview builder.

I want to change the color and width of the selected index container border. How to achieve this?

Code:

 ListView.builder(
                                scrollDirection: Axis.horizontal,
                                itemCount: productController.section.value.docs![brandsIndex!].items!.length-1,
                                itemBuilder: (BuildContext context, int index) {
                                  return GestureDetector(
                                    onTap: () {
                                      productController.filterProducts(
                                        collection: productController.section.value.docs![brandsIndex!].items![index].name
                                      );
                                      print(productController.section.value.docs![brandsIndex!].items![index].name);
                                    },
                                    child:  
                                            Padding(
                                              padding: const EdgeInsets.only(top: 30, bottom: 40),
                                              child: Padding(
                                                padding: const EdgeInsets.symmetric(horizontal: 6),
                                                child: Container(
                                                  width: 50.0,
                                                  height: 50.0,
                                                  decoration: BoxDecoration(
                                                      color:
                                                          const Color.fromARGB(255, 252, 252, 252),
                                                        border: Border.all(
                                      width: 1, color: Color.fromARGB(255, 224, 224, 224)),
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(15)),
                                                              image: DecorationImage(
                                      image: CachedNetworkImageProvider(
                                          productController.section.value
                                                  .docs![brandsIndex!].items![index].imageUrl
                                                  .toString())),
                                                      ),
                                                ),
                                              ),
                                            ),
                                         
                                  );
                                },
                              ),

Answer 1

Try this

...
//Declare a value to hold the index in memory
var selectedIndex;
...
//save the value using setState
 onTap: () {
setState(() {
          selectedIndex = index;///index from the listview builder
           });
     productController.filterProducts(
     collection: productController.section.value.docs![brandsIndex!].items![index].name );

          },

Now use the stored value to change the appearance like this

...
return GestureDetector(
                                    onTap: () {
                                      productController.filterProducts(
                                        collection: productController.section.value.docs![brandsIndex!].items![index].name
                                      );
                                      print(productController.section.value.docs![brandsIndex!].items![index].name);
                                    },
                                    child:  
                                            Padding(
                                              padding: const EdgeInsets.only(top: 30, bottom: 40),
                                              child: Padding(
                                                padding: const EdgeInsets.symmetric(horizontal: 6),
                                                child: Container(
                                                  width: 50.0,
                                                  height: 50.0,
                                                  decoration: BoxDecoration(
                                                      color:
                                                          const Color.fromARGB(255, 252, 252, 252),
                                                        border: Border.all(
                                      width: 1,
 color: selectedIndex == index ? Colors.red : Color.fromARGB(255, 224, 224, 224)),///Change the color
                                  borderRadius:
                                      const BorderRadius.all(Radius.circular(15)),
                                                              image: DecorationImage(
                                      image: CachedNetworkImageProvider(
                                          productController.section.value
                                                  .docs![brandsIndex!].items![index].imageUrl
                                                  .toString())),
                                                      ),
                                                ),
                                              ),
                                            ),
                                         
                                  );