How to set value on selected items with checkboxListTile

Question

What is the correct way to Setstate of checkboxListTile to get both toggle button and added value to it?

What I want is when you check the box, You see the check button. then the value added into the base price. Please kindly help.

CheckboxListTile(
                                activeColor: Colors.blue,
                                dense: true,
                                //font change
                                title: new Text(
                                  listTopping[i].price.toStringAsFixed(0) +
                                      ' บาท',
                                  style: TextStyle(
                                    fontSize: 25,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                value: listTopping[i].isCheck,
                                secondary: Container(
                                  height: 50,
                                  width: 300,
                                  child: Text(
                                    listTopping[i].topping,
                                    style: TextStyle(
                                      fontSize: 25,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                                onChanged: (bool? val) {
                                  itemChange(val!, i);
                                },
                              ),

Here is the setstate that I believe is wrong...

  void itemChange(bool val, int i) {
    setState(() {
      listTopping[i].isCheck = val;
    });
  }
}

Tried your code. Added a `Text` with the sum of the checks above the List of `CheckboxListTile`. Worked as expcted. — quoci, Jul 25 '21 at 10:07
I am very sorry for bothering you again but what did you do again? I really don't understand. May I get more details please? — VelVetRose, Jul 25 '21 at 10:15
I copy & pasted your code. And added a `Text` widget to display the sum. The sum is displayed correctly even if I change the `checks`. — quoci, Jul 25 '21 at 10:16
When I added the text above CheckBoxListTile, it gave me the whole red lines. I will try to repeat what you said and try until I understand. You have been helping me for two forums now. I am so grateful. Thank you very very much. — VelVetRose, Jul 25 '21 at 10:25

score 0 · Answer 1 · answered Jul 25 '21 at 10:35

Here is a small example of your code. Since you didn't provide the AddonTopping class I created a simply version for myself. You can try it out and run this Widget in your MaterialApp. Everything should worked as expected.

class AddonTopping {
  AddonTopping({
    required this.id,
    required this.topping,
    required this.isCheck,
    required this.price,
  });
  final int id;
  final String topping;
  bool isCheck;
  final int price;
}

class Americano extends StatefulWidget {
  @override
  _AmericanoState createState() => _AmericanoState();
}

class _AmericanoState extends State<Americano> {
  List<AddonTopping> listTopping = [
    AddonTopping(
      id: 8,
      topping: 'Whipcream',
      price: 0,
      isCheck: true,
    ),
    AddonTopping(
      id: 9,
      topping: 'Javachip',
      price: 30,
      isCheck: false,
    ),
    AddonTopping(
      id: 10,
      topping: 'SoyMilk',
      price: 20,
      isCheck: false,
    ),
    AddonTopping(
      id: 11,
      topping: 'ExtraSyrup',
      price: 30,
      isCheck: false,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('SUM: ${calculatePrice()}'),
        ListView.builder(
          shrinkWrap: true,
          itemCount: listTopping.length,
          itemBuilder: (context, i) => CheckboxListTile(
            activeColor: Colors.blue,
            dense: true,
            //font change
            title: Text(
              listTopping[i].price.toStringAsFixed(0),
              style: TextStyle(
                fontSize: 25,
                fontWeight: FontWeight.bold,
              ),
            ),
            value: listTopping[i].isCheck,
            secondary: Container(
              height: 50,
              width: 300,
              child: Text(
                listTopping[i].topping,
                style: TextStyle(
                  fontSize: 25,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            onChanged: (bool? val) {
              itemChange(val!, i);
            },
          ),
        ),
      ],
    );
  }

  void itemChange(bool val, int i) {
    setState(() {
      listTopping[i].isCheck = val;
    });
  }

  double calculatePrice() {
    if (listTopping.isNotEmpty) {
      double _price = 0.0;
      // Get those toppings that are chosen (`isCheck` is true)
      final chosenTopping = listTopping.where((element) => element.isCheck);

      // Calculate the sum
      for (final AddonTopping item in chosenTopping) {
        if (item.isCheck) {
          _price += item.price;
        }
      }
      return _price;
    }
    return 0.00;
  }
}

https://im4.ezgif.com/tmp/ezgif-4-c157feb407dc.gif Literally crying. — VelVetRose, Jul 25 '21 at 11:01

How to set value on selected items with checkboxListTile

1 Answers1