I want to change color of the icon when its pressed. I tried this code:

Consumer<ProductController>(
                        builder: ((context, value, child) {
                          // log('${value.products[0].results?.length.toString()}');
                          if (value.products.isNotEmpty) {
                            return Container(
                                height: maxHeight * 0.3,
                                child: ListView.builder(
                                  itemCount: value.products[0].results!.length,
                                  itemBuilder: (context, index) {
                                    return Card(
                                      child: ListTile(
                                        title: Text(value
                                            .products[0].results![index].name!),
                                        leading: IconButton(
                                          icon: const Icon(Icons.add),
                                          onPressed: () {
                                            setState(() {
                                              var ids = value.products[0]
                                                  .results![index].id!;
                                              if (productIds.contains(ids)) {
                                                productIds.remove(ids);
                                              } else {
                                                productIds.add(ids);
                                                isSelected = true;
                                              }
                                              // productIds.add(value.products[0]
                                              //     .results![index].id!);

                                              print(
                                                  "products=>>>> $productIds");
                                            });
                                          },
                                        ),
                                        trailing: IconButton(
                                          icon: Icon(
                                            Icons.done,
                                            color: isSelected == true
                                                ? Colors.blue
                                                : null,
                                          ),
                                          onPressed: () {
                                            setState(() {
                                              productIds.remove(value
                                                  .products[0]
                                                  .results![index]
                                                  .id);
                                              print(productIds);
                                              isSelected = false;
                                            });
                                          },
                                        ),
                                      ),
                                    );
                                  },
                                ));
                          } else {
                            return const CircularProgressIndicator();
                          }
                        }),
                      ),

I took bool variable inside state class. (Stateful widget)

bool isSelected = false;

Here I know I am doing it wrong. Like when its pressed I am making bool isSelected=true thats why all the remaining lists are also getting selected. But I can't find the logic behind this.

So, How Can I make this work. When its selected only that selected one will be colored, others will remain same.

CodePudding user response：

to be able to do that, you have to create a selectedIndex variable:

int? _selectedIndex;

inside your onPressed, store the index in your '_selectedIndex`:

onPressed:(){
_selectedIndex = index;
//your other codes...
}

then to change the color, you compare if selectedIndex == index:

                       trailing: IconButton(
                                          icon: Icon(
                                            Icons.done,
                                            color: _selectedIndex == index
                                                ? Colors.blue
                                                : null,
                                          ),