fix/popover overlay padding

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.5.6
+
+- Fix mismatch of `childAlignment` and `overlayAlignment` in `ShadPortal`
+- Remove top padding of `ShadPopover`
+- Set default values to `ShadAnchor` and `ShadAnchorAuto`
+
 ## 0.5.5
 
 - Remove `inputDecoration` from form fields.

lib/src/components/popover.dart

@@ -162,17 +162,20 @@ class _ShadPopoverState extends State<ShadPopover> {
         theme.popoverTheme.padding ??
         const EdgeInsets.symmetric(horizontal: 12, vertical: 6);
     final effectiveShadows = widget.shadows ?? theme.popoverTheme.shadows;
-    final effectiveDecoration =
+    var effectiveDecoration =
         (theme.popoverTheme.decoration ?? const ShadDecoration())
             .mergeWith(widget.decoration)
             .copyWith(shadows: effectiveShadows);
+    // remove the top padding of the popover
+    effectiveDecoration = effectiveDecoration.copyWith(
+      secondaryBorder: ShadBorder(
+        padding: theme.decoration.secondaryBorder?.padding?.copyWith(top: 0),
+      ),
+    );
 
     final effectiveAnchor = widget.anchor ??
         theme.popoverTheme.anchor ??
-        const ShadAnchorAuto(
-          verticalOffset: 24,
-          preferBelow: true,
-        );
+        const ShadAnchorAuto(verticalOffset: 24);
 
     Widget popover = ShadDecorator(
       decoration: effectiveDecoration,

lib/src/components/select.dart

@@ -325,13 +325,8 @@ class ShadSelectState<T> extends State<ShadSelect<T>> {
             theme.selectTheme.showScrollToBottomChevron ??
             true;
 
-    final effectiveAnchor = widget.anchor ??
-        theme.selectTheme.anchor ??
-        const ShadAnchor(
-          overlayAlignment: Alignment.bottomLeft,
-          childAlignment: Alignment.topLeft,
-          offset: Offset.zero,
-        );
+    final effectiveAnchor =
+        widget.anchor ?? theme.selectTheme.anchor ?? const ShadAnchor();
 
     final Widget effectiveText;
     if (selected is T) {

lib/src/raw_components/portal.dart

@@ -10,21 +10,30 @@ sealed class ShadAnchorBase {
 /// [preferBelow] properties.
 class ShadAnchorAuto extends ShadAnchorBase {
   const ShadAnchorAuto({
-    required this.verticalOffset,
-    required this.preferBelow,
+    this.verticalOffset = 0,
+    this.preferBelow = true,
+    this.followTargetOnResize = true,
   });
 
+  /// The vertical offset of the overlay from the start of target widget.
   final double verticalOffset;
+
+  /// Whether the overlay is displayed below its widget by default, if there is
+  /// enough space.
   final bool preferBelow;
+
+  /// Whether the overlay is automatically adjusted to follow the target
+  /// widget when the target widget moves dues to a window resize.
+  final bool followTargetOnResize;
 }
 
 /// Manually specifies the position of the [ShadPortal] in the global
 /// coordinate system.
 class ShadAnchor extends ShadAnchorBase {
   const ShadAnchor({
-    required this.childAlignment,
-    required this.overlayAlignment,
-    required this.offset,
+    this.childAlignment = Alignment.topLeft,
+    this.overlayAlignment = Alignment.bottomLeft,
+    this.offset = Offset.zero,
   });
 
   final Alignment childAlignment;
@@ -34,7 +43,6 @@ class ShadAnchor extends ShadAnchorBase {
   static const center = ShadAnchor(
     childAlignment: Alignment.topCenter,
     overlayAlignment: Alignment.bottomCenter,
-    offset: Offset.zero,
   );
 
   ShadAnchor copyWith({
@@ -114,6 +122,9 @@ class _ShadPortalState extends State<ShadPortal> {
     BuildContext context,
     ShadAnchorAuto anchor,
   ) {
+    if (anchor.followTargetOnResize) {
+      MediaQuery.sizeOf(context);
+    }
     final overlayState = Overlay.of(context, debugRequiredFor: widget);
     final box = this.context.findRenderObject()! as RenderBox;
     final target = box.localToGlobal(

lib/src/theme/themes/component_defaults.dart

@@ -230,7 +230,7 @@ abstract class ShadDefaultComponentThemes {
           color: colorScheme.border,
         ),
       ),
-      anchor: const ShadAnchorAuto(preferBelow: true, verticalOffset: 24),
+      anchor: const ShadAnchorAuto(verticalOffset: 24),
     );
   }
 
@@ -300,11 +300,7 @@ abstract class ShadDefaultComponentThemes {
       optionsPadding: const EdgeInsets.all(4),
       showScrollToTopChevron: true,
       showScrollToBottomChevron: true,
-      anchor: const ShadAnchor(
-        overlayAlignment: Alignment.bottomLeft,
-        childAlignment: Alignment.topLeft,
-        offset: Offset.zero,
-      ),
+      anchor: const ShadAnchor(),
       searchPadding: const EdgeInsets.all(12),
     );
   }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: shadcn_ui
 description: shadcn-ui ported in Flutter. Awesome UI components for Flutter, fully customizable.
-version: 0.5.5
+version: 0.5.6
 homepage: https://mariuti.com/shadcn-ui
 repository: https://github.com/nank1ro/flutter-shadcn-ui
 documentation: https://mariuti.com/shadcn-ui