fix: [MDS-527] Extract out figma_squircle logic and fix various issues (

#172)

lib/moon_design.dart

@@ -33,8 +33,10 @@ export 'package:moon_design/src/theme/typography/text_styles.dart';
 export 'package:moon_design/src/theme/typography/typography.dart';
 
 export 'package:moon_design/src/utils/extensions.dart';
-export 'package:moon_design/src/utils/measure_size.dart';
-export 'package:moon_design/src/utils/widget_surveyor.dart';
+export 'package:moon_design/src/utils/squircle/clip_squircle_rect.dart';
+export 'package:moon_design/src/utils/squircle/squircle_border.dart';
+export 'package:moon_design/src/utils/squircle/squircle_border_radius.dart';
+export 'package:moon_design/src/utils/squircle/squircle_radius.dart';
 
 export 'package:moon_design/src/widgets/accordion/accordion_item.dart';
 export 'package:moon_design/src/widgets/alert/alert.dart';

lib/src/utils/extensions.dart

@@ -1,8 +1,10 @@
 import 'dart:ui';
 
-import 'package:figma_squircle/figma_squircle.dart';
 import 'package:flutter/widgets.dart';
 
+import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart';
+import 'package:moon_design/src/utils/squircle/squircle_radius.dart';
+
 extension DarkModeX on BuildContext {
   /// Is dark mode currently active.
   bool get isDarkMode {
@@ -12,28 +14,27 @@ extension DarkModeX on BuildContext {
 }
 
 extension BorderRadiusX on BorderRadiusGeometry {
-  /// Returns SmoothBorderRadius.
-  SmoothBorderRadius smoothBorderRadius(BuildContext context) {
-    // FIXME: CornerSmoothing of 1 creates null pointer dereference error with SmoothRectangleBorder on mobile web/PWA
-    // for some reason. So we use 0.94 instead.
+  /// Returns MoonSquircleBorderRadius.
+  MoonSquircleBorderRadius squircleBorderRadius(BuildContext context) {
+    // The value of 1 or 1.0 lead to NaN error in mobile web/PWA for some reason. So we use 0.99 instead.
     final borderRadius = resolve(Directionality.of(context));
 
-    return SmoothBorderRadius.only(
-      topLeft: SmoothRadius(
+    return MoonSquircleBorderRadius.only(
+      topLeft: MoonSquircleRadius(
         cornerRadius: borderRadius.topLeft.x,
-        cornerSmoothing: 0.94,
+        cornerSmoothing: 0.99,
       ),
-      topRight: SmoothRadius(
+      topRight: MoonSquircleRadius(
         cornerRadius: borderRadius.topRight.x,
-        cornerSmoothing: 0.94,
+        cornerSmoothing: 0.99,
       ),
-      bottomLeft: SmoothRadius(
+      bottomLeft: MoonSquircleRadius(
         cornerRadius: borderRadius.bottomLeft.x,
-        cornerSmoothing: 0.94,
+        cornerSmoothing: 0.99,
       ),
-      bottomRight: SmoothRadius(
+      bottomRight: MoonSquircleRadius(
         cornerRadius: borderRadius.bottomRight.x,
-        cornerSmoothing: 0.94,
+        cornerSmoothing: 0.99,
       ),
     );
   }

lib/src/utils/squircle/clip_squircle_rect.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/widgets.dart';
+
+import 'package:moon_design/src/utils/squircle/squircle_border.dart';
+import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart';
+
+class MoonClipSquircleRect extends StatelessWidget {
+  final MoonSquircleBorderRadius radius;
+  final Clip clipBehavior;
+  final Widget? child;
+
+  const MoonClipSquircleRect({
+    super.key,
+    required this.child,
+    this.radius = MoonSquircleBorderRadius.zero,
+    this.clipBehavior = Clip.antiAlias,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath.shape(
+      clipBehavior: clipBehavior,
+      shape: MoonSquircleBorder(
+        borderRadius: radius,
+      ),
+      child: child,
+    );
+  }
+}

lib/src/utils/squircle/path_squircle_corners.dart

@@ -0,0 +1,185 @@
+import 'dart:math' as math;
+import 'dart:ui';
+
+import 'package:moon_design/src/utils/squircle/processed_squircle_radius.dart';
+
+extension PathSquircleCornersExtensions on Path {
+  void addSmoothTopRight(ProcessedSquircleRadius radius, Rect rect) {
+    final width = rect.width;
+    final height = rect.height;
+
+    if (radius.radius.cornerRadius > 0) {
+      final a = radius.a;
+      final b = radius.b;
+      final c = radius.c;
+      final d = radius.d;
+      final p = radius.p;
+      this
+        ..moveTo(
+          math.max(width / 2, width - p),
+          0,
+        )
+        ..cubicTo(
+          width - (p - a),
+          0,
+          width - (p - a - b),
+          0,
+          width - (p - a - b - c),
+          d,
+        )
+        ..relativeArcToPoint(
+          Offset(
+            radius.circularSectionLength,
+            radius.circularSectionLength,
+          ),
+          radius: radius.radius,
+        )
+        ..cubicTo(
+          width,
+          p - a - b,
+          width,
+          p - a,
+          width,
+          math.min(height / 2, p),
+        );
+    } else {
+      this
+        ..moveTo(width / 2, 0)
+        ..lineTo(width, 0)
+        ..lineTo(width, height / 2);
+    }
+  }
+
+  void addSmoothBottomRight(ProcessedSquircleRadius radius, Rect rect) {
+    final width = rect.width;
+    final height = rect.height;
+    if (radius.radius.cornerRadius > 0) {
+      final a = radius.a;
+      final b = radius.b;
+      final c = radius.c;
+      final d = radius.d;
+      final p = radius.p;
+      this
+        ..lineTo(
+          width,
+          math.max(height / 2, height - p),
+        )
+        ..cubicTo(
+          width,
+          height - (p - a),
+          width,
+          height - (p - a - b),
+          width - d,
+          height - (p - a - b - c),
+        )
+        ..relativeArcToPoint(
+          Offset(
+            -radius.circularSectionLength,
+            radius.circularSectionLength,
+          ),
+          radius: radius.radius,
+        )
+        ..cubicTo(
+          width - (p - a - b),
+          height,
+          width - (p - a),
+          height,
+          math.max(width / 2, width - p),
+          height,
+        );
+    } else {
+      this
+        ..lineTo(width, height)
+        ..lineTo(width / 2, height);
+    }
+  }
+
+  void addSmoothBottomLeft(ProcessedSquircleRadius radius, Rect rect) {
+    final width = rect.width;
+    final height = rect.height;
+    if (radius.radius.cornerRadius > 0) {
+      final a = radius.a;
+      final b = radius.b;
+      final c = radius.c;
+      final d = radius.d;
+      final p = radius.p;
+      this
+        ..lineTo(
+          math.min(width / 2, p),
+          height,
+        )
+        ..cubicTo(
+          p - a,
+          height,
+          p - a - b,
+          height,
+          p - a - b - c,
+          height - d,
+        )
+        ..relativeArcToPoint(
+          Offset(
+            -radius.circularSectionLength,
+            -radius.circularSectionLength,
+          ),
+          radius: radius.radius,
+        )
+        ..cubicTo(
+          0,
+          height - (p - a - b),
+          0,
+          height - (p - a),
+          0,
+          math.max(height / 2, height - p),
+        );
+    } else {
+      this
+        ..lineTo(0, height)
+        ..lineTo(0, height / 2);
+    }
+  }
+
+  void addSmoothTopLeft(ProcessedSquircleRadius radius, Rect rect) {
+    final width = rect.width;
+    final height = rect.height;
+    if (radius.radius.cornerRadius > 0) {
+      final a = radius.a;
+      final b = radius.b;
+      final c = radius.c;
+      final d = radius.d;
+      final p = radius.p;
+      this
+        ..lineTo(
+          0,
+          math.min(height / 2, p),
+        )
+        ..cubicTo(
+          0,
+          p - a,
+          0,
+          p - a - b,
+          d,
+          p - a - b - c,
+        )
+        ..relativeArcToPoint(
+          Offset(
+            radius.circularSectionLength,
+            -radius.circularSectionLength,
+          ),
+          radius: radius.radius,
+        )
+        ..cubicTo(
+          p - a - b,
+          0,
+          p - a,
+          0,
+          math.min(width / 2, p),
+          0,
+        )
+        ..close();
+    } else {
+      this
+        ..lineTo(0, 0)
+        ..close();
+    }
+  }
+}