improve: change plant edit and species edit headers when no image

MDeLuise · Oct 16, 2024 · d9ff201 · d9ff201
1 parent 3d69ca7
commit d9ff201
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 33 deletions.
diff --git a/frontend/lib/plant_edit/header.dart b/frontend/lib/plant_edit/header.dart
@@ -21,37 +21,54 @@ class EditPlantImageHeader extends StatefulWidget {
 }
 
 class _EditPlantImageHeaderState extends State<EditPlantImageHeader> {
-  bool _loading = true;
-
   @override
   Widget build(BuildContext context) {
-    ImageProvider<Object> imageToDisplay =
-        const AssetImage("assets/images/no-image.png");
-    imageToDisplay = CachedNetworkImageProvider(
-      "${widget.env.http.backendUrl}image/content/${widget.plant.avatarImageId}",
-      headers: {
+    return CachedNetworkImage(
+      imageUrl:
+          "${widget.env.http.backendUrl}image/content/${widget.plant.avatarImageId}",
+      httpHeaders: {
         "Key": widget.env.http.key!,
       },
       imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
-      errorListener: (p0) {
-        imageToDisplay = const AssetImage("assets/images/no-image.png");
-      },
-    );
-    setState(() {
-      _loading = false;
-    });
-
-    return Skeletonizer(
-      enabled: _loading,
-      effect: skeletonizerEffect,
-      child: Container(
-        decoration: BoxDecoration(
-          image: DecorationImage(
-            image: imageToDisplay,
-            fit: BoxFit.cover,
+      fit: BoxFit.cover,
+      placeholder: (context, url) => Skeletonizer(
+        enabled: true,
+        effect: skeletonizerEffect,
+        child: Container(
+          decoration: BoxDecoration(
+            image: const DecorationImage(
+              image: AssetImage("assets/images/no-image.png"),
+              fit: BoxFit.cover,
+            ),
           ),
         ),
       ),
+      errorWidget: (context, url, error) {
+        return Container(
+          color: const Color.fromRGBO(24, 44, 37, 1),
+          child: Padding(
+            padding: const EdgeInsets.all(100),
+            child: Container(
+              decoration: BoxDecoration(
+                image: DecorationImage(
+                  image: AssetImage("assets/images/no-image.png"),
+                  fit: BoxFit.contain,
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+      imageBuilder: (context, imageProvider) {
+        return Container(
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: imageProvider,
+              fit: BoxFit.cover,
+            ),
+          ),
+        );
+      },
     );
   }
 }
diff --git a/frontend/lib/species_edit/header.dart b/frontend/lib/species_edit/header.dart
@@ -48,6 +48,9 @@ class _EditSpeciesImageHeaderState extends State<EditSpeciesImageHeader> {
           _imageToDisplay = const AssetImage("assets/images/no-image.png");
         },
       );
+      setState(() {
+        _imageUploaded = true;
+      });
     }
     setState(() {
       _loading = false;
@@ -172,16 +175,19 @@ class _EditSpeciesImageHeaderState extends State<EditSpeciesImageHeader> {
         Skeletonizer(
           enabled: _loading,
           effect: skeletonizerEffect,
-          child: Padding(
-            padding: EdgeInsets.all(_imageUploaded || _loading ? 0 : 100),
-            child: Container(
-              decoration: BoxDecoration(
-                image: DecorationImage(
-                  image: _imageToDisplay,
-                  fit: _imageUploaded || _loading
-                      ? BoxFit.cover
-                      : BoxFit.contain,
-                  opacity: .3,
+          child: Container(
+            color: _imageUploaded ? null : const Color.fromRGBO(24, 44, 37, 1),
+            child: Padding(
+              padding: EdgeInsets.all(_imageUploaded || _loading ? 0 : 100),
+              child: Container(
+                decoration: BoxDecoration(
+                  image: DecorationImage(
+                    image: _imageToDisplay,
+                    fit: _imageUploaded || _loading
+                        ? BoxFit.cover
+                        : BoxFit.contain,
+                    opacity: .3,
+                  ),
                 ),
               ),
             ),