coingaming · Kypsis · Apr 17, 2023 · Apr 15, 2023
diff --git a/example/lib/src/storybook/stories/button.dart b/example/lib/src/storybook/stories/button.dart
@@ -177,13 +177,16 @@ class ButtonStory extends Story {
                         trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null,
                       ),
                       const SizedBox(height: 40),
-                      const TextDivider(text: "Button with non-standard children"),
+                      const TextDivider(text: "Custom Button with non-standard children"),
                       const SizedBox(height: 32),
                       MoonButton(
                         onTap: showDisabledKnob ? null : () {},
                         height: 40,
                         padding: const EdgeInsets.symmetric(horizontal: 8),
-                        borderRadius: BorderRadius.circular(20),
+                        borderRadius: const BorderRadius.only(
+                          topLeft: Radius.circular(20),
+                          bottomRight: Radius.circular(20),
+                        ),
                         buttonSize: buttonSizesKnob,
                         isFullWidth: setFullWidthKnob,
                         backgroundColor: context.moonTheme!.colors.krillin100,

diff --git a/example/lib/src/storybook/stories/linear_loader.dart b/example/lib/src/storybook/stories/linear_loader.dart
@@ -39,9 +39,9 @@ class LinearLoaderStory extends Story {
 
             final backgroundColor = colorTable(context)[loaderBackgroundColorKnob];
 
-            final borderRadiusValueKnob = context.knobs.sliderInt(
-              label: "bordeRadiusValue",
-              description: "LinearLoader border radius value.",
+            final borderRadiusKnob = context.knobs.sliderInt(
+              label: "borderRadius",
+              description: "LinearLoader border radius.",
               initial: 8,
               max: 12,
             );
@@ -55,7 +55,7 @@ class LinearLoaderStory extends Story {
                     loaderSize: loaderSizesKnob,
                     color: color,
                     backgroundColor: backgroundColor,
-                    borderRadiusValue: borderRadiusValueKnob.toDouble(),
+                    borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
                   ),
                   const SizedBox(height: 64),
                 ],

diff --git a/example/lib/src/storybook/stories/linear_progress.dart b/example/lib/src/storybook/stories/linear_progress.dart
@@ -39,9 +39,9 @@ class LinearProgressStory extends Story {
 
             final backgroundColor = colorTable(context)[progressBackgroundColorKnob];
 
-            final borderRadiusValueKnob = context.knobs.sliderInt(
-              label: "bordeRadiusValue",
-              description: "LinearProgress border radius value.",
+            final borderRadiusKnob = context.knobs.sliderInt(
+              label: "borderRadius",
+              description: "LinearProgress border radius.",
               initial: 8,
               max: 12,
             );
@@ -62,7 +62,7 @@ class LinearProgressStory extends Story {
                     progressSize: progressSizesKnob,
                     color: color,
                     backgroundColor: backgroundColor,
-                    borderRadiusValue: borderRadiusValueKnob.toDouble(),
+                    borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
                   ),
                   const SizedBox(height: 64),
                 ],

diff --git a/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart b/lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart
@@ -3,54 +3,55 @@ import 'dart:ui';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/sizes.dart';
 
 @immutable
 class MoonLinearLoaderSizeProperties extends ThemeExtension<MoonLinearLoaderSizeProperties>
     with DiagnosticableTreeMixin {
   static final x6s = MoonLinearLoaderSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x6s,
+    borderRadius: MoonBorders.borders.surfaceXs,
     loaderHeight: MoonSizes.sizes.x6s,
   );
 
   static final x5s = MoonLinearLoaderSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x5s,
+    borderRadius: MoonBorders.borders.surfaceXs,
     loaderHeight: MoonSizes.sizes.x5s,
   );
 
   static final x4s = MoonLinearLoaderSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x4s,
+    borderRadius: MoonBorders.borders.surfaceSm,
     loaderHeight: MoonSizes.sizes.x4s,
   );
 
   static final x3s = MoonLinearLoaderSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x3s,
+    borderRadius: MoonBorders.borders.surfaceMd,
     loaderHeight: MoonSizes.sizes.x3s,
   );
 
   static final x2s = MoonLinearLoaderSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x2s,
+    borderRadius: MoonBorders.borders.surfaceLg,
     loaderHeight: MoonSizes.sizes.x2s,
   );
 
-  /// Linear loader border radius value.
-  final double borderRadiusValue;
+  /// Linear loader border radius.
+  final BorderRadius borderRadius;
 
   /// Linear loader height.
   final double loaderHeight;
 
   const MoonLinearLoaderSizeProperties({
-    required this.borderRadiusValue,
+    required this.borderRadius,
     required this.loaderHeight,
   });
 
   @override
   MoonLinearLoaderSizeProperties copyWith({
-    double? borderRadiusValue,
+    BorderRadius? borderRadius,
     double? loaderHeight,
   }) {
     return MoonLinearLoaderSizeProperties(
-      borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue,
+      borderRadius: borderRadius ?? this.borderRadius,
       loaderHeight: loaderHeight ?? this.loaderHeight,
     );
   }
@@ -60,7 +61,7 @@ class MoonLinearLoaderSizeProperties extends ThemeExtension<MoonLinearLoaderSize
     if (other is! MoonLinearLoaderSizeProperties) return this;
 
     return MoonLinearLoaderSizeProperties(
-      borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
       loaderHeight: lerpDouble(loaderHeight, other.loaderHeight, t)!,
     );
   }
@@ -70,7 +71,7 @@ class MoonLinearLoaderSizeProperties extends ThemeExtension<MoonLinearLoaderSize
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizeProperties"))
-      ..add(DoubleProperty("borderRadiusValue", borderRadiusValue))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
       ..add(DoubleProperty("loaderHeight", loaderHeight));
   }
 }
diff --git a/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart b/lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart
@@ -3,54 +3,55 @@ import 'dart:ui';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
+import 'package:moon_design/src/theme/borders.dart';
 import 'package:moon_design/src/theme/sizes.dart';
 
 @immutable
 class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgressSizeProperties>
     with DiagnosticableTreeMixin {
   static final x6s = MoonLinearProgressSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x6s,
+    borderRadius: MoonBorders.borders.surfaceXs,
     progressHeight: MoonSizes.sizes.x6s,
   );
 
   static final x5s = MoonLinearProgressSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x5s,
+    borderRadius: MoonBorders.borders.surfaceXs,
     progressHeight: MoonSizes.sizes.x5s,
   );
 
   static final x4s = MoonLinearProgressSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x4s,
+    borderRadius: MoonBorders.borders.surfaceSm,
     progressHeight: MoonSizes.sizes.x4s,
   );
 
   static final x3s = MoonLinearProgressSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x3s,
+    borderRadius: MoonBorders.borders.surfaceMd,
     progressHeight: MoonSizes.sizes.x3s,
   );
 
   static final x2s = MoonLinearProgressSizeProperties(
-    borderRadiusValue: MoonSizes.sizes.x2s,
+    borderRadius: MoonBorders.borders.surfaceLg,
     progressHeight: MoonSizes.sizes.x2s,
   );
 
-  /// Linear progress border radius value.
-  final double borderRadiusValue;
+  /// Linear progress border radius.
+  final BorderRadius borderRadius;
 
   /// Linear progress height.
   final double progressHeight;
 
   const MoonLinearProgressSizeProperties({
-    required this.borderRadiusValue,
+    required this.borderRadius,
     required this.progressHeight,
   });
 
   @override
   MoonLinearProgressSizeProperties copyWith({
-    double? borderRadiusValue,
+    BorderRadius? borderRadius,
     double? progressHeight,
   }) {
     return MoonLinearProgressSizeProperties(
-      borderRadiusValue: borderRadiusValue ?? this.borderRadiusValue,
+      borderRadius: borderRadius ?? this.borderRadius,
       progressHeight: progressHeight ?? this.progressHeight,
     );
   }
@@ -60,7 +61,7 @@ class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgress
     if (other is! MoonLinearProgressSizeProperties) return this;
 
     return MoonLinearProgressSizeProperties(
-      borderRadiusValue: lerpDouble(borderRadiusValue, other.borderRadiusValue, t)!,
+      borderRadius: BorderRadius.lerp(borderRadius, other.borderRadius, t)!,
       progressHeight: lerpDouble(progressHeight, other.progressHeight, t)!,
     );
   }
@@ -70,7 +71,7 @@ class MoonLinearProgressSizeProperties extends ThemeExtension<MoonLinearProgress
     super.debugFillProperties(properties);
     properties
       ..add(DiagnosticsProperty("type", "MoonLinearProgressSizeProperties"))
-      ..add(DoubleProperty("borderRadiusValue", borderRadiusValue))
+      ..add(DiagnosticsProperty<BorderRadius>("borderRadius", borderRadius))
       ..add(DoubleProperty("progressHeight", progressHeight));
   }
 }
diff --git a/lib/src/utils/max_border_radius.dart b/lib/src/utils/max_border_radius.dart
diff --git a/lib/src/widgets/avatar/avatar.dart b/lib/src/widgets/avatar/avatar.dart
@@ -4,7 +4,6 @@ import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart';
 import 'package:moon_design/src/theme/colors.dart';
 import 'package:moon_design/src/theme/theme.dart';
 import 'package:moon_design/src/utils/extensions.dart';
-import 'package:moon_design/src/utils/max_border_radius.dart';
 import 'package:moon_design/src/widgets/avatar/avatar_clipper.dart';
 
 enum MoonAvatarSize {
@@ -168,7 +167,6 @@ class MoonAvatar extends StatelessWidget {
     final double effectiveBadgeMarginValue = badgeMarginValue ?? effectiveMoonAvatarSize.badgeMarginValue;
 
     final BorderRadius effectiveBorderRadius = borderRadius ?? effectiveMoonAvatarSize.borderRadius;
-    final double avatarBorderRadiusValue = maxBorderRadius(effectiveBorderRadius);
 
     return Semantics(
       label: semanticLabel,
@@ -186,7 +184,7 @@ class MoonAvatar extends StatelessWidget {
                   showBadge: showBadge,
                   width: effectiveAvatarWidth,
                   height: effectiveAvatarHeight,
-                  borderRadiusValue: avatarBorderRadiusValue,
+                  borderRadius: effectiveBorderRadius,
                   badgeSize: effectiveBadgeSize,
                   badgeMarginValue: effectiveBadgeMarginValue,
                   badgeAlignment: badgeAlignment,

diff --git a/lib/src/widgets/avatar/avatar_clipper.dart b/lib/src/widgets/avatar/avatar_clipper.dart
@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:figma_squircle/figma_squircle.dart';
 import 'package:flutter/rendering.dart';
 
@@ -11,7 +9,7 @@ class AvatarClipper extends CustomClipper<Path> {
   final double height;
   final double badgeSize;
   final double badgeMarginValue;
-  final double borderRadiusValue;
+  final BorderRadius borderRadius;
   final MoonBadgeAlignment badgeAlignment;
   final TextDirection textDirection;
 
@@ -21,7 +19,7 @@ class AvatarClipper extends CustomClipper<Path> {
     required this.height,
     required this.badgeSize,
     required this.badgeMarginValue,
-    required this.borderRadiusValue,
+    required this.borderRadius,
     required this.badgeAlignment,
     required this.textDirection,
   });
@@ -120,19 +118,20 @@ class AvatarClipper extends CustomClipper<Path> {
 
   @override
   Path getClip(Size size) {
-    final smallestDimension = min(width, height);
-
     final pathWithBadge = Path.combine(
       PathOperation.difference,
       // Avatar shape properties
       Path()
         ..addRRect(
-          RRect.fromLTRBR(
+          RRect.fromLTRBAndCorners(
             0,
             0,
             width,
             height,
-            SmoothRadius(cornerRadius: min(borderRadiusValue, smallestDimension / 2), cornerSmoothing: 1),
+            topLeft: SmoothRadius(cornerRadius: borderRadius.topLeft.x, cornerSmoothing: 1),
+            topRight: SmoothRadius(cornerRadius: borderRadius.topRight.x, cornerSmoothing: 1),
+            bottomLeft: SmoothRadius(cornerRadius: borderRadius.bottomLeft.x, cornerSmoothing: 1),
+            bottomRight: SmoothRadius(cornerRadius: borderRadius.bottomRight.x, cornerSmoothing: 1),
           ),
         ),
       // Badge shape properties
@@ -141,15 +140,15 @@ class AvatarClipper extends CustomClipper<Path> {
 
     final pathWithoutBadge = Path()
       ..addRRect(
-        RRect.fromLTRBR(
+        RRect.fromLTRBAndCorners(
           0,
           0,
           width,
           height,
-          SmoothRadius(
-            cornerRadius: min(borderRadiusValue, smallestDimension / 2),
-            cornerSmoothing: 1,
-          ),
+          topLeft: SmoothRadius(cornerRadius: borderRadius.topLeft.x, cornerSmoothing: 1),
+          topRight: SmoothRadius(cornerRadius: borderRadius.topRight.x, cornerSmoothing: 1),
+          bottomLeft: SmoothRadius(cornerRadius: borderRadius.bottomLeft.x, cornerSmoothing: 1),
+          bottomRight: SmoothRadius(cornerRadius: borderRadius.bottomRight.x, cornerSmoothing: 1),
         ),
       );
 

diff --git a/lib/src/widgets/common/effects/focus_effect.dart b/lib/src/widgets/common/effects/focus_effect.dart
@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 
-import 'package:moon_design/src/utils/max_border_radius.dart';
 import 'package:moon_design/src/widgets/common/effects/painters/focus_effect_painter.dart';
 
 class MoonFocusEffect extends StatefulWidget {
@@ -61,8 +60,6 @@ class _MoonFocusEffectState extends State<MoonFocusEffect> with SingleTickerProv
 
   @override
   Widget build(BuildContext context) {
-    final double focusEffectBorderRadius = maxBorderRadius(widget.childBorderRadius);
-
     return RepaintBoundary(
       child: AnimatedBuilder(
         animation: _animationController,
@@ -72,7 +69,7 @@ class _MoonFocusEffectState extends State<MoonFocusEffect> with SingleTickerProv
             painter: FocusEffectPainter(
               color: widget.effectColor,
               effectExtent: widget.effectExtent,
-              borderRadiusValue: focusEffectBorderRadius,
+              borderRadius: widget.childBorderRadius ?? BorderRadius.zero,
               animation: _focusAnimation,
             ),
             child: child,