YaruBanner: adapt inner to outer border radius (#187)

* YaruBanner: adapt inner to outer border radius Fixes #186 * Add comment
ubuntu · Aug 25, 2022 · e0914b9 · e0914b9
1 parent 49d2a34
commit e0914b9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/lib/src/extensions/inner_border_radius.dart b/lib/src/extensions/inner_border_radius.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/widgets.dart';
+
+extension InnerBorderRadius on BorderRadius {
+  /// Computer an inner border radius from a given padding
+  BorderRadius inner(EdgeInsets padding) {
+    return BorderRadius.only(
+      topLeft: Radius.elliptical(
+        topLeft.x - padding.left / 2,
+        topLeft.y - padding.top / 2,
+      ),
+      topRight: Radius.elliptical(
+        topRight.x - padding.right / 2,
+        topRight.y - padding.top / 2,
+      ),
+      bottomRight: Radius.elliptical(
+        bottomRight.x - padding.right / 2,
+        bottomRight.y - padding.bottom / 2,
+      ),
+      bottomLeft: Radius.elliptical(
+        bottomLeft.x - padding.left / 2,
+        bottomLeft.y - padding.bottom / 2,
+      ),
+    );
+  }
+}
diff --git a/lib/src/utilities/yaru_banner.dart b/lib/src/utilities/yaru_banner.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:yaru_widgets/src/extensions/inner_border_radius.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 
 /// A colorable [Card] with a border which is tap-able via an [onTap] callback.
@@ -62,7 +63,7 @@ class YaruBanner extends StatelessWidget {
     return InkWell(
       onTap: onTap,
       borderRadius: borderRadius,
-      hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
+      hoverColor: Theme.of(context).primaryColor.withOpacity(0.3),
       child: surfaceTintColor != null
           ? Stack(
               children: [
@@ -163,7 +164,8 @@ class _Banner extends StatelessWidget {
       surfaceTintColor: color,
       elevation: elevation,
       shape: RoundedRectangleBorder(
-        borderRadius: borderRadius,
+        borderRadius: borderRadius
+            .inner(const EdgeInsets.all(4.0)), // 4 is the default margin
         side: BorderSide(color: Theme.of(context).dividerColor, width: 1),
       ),
       child: Align(

diff --git a/lib/src/utilities/yaru_selectable_container.dart b/lib/src/utilities/yaru_selectable_container.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:yaru_widgets/src/constants.dart';
+import 'package:yaru_widgets/src/extensions/inner_border_radius.dart';
 
 class YaruSelectableContainer extends StatelessWidget {
   /// Creates a Image Tile from the image path given in the path property.
@@ -43,24 +44,6 @@ class YaruSelectableContainer extends StatelessWidget {
   Widget build(BuildContext context) {
     final padding = this.padding ?? const EdgeInsets.all(6);
     final borderRadius = this.borderRadius ?? BorderRadius.circular(radius);
-    final innerBorderRadius = BorderRadius.only(
-      topLeft: Radius.elliptical(
-        borderRadius.topLeft.x - padding.left / 2,
-        borderRadius.topLeft.y - padding.top / 2,
-      ),
-      topRight: Radius.elliptical(
-        borderRadius.topRight.x - padding.right / 2,
-        borderRadius.topRight.y - padding.top / 2,
-      ),
-      bottomRight: Radius.elliptical(
-        borderRadius.bottomRight.x - padding.right / 2,
-        borderRadius.bottomRight.y - padding.bottom / 2,
-      ),
-      bottomLeft: Radius.elliptical(
-        borderRadius.bottomLeft.x - padding.left / 2,
-        borderRadius.bottomLeft.y - padding.bottom / 2,
-      ),
-    );
 
     return InkWell(
       borderRadius: borderRadius,
@@ -76,7 +59,7 @@ class YaruSelectableContainer extends StatelessWidget {
         child: Padding(
           padding: padding,
           child: ClipRRect(
-            borderRadius: innerBorderRadius,
+            borderRadius: borderRadius.inner(padding),
             child: child,
           ),
         ),