340 bug card leading icon (#373)

* app and lib : add svg icon in vertical header img * add changelog
Orange-OpenSource · Apr 25, 2024 · 1b0507b · 1b0507b
1 parent 982e8a5
commit 1b0507b
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/app/CHANGELOG.md b/app/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Bug]: Snackbar without action text positioning ([#198](https://github.com/Orange-OpenSource/ods-flutter/issues/198))
 - [Bug]: SheetBottom. Tap to scroll down ([#341](https://github.com/Orange-OpenSource/ods-flutter/issues/341))
 - [Bug]: About - store reference ([#356](https://github.com/Orange-OpenSource/ods-flutter/issues/356))
+- [Bug] Card leading icon ([#340](https://github.com/Orange-OpenSource/ods-flutter/issues/340))
 
 ### [0.8.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.8.0) - 2023-03-02
 

diff --git a/app/lib/ui/components/cards/card_vertical_header_first.dart b/app/lib/ui/components/cards/card_vertical_header_first.dart
@@ -88,7 +88,7 @@ class _Body extends StatelessWidget {
         child: OdsVerticalHeaderFirstCard(
           thumbnail: customizationState!.thumbnail
               ? OdsCardThumbnail(
-                  imageProvider: NetworkImage(recipe.url),
+                  image: recipe.getIconPath(),
                   contentDescription: '', //Optional
                   alignment: Alignment.center,
                   contentScale: BoxFit.cover,

diff --git a/library/CHANGELOG.md b/library/CHANGELOG.md
@@ -17,6 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [Bug]: Snackbar without action text positioning ([#198](https://github.com/Orange-OpenSource/ods-flutter/issues/198))
 - [Bug]: SheetBottom. Tap to scroll down ([#341](https://github.com/Orange-OpenSource/ods-flutter/issues/341))
 - [Bug]: About - store reference ([#356](https://github.com/Orange-OpenSource/ods-flutter/issues/356))
+- [Bug] Card leading icon ([#340](https://github.com/Orange-OpenSource/ods-flutter/issues/340))
 
 
 ## [0.8.O](https://github.com/Orange-OpenSource/ods-flutter/compare/0.1.1...0.8.0) - 2023-03-02

diff --git a/library/lib/components/card/ods_cards_common.dart b/library/lib/components/card/ods_cards_common.dart
@@ -11,6 +11,7 @@
  */
 
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class OdsCardImage extends StatelessWidget {
   final ImageProvider imageProvider;
@@ -55,20 +56,20 @@ class OdsCardImage extends StatelessWidget {
 }
 
 class OdsCardThumbnail extends StatelessWidget {
-  final ImageProvider imageProvider;
+  final dynamic image;
   final String contentDescription;
   final Alignment alignment;
   final BoxFit contentScale;
   final Color? backgroundColor;
 
   const OdsCardThumbnail({
-    super.key,
-    required this.imageProvider,
+    Key? key,
+    required this.image,
     required this.contentDescription,
     this.alignment = Alignment.center,
     this.contentScale = BoxFit.cover,
     this.backgroundColor,
-  });
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
@@ -83,20 +84,48 @@ class OdsCardThumbnail extends StatelessWidget {
           color: backgroundColor,
         ),
         child: ClipOval(
-          child: FadeInImage(
-            placeholder: const AssetImage('assets/placeholder.png'),
-            image: imageProvider,
-            fit: contentScale,
-            alignment: alignment,
-            imageErrorBuilder: (context, error, stackTrace) {
-              return Image.asset(
-                'assets/placeholder.png',
-                fit: BoxFit.cover,
-              );
-            },
-          ),
+          child: image.endsWith('.svg')
+              ? SvgPicture.asset(
+                  image,
+                  colorFilter: ColorFilter.mode(
+                    Theme.of(context).colorScheme.secondary,
+                    BlendMode.srcIn,
+                  ),
+                  fit: contentScale,
+                  alignment: alignment,
+                  placeholderBuilder: (context) => Image.asset(
+                    'assets/placeholder.png',
+                    fit: BoxFit.cover,
+                  ),
+                )
+              : FadeInImage(
+                  placeholder: const AssetImage('assets/placeholder.png'),
+                  image: _getImageProvider(),
+                  fit: contentScale,
+                  alignment: alignment,
+                  imageErrorBuilder: (context, error, stackTrace) {
+                    return Image.asset(
+                      'assets/placeholder.png',
+                      fit: BoxFit.cover,
+                    );
+                  },
+                ),
         ),
       ),
     );
   }
+
+  ImageProvider _getImageProvider() {
+    if (image is String) {
+      if (image.startsWith('http') || image.startsWith('https')) {
+        return NetworkImage(image);
+      } else {
+        return AssetImage(image);
+      }
+    } else if (image is ImageProvider) {
+      return image;
+    } else {
+      return const AssetImage('assets/placeholder.png');
+    }
+  }
 }