Skip to content

Commit

Permalink
removed extended search appbar, changed behaviour to close search
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikecoomber
mikecoomber committed Oct 16, 2024
1 parent ba4901d commit a3dfd3c
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 170 deletions.
78 changes: 9 additions & 69 deletions example/lib/pages/components/top_app_bar_example.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,20 +15,7 @@ class TopAppBarExample extends StatefulWidget {
}

class _TopAppBarExampleState extends State<TopAppBarExample> {
final _searchControllerExtended = ZetaSearchController();
final _searchControllerRegular = ZetaSearchController();

void _showHideSearchExtended() {
_searchControllerExtended.isEnabled
? _searchControllerExtended.closeSearch()
: _searchControllerExtended.startSearch();
}

void _showHideSearchRegular() {
_searchControllerRegular.isEnabled
? _searchControllerRegular.closeSearch()
: _searchControllerRegular.startSearch();
}
final _searchController = ZetaSearchController();

@override
Widget build(BuildContext context) {
Expand Down Expand Up @@ -78,8 +65,7 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Centered', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
ZetaTopAppBar.centered(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
Expand Down Expand Up @@ -119,24 +105,20 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
Text('Search', style: ZetaTextStyles.titleLarge),
ZetaTopAppBar(
type: ZetaTopAppBarType.centeredTitle,
leading: BackButton(),
ZetaTopAppBar.search(
leading: IconButton(
onPressed: () {},
icon: ZetaIcon(Icons.menu),
),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchRegular,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerRegular,
searchController: _searchController,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = ['This is a sample text', 'Another sample', 'Speech recognition text', 'Example'];

var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];

_searchControllerRegular.text = generatedText;
_searchController.text = generatedText;
},
),
Text('Extended', style: ZetaTextStyles.titleLarge),
Expand Down Expand Up @@ -188,48 +170,6 @@ class _TopAppBarExampleState extends State<TopAppBarExample> {
],
),
),
Text('Extended Search', style: ZetaTextStyles.titleLarge),
SizedBox(
width: 800,
height: 200,
child: CustomScrollView(
slivers: [
ZetaTopAppBar.extended(
leading: BackButton(),
title: Text("Title"),
actions: [
IconButton(
onPressed: _showHideSearchExtended,
icon: ZetaIcon(ZetaIcons.search),
)
],
searchController: _searchControllerExtended,
onSearch: (text) => debugPrint('search text: $text'),
onSearchMicrophoneIconPressed: () async {
var sampleTexts = [
'This is a sample text',
'Another sample',
'Speech recognition text',
'Example'
];
var generatedText = sampleTexts[Random().nextInt(sampleTexts.length)];
_searchControllerExtended.text = generatedText;
},
),
SliverToBoxAdapter(
child: Container(
width: 800,
height: 800,
color: Zeta.of(context).colors.surfaceSelectedHover,
child: CustomPaint(
painter: Painter(context: context),
size: Size(800, 800),
),
),
),
],
),
),
].gap(20),
),
),
Expand Down
2 changes: 1 addition & 1 deletion example/widgetbook/pages/components/top_app_bar_widgetbook.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Widget defaultTopAppBarUseCase(BuildContext context) {
icon: ZetaIcon(ZetaIcons.more_vertical),
)
]
: null,
: [],
),
],
));
Expand Down
2 changes: 1 addition & 1 deletion lib/src/components/screen_header_bar/screen_header_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class ZetaScreenHeaderBar extends ZetaStatelessWidget {
title: title,
titleTextStyle: ZetaTextStyles.titleLarge,
actions: actionButtonLabel == null
? null
? []
: [
ZetaButton(
label: actionButtonLabel!,
Expand Down
50 changes: 21 additions & 29 deletions lib/src/components/top_app_bar/extended_top_app_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate {
required this.shrinks,
this.actions,
this.leading,
this.searchController,
});

/// Title of the app bar.
Expand All @@ -27,56 +26,49 @@ class ZetaExtendedAppBarDelegate extends SliverPersistentHeaderDelegate {
/// Widget displayed first in the app bar row.
final Widget? leading;

/// Used to control the search textfield and states.
final ZetaSearchController? searchController;

/// If `ZetaTopAppBarType.extend` shrinks. Does not affect other types of app bar.
final bool shrinks;

static const double _maxExtent = 104;
static const double _minExtent = 52;
static const double _minExtent = 56;

@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
final searchBarOffsetTop = Zeta.of(context).spacing.minimum * 1.5;
final searchBarOffsetRight = Zeta.of(context).spacing.minimum * 22;
final maxExtent = Zeta.of(context).spacing.minimum * 26;
final leftMin = Zeta.of(context).spacing.large;
final topMin = Zeta.of(context).spacing.xl;
final topMax = Zeta.of(context).spacing.minimum * 15;
final spacing = Zeta.of(context).spacing;

final maxExtent = spacing.minimum * 26;
final leftMin = spacing.large;
final topMin = spacing.xl;
final topMax = spacing.minimum * 15;

/// If there is no leading widget, the left margin should not change
/// If there is a leading widget, the left margin should be the same as the leading widget's width plus padding
final leftMax = leading == null ? leftMin : _minExtent + Zeta.of(context).spacing.small;
final leftMax = leading == null ? leftMin : _minExtent + spacing.small;

final top = shrinks
? (topMax + (-1 * shrinkOffset)).clamp(
topMin - (spacing.minimum),
topMax - (spacing.minimum),
)
: topMax;

return ConstrainedBox(
constraints: BoxConstraints(minHeight: Zeta.of(context).spacing.xl_9, maxHeight: maxExtent),
constraints: BoxConstraints(minHeight: spacing.xl_9, maxHeight: maxExtent),
child: ColoredBox(
color: Zeta.of(context).colors.surfacePrimary,
child: Stack(
children: [
Positioned(
top: shrinks
? (topMax + (-1 * shrinkOffset)).clamp(
topMin -
(searchController != null && searchController!.isEnabled
? searchBarOffsetTop
: Zeta.of(context).spacing.none),
topMax,
)
: topMax,
top: top,
left: shrinks ? ((shrinkOffset / maxExtent) * _maxExtent).clamp(leftMin, leftMax) : leftMin,
right: searchController != null && searchController!.isEnabled
? searchBarOffsetRight
: Zeta.of(context).spacing.none,
right: spacing.none,
child: title,
),
if (leading != null)
Positioned(top: Zeta.of(context).spacing.medium, left: Zeta.of(context).spacing.small, child: leading!),
if (leading != null) Positioned(top: spacing.small, left: spacing.small, child: leading!),
if (actions != null)
Positioned(
top: Zeta.of(context).spacing.medium,
right: Zeta.of(context).spacing.small,
top: spacing.small,
right: spacing.small,
child: Row(children: actions!),
),
],
Expand Down
10 changes: 1 addition & 9 deletions lib/src/components/top_app_bar/search_top_app_bar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,20 +66,12 @@ class _ZetaTopAppBarSearchFieldState extends State<ZetaTopAppBarSearchField> wit

@override
void initState() {
_textFocusNode.addListener(_onFocusChanged);
widget.searchController?.addListener(_onSearchControllerChanged);
widget.searchController?.textEditingController ??= TextEditingController();

super.initState();
}

void _onFocusChanged() {
final text = widget.searchController?.text ?? '';
final shouldCloseSearch = _isSearching && text.isEmpty && !_textFocusNode.hasFocus;

if (shouldCloseSearch) _closeSearch();
}

void _onSearchControllerChanged() {
final controller = widget.searchController;
if (controller == null) return;
Expand Down Expand Up @@ -151,7 +143,7 @@ class _ZetaTopAppBarSearchFieldState extends State<ZetaTopAppBarSearchField> wit
children: [
Row(
mainAxisAlignment:
widget.type == ZetaTopAppBarType.centeredTitle ? MainAxisAlignment.center : MainAxisAlignment.start,
widget.type == ZetaTopAppBarType.centered ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
widget.child ?? const Nothing(),
],
Expand Down
Loading

0 comments on commit a3dfd3c

Please sign in to comment.