Add border-radius to carousel images

- Add border-radius to carousel images ; - Add little padding to InkWell (to clearly see the effect) ; - Center the InkWell to avoid full width with small image inside. Fixes #247
ubuntu · Sep 21, 2022 · 493a3a0 · 493a3a0
1 parent d35f393
commit 493a3a0
Showing 1 changed file with 34 additions and 23 deletions.
diff --git a/lib/store_app/common/media_tile.dart b/lib/store_app/common/media_tile.dart
@@ -31,30 +31,41 @@ class MediaTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Material(
-      color: Colors.transparent,
-      child: InkWell(
-        borderRadius: BorderRadius.circular(10),
-        excludeFromSemantics: true,
-        onTap: () => showDialog(
-          context: context,
-          builder: (context) => SimpleDialog(
-            children: [
-              InkWell(
-                onTap: () => Navigator.of(context).pop(),
-                child: YaruSafeImage(
-                  url: url,
-                  fit: fit,
-                  filterQuality: FilterQuality.medium,
-                  fallBackIconData: YaruIcons.image,
-                ),
-              )
-            ],
+    const borderRadius = BorderRadius.all(Radius.circular(10));
+    const padding = EdgeInsets.all(5);
+
+    return Center(
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          borderRadius: borderRadius.outer(padding),
+          excludeFromSemantics: true,
+          onTap: () => showDialog(
+            context: context,
+            builder: (context) => SimpleDialog(
+              children: [
+                InkWell(
+                  onTap: () => Navigator.of(context).pop(),
+                  child: YaruSafeImage(
+                    url: url,
+                    fit: fit,
+                    filterQuality: FilterQuality.medium,
+                    fallBackIconData: YaruIcons.image,
+                  ),
+                )
+              ],
+            ),
+          ),
+          child: Padding(
+            padding: padding,
+            child: ClipRRect(
+              borderRadius: borderRadius,
+              child: YaruSafeImage(
+                url: url,
+                fallBackIconData: YaruIcons.image,
+              ),
+            ),
           ),
-        ),
-        child: YaruSafeImage(
-          url: url,
-          fallBackIconData: YaruIcons.image,
         ),
       ),
     );