How to Update Elevated Button title on Pressed in Particular index of ListView.builder-CodePudding

Here is my code.

bool isAddedToCart = false;
return ListView.builder(
........
 ElevatedButton (
                        child: isAddedToCart? Text('Added to cart') : Text('Add to cart'),
                         style: ElevatedButton.styleFrom(
                           primary: Constants.primaryColor,
                           onPrimary: Constants.appColor
                         ),
                         onPressed: () async{
                           setState(() {
                             isAddedToCart = !isAddedToCart;
                           });
                           
                         },
                      
                       ),

The problem is, if I click on that elevated Button the text of that button has to change on that index only. But it is changing in all the index which are in listview.builder.

Can any one have a solution for this that only one button on selected index has to update with changed name.

CodePudding user response：

You need to keep the flag isAddedToCart for each index. You can achieve it by using a Map. Something like this:

// class variable scope.
Map<int, bool> isAddedToCartMap = {};

then use it in your widget:

ElevatedButton (
    // if isAddedToCartMap[index] not found, use false as default value.
    child: isAddedToCartMap[index]??false ? Text('Added to cart') : Text('Add to cart'),
     style: ElevatedButton.styleFrom(
       primary: Constants.primaryColor,
       onPrimary: Constants.appColor
     ),
     onPressed: () async{
       setState(() {
         isAddedToCartMap[index] = !isAddedToCartMap[index]??false;
       });
       
     },
  
   ),

CodePudding user response：

All items were depends on isAddedToCart but You need to store the selected item with separate indexing

List<int> _selected_item = List();

 ElevatedButton(
              child: _selected_item.contains(index)
                  ? Text('Added to cart')
                  : Text('Add to cart'),
              style: ElevatedButton.styleFrom(),
              onPressed: () async {
                setState(() {
                  // remove or add index to _selected_item
                  if (_selected_item.contains(index))
                    _selected_item.remove(index);
                  else
                    _selected_item.add(index);
                  print(index);
                });
              },
            )

complete source code

ListView.builder(
          itemCount: 5,
          itemBuilder: (context, index) {
            return ElevatedButton(
              child: _selected_item.contains(index)
                  ? Text('Added to cart')
                  : Text('Add to cart'),
              style: ElevatedButton.styleFrom(),
              onPressed: () async {
                setState(() {
                  // remove or add index to _selected_item
                  if (_selected_item.contains(index))
                    _selected_item.remove(index);
                  else
                    _selected_item.add(index);
                  print(index);
                });
              },
            );
          })