Question 228159 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: How to make a particular button increment without affecting the other button?

I’m working on a Flutter application and I have a row of quantity selectors that include "+" and "-" buttons to increment and decrement a quantity value. The quantity state is managed by provider. However, when I press "+" and "-" buttons of a particualar product in cart screen, it affect the other products in the cart screen. I want to make each product button increment or decrement independently without affecting the other product button in the cart screen.

This is the image

The Code

import 'package:flutter/material.dart';
import 'package:maxtastore/Provider/quantity_selector.dart';
import 'package:provider/provider.dart';

import 'product_quantity_selector.dart';

class ProductQuantitySelectorRow extends StatelessWidget {
  const ProductQuantitySelectorRow({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<QuantitySelector>(
      builder: (context, value, child) {
        return Row(
          children: [
            ProductQuantitySelector(
              margin: const EdgeInsets.only(right: 10),
              symbol: '-',
              onTap:  () {
                value.quantityDecreament();
              } ,
            ),
            Text(value.quantity.toString()),
            ProductQuantitySelector(
              margin: const EdgeInsets.only(left: 10),
              symbol: '+',
              onTap: () {
                value.quantityIncreament();
              },
            )
          ],
        );
      },
    );
  }
}

How can I modify this code so that each product button operates independently without affecting the other product button’s behavior? I want the "+" button to increment the quantity by one and the "-" button to decrement it by one, all while maintaining separate behavior for each product button.

The Provider class

import 'package:flutter/material.dart';

class QuantitySelector extends ChangeNotifier {
  int quantity = 1;

  void quantityIncreament() {
   if(quantity < 20){
    quantity++;
    notifyListeners();
   }
  }

  void quantityDecreament() {
   if(quantity > 1){
    quantity--;
    notifyListeners();
   }
  }

  bool canDecreament () => quantity >  1 ;

}
Tags:

2

Answers


  1. 0

    you can make a list of prodacts selected values and on each click you pass the index of the element to the function based on the index :

        class QuantitySelector extends ChangeNotifier {
  List<int> quanties= {1,1,1};

  void quantityIncreament(int index) {
   if(quanties[index] < 20){
    quanties[index] += 1;
    notifyListeners();
   }
  }

  void quantityDecreament(index) {
   if(quanties[index] > 1){
    quanties[index] -= 1;
    notifyListeners();
   }
  }

  
}

    the code is not complete it’s you job to make each view in the list have an index and then pass that index when trying to increment or decrement

    Login or Signup to reply.
  2. 0

    It looks like you’re encountering a common issue when using the Provider package in Flutter. The problem is that you’re using a single instance of the QuantitySelector provider for all the items in your cart, so when you change the quantity of one item, it affects all the items. To fix this, you need to create a separate instance of the QuantitySelector provider for each item in your cart.

    Here’s how you can modify your code to achieve this:

    Update the Provider Registration:
    Make sure you’re providing a new instance of QuantitySelector for each product in your cart. This means you’ll need to wrap each ProductQuantitySelectorRow with a separate ChangeNotifierProvider.
    Assuming you have a list of products, you would map over them and provide the provider for each product:

    
    // Assuming products is a list of your cart items.
    Column(
      children: products.map((product) {
        return ChangeNotifierProvider<QuantitySelector>(
          create: (_) => QuantitySelector(),
          child: ProductQuantitySelectorRow(),
        );
      }).toList(),
    )

    Update the Consumer Usage:
    Within your ProductQuantitySelectorRow, you can now use the specific QuantitySelector instance associated with each product:

    class ProductQuantitySelectorRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
final value = Provider.of<QuantitySelector>(context);

return Row(
  children: [
    ProductQuantitySelector(
      margin: const EdgeInsets.only(right: 10),
      symbol: '-',
      onTap: () {
        value.quantityDecreament();
      },
    ),
    Text(value.quantity.toString()),
    ProductQuantitySelector(
      margin: const EdgeInsets.only(left: 10),
      symbol: '+',
      onTap: () {
        value.quantityIncreament();
      },
    )
  ],
  );
 }
}

    By creating a new instance of the QuantitySelector provider for each product and using the specific instance in the consumer, you’ll ensure that changing the quantity of one product doesn’t affect the others.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search