align search bar

ZebraDevs · May 16, 2024 · 25a06af · 25a06af
1 parent 457f110
commit 25a06af
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/lib/src/components/top_app_bar/extended_top_app_bar.dart b/lib/src/components/top_app_bar/extended_top_app_bar.dart
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import '../../../zeta_flutter.dart';
 
+const _searchBarOffset = 6;
+
 /// Delegate for creating an extended app bar, that grows and shrinks when scrolling.
 class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate {
   /// Constructs a [ZetaExtendedAppBarDelegate].
@@ -44,7 +46,12 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate {
         child: Stack(
           children: [
             Positioned(
-              top: shrinks ? (_topMax + (-1 * shrinkOffset)).clamp(_topMin, _topMax) : _topMax,
+              top: shrinks
+                  ? (_topMax + (-1 * shrinkOffset)).clamp(
+                      _topMin - (searchController != null && searchController!.isEnabled ? _searchBarOffset : 0),
+                      _topMax,
+                    )
+                  : _topMax,
               left: shrinks ? ((shrinkOffset / _maxExtent) * ZetaSpacing.x50).clamp(_leftMin, _leftMax) : _leftMin,
               right: searchController != null && searchController!.isEnabled ? 88 : 0,
               child: title,
@@ -64,7 +71,5 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate {
   double get minExtent => shrinks ? _minExtent : _maxExtent;
 
   @override
-  bool shouldRebuild(covariant ZetaExtendedAppBarDelegate oldDelegate) {
-    return oldDelegate != this;
-  }
+  bool shouldRebuild(covariant ZetaExtendedAppBarDelegate oldDelegate) => oldDelegate != this;
 }
diff --git a/lib/src/components/top_app_bar/search_top_app_bar.dart b/lib/src/components/top_app_bar/search_top_app_bar.dart
@@ -13,6 +13,7 @@ class ZetaTopAppBarSearchField extends StatefulWidget {
     required this.searchController,
     required this.hintText,
     required this.type,
+    required this.isExtended,
   });
 
   /// Called when text in the search field is submitted.
@@ -30,6 +31,9 @@ class ZetaTopAppBarSearchField extends StatefulWidget {
   /// Defines the styles of the app bar.
   final ZetaTopAppBarType type;
 
+  /// Whether top app bar is extended.
+  final bool isExtended;
+
   @override
   State<ZetaTopAppBarSearchField> createState() => _ZetaTopAppBarSearchFieldState();
 
@@ -40,7 +44,8 @@ class ZetaTopAppBarSearchField extends StatefulWidget {
       ..add(ObjectFlagProperty<void Function(String value)?>.has('onSearch', onSearch))
       ..add(StringProperty('hintText', hintText))
       ..add(DiagnosticsProperty<AppBarSearchController?>('searchController', searchController))
-      ..add(EnumProperty<ZetaTopAppBarType>('type', type));
+      ..add(EnumProperty<ZetaTopAppBarType>('type', type))
+      ..add(DiagnosticsProperty<bool>('isExtended', isExtended));
   }
 }
 
@@ -143,7 +148,7 @@ class _ZetaTopAppBarSearchFieldState extends State<ZetaTopAppBarSearchField> wit
           ],
         ),
         ConstrainedBox(
-          constraints: const BoxConstraints(maxHeight: 26),
+          constraints: BoxConstraints(maxHeight: widget.isExtended ? 26 : double.infinity),
           child: AnimatedBuilder(
             animation: _animationController,
             builder: (context, child) => Transform.scale(

diff --git a/lib/src/components/top_app_bar/top_app_bar.dart b/lib/src/components/top_app_bar/top_app_bar.dart
@@ -205,6 +205,7 @@ class _ZetaTopAppBarState extends State<ZetaTopAppBar> {
             hintText: widget.searchHintText ?? 'Search',
             onSearch: widget.onSearch,
             type: widget.type,
+            isExtended: widget.type == ZetaTopAppBarType.extendedTitle,
             child: titleText,
           )
         : titleText;