product images

mobile/lib/pages/all_products_page.dart

@@ -4,17 +4,59 @@ import 'package:mobile/widgets/sized_card.dart';
 import 'package:provider/provider.dart';
 import 'product_page.dart';
 
+class ProductImage extends StatefulWidget {
+  final String productName;
+
+  const ProductImage(this.productName, {super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return _ProductImageState();
+  }
+}
+
+class _ProductImageState extends State<ProductImage> {
+  late ImageProvider<Object> image;
+
+  @override
+  void initState() {
+    image = Image.asset(
+      "assets/products/${widget.productName}.png",
+    ).image;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Ink.image(
+      image: image,
+      onImageError: (_, __) {
+        setState(() {
+          image = Image.asset("assets/placeholder.png").image;
+        });
+      },
+      fit: BoxFit.contain,
+      width: 100,
+    );
+  }
+}
+
 class ProductListItem extends StatelessWidget {
+  final int productId;
   final String name;
   final int price;
-  final String imagePath;
   final ProductPage productPage;
-  const ProductListItem(
+
-      {super.key,
+  final Product product;
-      required this.name,
+
-      required this.price,
+  const ProductListItem({
-      required this.imagePath,
+    super.key,
-      required this.productPage});
+    required this.productId,
+    required this.name,
+    required this.price,
+    required this.productPage,
+    required this.product,
+  });
 
   @override
   Widget build(BuildContext context) {
@@ -43,11 +85,7 @@ class ProductListItem extends StatelessWidget {
                   borderRadius: const BorderRadius.only(
                       topRight: Radius.circular(10),
                       bottomRight: Radius.circular(10)),
-                  child: Ink.image(
+                  child: ProductImage(name)),
-                    image: const AssetImage("assets/boykisser.png"),
-                    fit: BoxFit.contain,
-                    width: 100,
-                  ))
             ],
           )),
     );
@@ -87,10 +125,11 @@ class AllProductsPage extends StatelessWidget {
                 return ListView.builder(
                   shrinkWrap: true,
                   itemBuilder: (_, idx) => ProductListItem(
+                    productId: products[idx].id,
                     name: products[idx].name,
                     price: products[idx].price,
-                    imagePath: "assets/${products[idx].name}.png",
                     productPage: ProductPage(product: products[idx]),
+                    product: products[idx],
                   ),
                   itemCount: products.length,
                 );

mobile/lib/pages/cart_page.dart

@@ -15,7 +15,6 @@ class CartItemView extends StatelessWidget {
   final int productId;
   final String name;
   final int price;
-  final String imagePath;
   final int amount;
 
   const CartItemView(
@@ -24,7 +23,6 @@ class CartItemView extends StatelessWidget {
       required this.productId,
       required this.name,
       required this.price,
-      required this.imagePath,
       required this.amount});
 
   @override
@@ -87,7 +85,14 @@ class CartItemView extends StatelessWidget {
           IconButton(
               onPressed: () => removeCartItemDialog(context),
               icon: const Icon(Icons.delete_outline)),
-          Image(width: 100, image: AssetImage(imagePath))
+          Image(
+            width: 100,
+            image: AssetImage("assets/products/$name.png"),
+            errorBuilder: (_, __, ___) => const Image(
+              image: AssetImage("assets/placeholder.png"),
+              width: 100,
+            ),
+          )
         ],
       ),
     );
@@ -154,7 +159,6 @@ class CartPage extends StatelessWidget {
                       productId: cart[idx].product.id,
                       name: cart[idx].product.name,
                       price: cart[idx].product.price,
-                      imagePath: "assets/boykisser.png",
                       amount: cart[idx].amount),
                   itemCount: cart.length,
                 );

mobile/lib/pages/product_page.dart

@@ -54,8 +54,10 @@ class ProductPage extends StatelessWidget {
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: [
-                    const Image(
+                    Image(
-                      image: AssetImage("assets/boykisser.png"),
+                      image: AssetImage("assets/products/${product.name}.png"),
+                      errorBuilder: (_, __, ___) => const Image(
+                          image: AssetImage("assets/placeholder.png")),
                       height: 250,
                       fit: BoxFit.fitHeight,
                     ),

mobile/lib/repos/product.dart

@@ -79,7 +79,6 @@ class ProductRepo extends ChangeNotifier {
           price: 20,
           description: ""),
       Product(id: _nextId++, name: "Spaghetti", price: 10, description: ""),
-      Product(id: _nextId++, name: "Æbler 1 kg", price: 20, description: ""),
       Product(id: _nextId++, name: "Rød Cecil", price: 60, description: ""),
       Product(
           id: _nextId++,
@@ -111,11 +110,12 @@ class Product {
   final Coordinate? location;
   final String? barcode;
 
-  Product(
+  Product({
-      {required this.id,
+    required this.id,
-      required this.name,
+    required this.name,
-      required this.price,
+    required this.price,
-      required this.description,
+    required this.description,
-      this.location,
+    this.location,
-      this.barcode});
+    this.barcode,
+  });
 }

mobile/pubspec.yaml

@@ -56,6 +56,7 @@ dev_dependencies:
 flutter:
   assets:
     - assets/
+    - assets/products/
     - google_fonts/
   # The following line ensures that the Material Icons font is
   # included with your application, so that you can use the icons in