How to push data from Toggle Button to Shopping Cart

Question

I am designing a coffee store in flutter for my coffee roastery. I want people to be able to choose 'whole bean' or 'ground' as well as 'one-time payment' or 'subscription' through Toggle Buttons on each coffee's individual screen. How do I push the data from whichever button was selected to the shopping cart screen?

Here is the code for my form where the toggle buttons exist:

     Form(
                        key: _formKey,
                        child: const Column(
                          children: [
                            WholeOrGround(),
                            SizedBox(height: 15),
                            OneTimeSubscribe(),
                            SizedBox(
                              height: 15,
                            )
                          ],
                        )),

Here is what one of the toggle buttons looks like in its own file:

class WholeOrGround extends StatefulWidget {
  const WholeOrGround({Key? key}) : super(key: key);

  @override
  State<WholeOrGround> createState() => _WholeOrGround();
}

class _WholeOrGround extends State<WholeOrGround> {
  List<bool> isSelected = [true, false];

  @override
  Widget build(BuildContext context) {
    return ToggleButtons(
      color: Colors.amber,
      borderColor: Colors.amber,
      splashColor: const Color.fromARGB(255, 251, 187, 208),
      borderWidth: 3,
      borderRadius: BorderRadius.circular(10),
      selectedColor: Colors.lightBlue,
      onPressed: (int newIndex) {
        setState(() {
          for (int index = 0; index < isSelected.length; index++) {
            if (index == newIndex) {
              isSelected[index] = true;
            } else {
              isSelected[index] = false;
            }
          }
        });
      },
      isSelected: isSelected,
      children: const [
        Padding(
            padding: EdgeInsets.all(4),
            child: Text('Whole Bean',
                style: TextStyle(fontWeight: FontWeight.bold))),
        Padding(
          padding: EdgeInsets.all(4),
          child: Text('Ground', style: TextStyle(fontWeight: FontWeight.bold)),
        )
      ],
    );
  }
}

And here is where I will be getting the data sent in my cart screen:

    Expanded(
                  child: ListView.builder(
                    itemCount: value.cart.length,
                    itemBuilder: (context, index) {
                      // get product from cart
                      final CoffeeItem coffeeItem = value.cart[index];
                      //get item name
                      final String coffeeTitle = coffeeItem.title;
                      //get price
                      final String coffeePrice = coffeeItem.productPrice;
                      //get image
                      final String coffeeImage = coffeeItem.image;
                      // get coffee info
                      final String grindSetting;
                      final String _paymentType;

                      //return ListTile
                      return Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            color: const Color.fromARGB(255, 219, 176, 243)),
                        margin:
                            const EdgeInsets.only(left: 20, top: 20, right: 20),
                        child: ListTile(
                          leading: Image.asset(coffeeImage),
                          title: Text(coffeeTitle),
                          subtitle: Text('\$$coffeePrice'),
                          trailing: IconButton(
                              onPressed: () =>
                                  removeFromCart(coffeeItem, context),
                              icon: const Icon(Icons.delete)),
                        ),
                      );
                    },
                  ),
                )

Any help would so be appreciated.

Answer 1

You can create a callback method to get the selected item. I am using a boolean while there are only two items.

class WholeOrGround extends StatefulWidget {
  const WholeOrGround({super.key, required this.onToggle});
  final Function(bool isGround) onToggle;

  @override
  State<WholeOrGround> createState() => _WholeOrGround();
}

Inside ToggleButtons

   onPressed: (int newIndex) {
        widget.onToggle(newIndex == 1);
        ...

Now when you use WholeOrGround you can get the updated value like

WholeOrGround(
  onToggle: (bool isGround) {
    print(isGround);
    //you can use a state bool then pass the value on next/other widget
  },
),