Bringing it all together

lib/Product.dart

@@ -0,0 +1,5 @@
+class Product {
+  const Product({this.name});
+
+  final String name;
+}

lib/ShoppingList.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:soccerflutter/Product.dart';
+import 'package:soccerflutter/ShoppingListItem.dart';
+
+class ShoppingList extends StatefulWidget {
+  ShoppingList({Key key, this.products}) : super(key: key);
+
+  final List<Product> products;
+
+  @override
+  _ShoppingListState createState() => _ShoppingListState();
+}
+
+class _ShoppingListState extends State<ShoppingList> {
+  Set<Product> _shoppingCart = Set<Product>();
+
+  void _handleCartChanged(Product product, bool isCart) {
+    setState(() {
+      if (!isCart) {
+        _shoppingCart.add(product);
+      } else {
+        _shoppingCart.remove(product);
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Shopping List"),
+      ),
+      body: ListView(
+        padding: EdgeInsets.symmetric(vertical: 8.0),
+        children: widget.products.map((Product product) {
+          return ShoppingListItem(
+              product: product,
+              isCart: _shoppingCart.contains(product),
+              onCartChanged: _handleCartChanged);
+        }).toList(),
+      ),
+    );
+    throw UnimplementedError();
+  }
+}

lib/ShoppingListItem.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:soccerflutter/Product.dart';
+
+typedef void CartChangedCallback(Product product, bool isCart);
+
+class ShoppingListItem extends StatelessWidget {
+  ShoppingListItem({this.product, this.isCart, this.onCartChanged});
+
+  final Product product;
+  final bool isCart;
+  final CartChangedCallback onCartChanged;
+
+  Color _getColor(BuildContext context) {
+    return this.isCart ? Colors.black : Theme.of(context).primaryColor;
+  }
+
+  TextStyle _getTextStyle(BuildContext context) {
+    if (!this.isCart) return null;
+    return TextStyle(
+      color: Colors.black54,
+      decoration: TextDecoration.lineThrough,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      onTap: () {
+        onCartChanged(this.product, this.isCart);
+      },
+      leading: CircleAvatar(
+        backgroundColor: _getColor(context),
+        child: Text(
+          this.product.name,
+          style: _getTextStyle(context),
+        ),
+      ),
+    );
+    throw UnimplementedError();
+  }
+}

lib/main.dart

@@ -1,61 +1,16 @@
 import 'package:flutter/material.dart';
-import 'package:soccerflutter/Counter.dart';
+import 'package:soccerflutter/Product.dart';
+import 'package:soccerflutter/ShoppingList.dart';
 
 void main() {
   runApp(MaterialApp(
-    title: 'Flutter Tutorial',
-    home: TutorialHome(),
+    title: 'Shopping App',
+    home: ShoppingList(
+      products: <Product>[
+        Product(name: "A"),
+        Product(name: "B"),
+        Product(name: "C")
+      ],
+    ),
   ));
 }
-
-class TutorialHome extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    // Scaffold is a layout for the major Material Components.
-    return Scaffold(
-      appBar: AppBar(
-        leading: IconButton(
-          icon: Icon(Icons.menu),
-          tooltip: 'Navigation menu',
-          onPressed: null,
-        ),
-        title: Text('Example title'),
-        actions: <Widget>[
-          IconButton(
-            icon: Icon(Icons.search),
-            tooltip: 'Search',
-            onPressed: null,
-          ),
-        ],
-      ),
-      // body is the majority of the screen.
-      body: Center(
-        child: Counter(),
-      ),
-    );
-  }
-}
-
-
-class MyButton extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: () {
-        print('MyButton was tapped!');
-      },
-      child: Container(
-        height: 36.0,
-        padding: const EdgeInsets.all(8.0),
-        margin: const EdgeInsets.symmetric(horizontal: 8.0),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(5.0),
-          color: Colors.lightGreen[500],
-        ),
-        child: Center(
-          child: Text('Engage'),
-        ),
-      ),
-    );
-  }
-}