title: How do I select a checkbox in a list with flutter
body: <p>I got this Code from a tutorial on YouTube on how to handle lists, now I want to add a CheckBox as the trailing Widget so I can use a checkbox to select the item I want instead of just tapping on the name of the drink, which sends the product into the CheckoutScreen (Cart). I want to send the name of the drink by checking a CheckBox.</p>
  <p>Please Help me I am new to Programming</p>
  <p>This is the Main method</p>
  <pre><code>import 'package:flutter/material.dart';
  
  import 'package:flutter/src/material/colors.dart';
  import 'CheckoutScreen.dart';
  import 'ProductModel.dart';
  import 'ProductScreen.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    // This widget is the root of your application.
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: CartApp());
    }
  }
  
  </code></pre>
  <pre><code>class CartApp extends StatefulWidget {
    @override
    _CartAppState createState() =&gt; _CartAppState();
  }
  
  class _CartAppState extends State&lt;CartApp&gt; {
    List&lt;ProductModel&gt; cart = [];
    int sum = 0;
  
   
    @override
    Widget build(BuildContext context) {
      return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text(&quot;The Bar&quot;),
            backgroundColor: Colors.redAccent[100],
            bottom: TabBar(
              tabs: &lt;Widget&gt;[
                Tab(
                  text: &quot;Products&quot;,
                ),
                Tab(
                  text: &quot;Checkout&quot;,
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: &lt;Widget&gt;[
              ProductScreen((selectedProduct) {
                setState(() {
                  cart.add(selectedProduct); //update
                  sum = 0;
                  cart.forEach((item) {
                    sum = sum + item.price;
                  });
                });
              }),
              CheckoutScreen(cart, sum),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p>The ProductScreen class</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter_radio_button_group/flutter_radio_button_group.dart';
  
  import 'ProductModel.dart';
  
  class ProductScreen extends StatelessWidget {
    final ValueSetter&lt;ProductModel&gt; _valueSetter;
  
    ProductScreen(this._valueSetter);
  
    List&lt;ProductModel&gt; products = [
      ProductModel(&quot;GIN COCKTAILS&quot;, &quot;Clover Club&quot;, 65),
      ProductModel(&quot;Beer&quot;, &quot;Heineken NRB&quot;, 29),
      ProductModel(&quot;Vodka&quot;, &quot;Ciroc&quot;, 35),
      ProductModel(&quot;Vodka&quot;, &quot;Cruz Vodka&quot;, 30),
      ProductModel(&quot;COGNAC&quot;, &quot;Hennesy&quot;, 40),
      ProductModel(&quot;Tequilla&quot;, &quot;El Jimador&quot;, 30),
      ProductModel(&quot;Non-Alcoholic&quot;, &quot;Soft-Drink&quot;, 20),
      ProductModel(&quot;WHISK[E]Y&quot;, &quot;Johnie Walker Red&quot;, 25),
    ];
  
    bool checkBoxValue = false;
  
    @override
    Widget build(BuildContext context) {
      return ListView.separated(
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(
                products[index].category,
                style: TextStyle(
                    color: Colors.redAccent[100],
                    fontSize: 20,
                    fontWeight: FontWeight.w500),
              ),
              subtitle: Text(
                &quot;${products[index].name} &quot; +
                    &quot;\t&quot; +
                    &quot;\t&quot; +
                    &quot;\t&quot; +
                    &quot;\t&quot; +
                    &quot;\R${products[index].price}&quot;,
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.w400),
              ),
              trailing: Checkbox(
                  value: checkBoxValue,
                  onChanged: (value) {
                    checkBoxValue = value;
                  }),
              onTap: () {
                _valueSetter(products[index]);
              },
            );
          },
          separatorBuilder: (context, index) {
            return Divider();
          },
          itemCount: products.length);
    }
  }
  
  </code></pre>
  <p>The CheckoutScreen Class (Cart)</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:fluttertoast/fluttertoast.dart';
  
  class CheckoutScreen extends StatelessWidget {
    final cart;
    final sum;
  
    CheckoutScreen(this.cart, this.sum);
    ScrollController _scrollController = new ScrollController();
  
    @override
    Widget build(BuildContext context) {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: &lt;Widget&gt;[
          ListView.separated(
            scrollDirection: Axis.vertical,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(cart[index].category),
                subtitle: Text(cart[index].name),
                trailing: Text(
                  &quot;\R${cart[index].price}&quot;,
                  style: TextStyle(
                      color: Colors.redAccent,
                      fontSize: 20,
                      fontWeight: FontWeight.w500),
                ),
                onTap: () {},
              );
            },
            separatorBuilder: (context, index) {
              return Divider();
            },
            itemCount: cart.length,
            shrinkWrap: true,
          ),
          Divider(),
          Text(&quot;Total : \R$sum&quot;),
          RaisedButton(
            child: Text(&quot;Confirm Order&quot;),
            onPressed: () {
              Fluttertoast.showToast(
                  msg: &quot;Order Confirmed&quot;,
                  toastLength: Toast.LENGTH_LONG,
                  gravity: ToastGravity.BOTTOM,
                  timeInSecForIosWeb: 1,
                  backgroundColor: Colors.black,
                  textColor: Colors.white,
                  fontSize: 16.0);
            },
          )
        ],
      );
    }
  }
  
  </code></pre>
  <p>The ProductModel Class where I declared my list</p>
  <pre><code>class ProductModel {
    String category;
    String name;
    int price;
  
  
    ProductModel(String category, String name, int price) {
      this.name = name;
      this.price = price;
      this.category = category;
    }
  }
  </code></pre>