From b1b9e2e20808444733454daded475da7144499be Mon Sep 17 00:00:00 2001
From: Paul Kepinski <36476595+Jupi007@users.noreply.github.com>
Date: Thu, 25 Aug 2022 10:42:01 +0200
Subject: [PATCH] YaruBanner: adapt inner to outer border radius (#187)

* YaruBanner: adapt inner to outer border radius
Fixes #186

* Add comment
---
 lib/src/extensions/inner_border_radius.dart   | 25 +++++++++++++++++++
 lib/src/utilities/yaru_banner.dart            |  4 ++-
 .../utilities/yaru_selectable_container.dart  | 21 ++--------------
 3 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 lib/src/extensions/inner_border_radius.dart

diff --git a/lib/src/extensions/inner_border_radius.dart b/lib/src/extensions/inner_border_radius.dart
new file mode 100644
index 000000000..87c4202f1
--- /dev/null
+++ 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
index 3f0312910..c72b2fb17 100644
--- 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.
@@ -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
index 9476baf81..928a4e6f8 100644
--- 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,
           ),
         ),