feat/axis-alignment-alert

Author: nank1ro

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 - Add `header` and `footer` to `ShadSelect` and `ShadSelectFormField`.
 - Fix unintentional disposal of `controller` in `ShadSelect`.
+- Add `mainAxisAlignment` and `crossAxisAlignment` to `ShadAlert`.
+- Remove assert about `icon` and `iconSrc` in `ShadAlert`, you can avoid using an icon now.
 
 ## 0.7.2
 

lib/src/components/alert.dart

@@ -22,11 +22,9 @@ class ShadAlert extends StatelessWidget {
     this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
-  })  : variant = ShadAlertVariant.primary,
-        assert(
-          (icon != null) ^ (iconSrc != null),
-          'Either icon or iconSrc must be provided',
-        );
+    this.mainAxisAlignment,
+    this.crossAxisAlignment,
+  }) : variant = ShadAlertVariant.primary;
 
   const ShadAlert.destructive({
     super.key,
@@ -41,11 +39,9 @@ class ShadAlert extends StatelessWidget {
     this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
-  })  : variant = ShadAlertVariant.destructive,
-        assert(
-          (icon != null) ^ (iconSrc != null),
-          'Either icon or iconSrc must be provided',
-        );
+    this.mainAxisAlignment,
+    this.crossAxisAlignment,
+  }) : variant = ShadAlertVariant.destructive;
 
   const ShadAlert.raw({
     super.key,
@@ -61,10 +57,9 @@ class ShadAlert extends StatelessWidget {
     this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
-  }) : assert(
-          (icon != null) ^ (iconSrc != null),
-          'Either icon or iconSrc must be provided',
-        );
+    this.mainAxisAlignment,
+    this.crossAxisAlignment,
+  });
 
   final ShadAlertVariant variant;
   final Widget? icon;
@@ -78,6 +73,8 @@ class ShadAlert extends StatelessWidget {
   final Size? iconSize;
   final TextStyle? titleStyle;
   final TextStyle? descriptionStyle;
+  final MainAxisAlignment? mainAxisAlignment;
+  final CrossAxisAlignment? crossAxisAlignment;
 
   @override
   Widget build(BuildContext context) {
@@ -108,16 +105,19 @@ class ShadAlert extends StatelessWidget {
     final effectiveIconSize =
         iconSize ?? effectiveAlertTheme.iconSize ?? const Size.square(16);
 
-    final effectiveIcon = Padding(
-      padding: effectiveIconPadding,
-      child: icon ??
-          ShadImage(
-            iconSrc!,
-            width: effectiveIconSize.width,
-            height: effectiveIconSize.height,
-            color: effectiveIconColor,
-          ),
-    );
+    final hasIcon = icon != null || iconSrc != null;
+    final effectiveIcon = hasIcon
+        ? Padding(
+            padding: effectiveIconPadding,
+            child: icon ??
+                ShadImage(
+                  iconSrc!,
+                  width: effectiveIconSize.width,
+                  height: effectiveIconSize.height,
+                  color: effectiveIconColor,
+                ),
+          )
+        : null;
 
     final effectiveTitleStyle = titleStyle ??
         effectiveAlertTheme.titleStyle ??
@@ -131,13 +131,22 @@ class ShadAlert extends StatelessWidget {
         effectiveAlertTheme.descriptionStyle ??
         theme.textTheme.muted.copyWith(color: theme.colorScheme.foreground);
 
+    final effectiveMainAxisAlignment = mainAxisAlignment ??
+        effectiveAlertTheme.mainAxisAlignment ??
+        MainAxisAlignment.start;
+
+    final effectiveCrossAxisAlignment = crossAxisAlignment ??
+        effectiveAlertTheme.crossAxisAlignment ??
+        CrossAxisAlignment.start;
+
     return ShadDecorator(
       decoration: effectiveDecoration,
       child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: effectiveCrossAxisAlignment,
+        mainAxisAlignment: effectiveMainAxisAlignment,
         textDirection: textDirection,
         children: [
-          effectiveIcon,
+          if (effectiveIcon != null) effectiveIcon,
           Flexible(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,

lib/src/theme/components/alert.dart

@@ -11,6 +11,8 @@ class ShadAlertTheme {
     this.iconSize,
     this.titleStyle,
     this.descriptionStyle,
+    this.mainAxisAlignment,
+    this.crossAxisAlignment,
   });
 
   final bool merge;
@@ -20,6 +22,8 @@ class ShadAlertTheme {
   final Size? iconSize;
   final TextStyle? titleStyle;
   final TextStyle? descriptionStyle;
+  final MainAxisAlignment? mainAxisAlignment;
+  final CrossAxisAlignment? crossAxisAlignment;
 
   static ShadAlertTheme lerp(
     ShadAlertTheme a,
@@ -36,6 +40,8 @@ class ShadAlertTheme {
       titleStyle: TextStyle.lerp(a.titleStyle, b.titleStyle, t),
       descriptionStyle:
           TextStyle.lerp(a.descriptionStyle, b.descriptionStyle, t),
+      mainAxisAlignment: t < 0.5 ? a.mainAxisAlignment : b.mainAxisAlignment,
+      crossAxisAlignment: t < 0.5 ? a.crossAxisAlignment : b.crossAxisAlignment,
     );
   }
 
@@ -47,6 +53,8 @@ class ShadAlertTheme {
     Size? iconSize,
     TextStyle? titleStyle,
     TextStyle? descriptionStyle,
+    MainAxisAlignment? mainAxisAlignment,
+    CrossAxisAlignment? crossAxisAlignment,
   }) {
     return ShadAlertTheme(
       merge: merge ?? this.merge,
@@ -56,6 +64,8 @@ class ShadAlertTheme {
       iconSize: iconSize ?? this.iconSize,
       titleStyle: titleStyle ?? this.titleStyle,
       descriptionStyle: descriptionStyle ?? this.descriptionStyle,
+      mainAxisAlignment: mainAxisAlignment ?? this.mainAxisAlignment,
+      crossAxisAlignment: crossAxisAlignment ?? this.crossAxisAlignment,
     );
   }
 
@@ -69,6 +79,8 @@ class ShadAlertTheme {
       iconSize: other.iconSize,
       titleStyle: other.titleStyle,
       descriptionStyle: other.descriptionStyle,
+      mainAxisAlignment: other.mainAxisAlignment,
+      crossAxisAlignment: other.crossAxisAlignment,
     );
   }
 
@@ -83,7 +95,9 @@ class ShadAlertTheme {
         other.iconColor == iconColor &&
         other.iconSize == iconSize &&
         other.titleStyle == titleStyle &&
-        other.descriptionStyle == descriptionStyle;
+        other.descriptionStyle == descriptionStyle &&
+        other.mainAxisAlignment == mainAxisAlignment &&
+        other.crossAxisAlignment == crossAxisAlignment;
   }
 
   @override
@@ -94,6 +108,8 @@ class ShadAlertTheme {
         iconColor.hashCode ^
         iconSize.hashCode ^
         titleStyle.hashCode ^
-        descriptionStyle.hashCode;
+        descriptionStyle.hashCode ^
+        mainAxisAlignment.hashCode ^
+        crossAxisAlignment.hashCode;
   }
 }