From 98e54f9dff174d6470b9e76407c3ee598503d887 Mon Sep 17 00:00:00 2001 From: Thibault Deckers Date: Thu, 19 May 2022 10:20:44 +0900 Subject: [PATCH] app bar review --- lib/widgets/collection/app_bar.dart | 75 +++++----- lib/widgets/collection/grid/headers/any.dart | 2 +- lib/widgets/common/app_bar_title.dart | 1 - lib/widgets/common/basic/query_bar.dart | 73 ++++----- lib/widgets/common/grid/header.dart | 23 ++- lib/widgets/common/identity/aves_app_bar.dart | 138 ++++++++++++++++++ lib/widgets/dialogs/item_pick_dialog.dart | 1 + lib/widgets/filter_grids/album_pick.dart | 96 ++++++------ lib/widgets/filter_grids/common/app_bar.dart | 21 ++- .../filter_grids/common/section_header.dart | 2 +- lib/widgets/navigation/nav_bar/nav_bar.dart | 43 ++---- 11 files changed, 303 insertions(+), 172 deletions(-) create mode 100644 lib/widgets/common/identity/aves_app_bar.dart diff --git a/lib/widgets/collection/app_bar.dart b/lib/widgets/collection/app_bar.dart index 544668b7a..e68e39ee3 100644 --- a/lib/widgets/collection/app_bar.dart +++ b/lib/widgets/collection/app_bar.dart @@ -1,5 +1,4 @@ import 'dart:async'; -import 'dart:ui'; import 'package:aves/app_mode.dart'; import 'package:aves/model/actions/entry_set_actions.dart'; @@ -24,7 +23,7 @@ import 'package:aves/widgets/common/app_bar_title.dart'; import 'package:aves/widgets/common/basic/menu.dart'; import 'package:aves/widgets/common/extensions/build_context.dart'; import 'package:aves/widgets/common/favourite_toggler.dart'; -import 'package:aves/widgets/common/sliver_app_bar_title.dart'; +import 'package:aves/widgets/common/identity/aves_app_bar.dart'; import 'package:aves/widgets/dialogs/tile_view_dialog.dart'; import 'package:aves/widgets/search/search_delegate.dart'; import 'package:flutter/material.dart'; @@ -46,14 +45,13 @@ class CollectionAppBar extends StatefulWidget { State createState() => _CollectionAppBarState(); } -class _CollectionAppBarState extends State with SingleTickerProviderStateMixin, WidgetsBindingObserver { +class _CollectionAppBarState extends State with SingleTickerProviderStateMixin { final List _subscriptions = []; final EntrySetActionDelegate _actionDelegate = EntrySetActionDelegate(); late AnimationController _browseToSelectAnimation; final ValueNotifier _isSelectingNotifier = ValueNotifier(false); final FocusNode _queryBarFocusNode = FocusNode(); late final Listenable _queryFocusRequestNotifier; - double _statusBarHeight = 0; CollectionLens get collection => widget.collection; @@ -78,11 +76,7 @@ class _CollectionAppBarState extends State with SingleTickerPr ); _isSelectingNotifier.addListener(_onActivityChange); _registerWidget(widget); - WidgetsBinding.instance.addObserver(this); - WidgetsBinding.instance.addPostFrameCallback((_) { - _updateStatusBarHeight(); - _onFilterChanged(); - }); + WidgetsBinding.instance.addPostFrameCallback((_) => _onFilterChanged()); } @override @@ -101,7 +95,6 @@ class _CollectionAppBarState extends State with SingleTickerPr _subscriptions ..forEach((sub) => sub.cancel()) ..clear(); - WidgetsBinding.instance.removeObserver(this); super.dispose(); } @@ -113,11 +106,6 @@ class _CollectionAppBarState extends State with SingleTickerPr widget.collection.filterChangeNotifier.removeListener(_onFilterChanged); } - @override - void didChangeMetrics() { - _updateStatusBarHeight(); - } - @override Widget build(BuildContext context) { final appMode = context.watch>().value; @@ -133,15 +121,16 @@ class _CollectionAppBarState extends State with SingleTickerPr builder: (context, queryEnabled, child) { return Selector>( selector: (context, s) => s.collectionBrowsingQuickActions, - builder: (context, _, child) => SliverAppBar( - leading: appMode.hasDrawer ? _buildAppBarLeading(isSelecting) : null, - title: SliverAppBarTitleWrapper( - child: _buildAppBarTitle(isSelecting), - ), - actions: _buildActions(selection), - bottom: PreferredSize( - preferredSize: Size.fromHeight(appBarBottomHeight), - child: Column( + builder: (context, _, child) { + return AvesAppBar( + contentHeight: appBarContentHeight, + leading: _buildAppBarLeading( + hasDrawer: appMode.hasDrawer, + isSelecting: isSelecting, + ), + title: _buildAppBarTitle(isSelecting), + actions: _buildActions(selection), + bottom: Column( children: [ if (showFilterBar) FilterBar( @@ -156,10 +145,9 @@ class _CollectionAppBarState extends State with SingleTickerPr ) ], ), - ), - titleSpacing: 0, - floating: true, - ), + transitionKey: isSelecting, + ); + }, ); }, ); @@ -167,12 +155,16 @@ class _CollectionAppBarState extends State with SingleTickerPr ); } - double get appBarBottomHeight { + double get appBarContentHeight { final hasQuery = context.read().enabled; - return (showFilterBar ? FilterBar.preferredHeight : .0) + (hasQuery ? EntryQueryBar.preferredHeight : .0); + return kToolbarHeight + (showFilterBar ? FilterBar.preferredHeight : .0) + (hasQuery ? EntryQueryBar.preferredHeight : .0); } - Widget _buildAppBarLeading(bool isSelecting) { + Widget _buildAppBarLeading({required bool hasDrawer, required bool isSelecting}) { + if (!hasDrawer) { + return const CloseButton(); + } + VoidCallback? onPressed; String? tooltip; if (isSelecting) { @@ -200,11 +192,21 @@ class _CollectionAppBarState extends State with SingleTickerPr if (isSelecting) { return Selector, int>( selector: (context, selection) => selection.selectedItems.length, - builder: (context, count, child) => Text(count == 0 ? l10n.collectionSelectPageTitle : l10n.itemCount(count)), + builder: (context, count, child) => Text( + count == 0 ? l10n.collectionSelectPageTitle : l10n.itemCount(count), + softWrap: false, + overflow: TextOverflow.fade, + maxLines: 1, + ), ); } else { final appMode = context.watch>().value; - Widget title = Text(appMode.isPickingMedia ? l10n.collectionPickPageTitle : (isTrash ? l10n.binPageTitle : l10n.collectionPageTitle)); + Widget title = Text( + appMode.isPickingMedia ? l10n.collectionPickPageTitle : (isTrash ? l10n.binPageTitle : l10n.collectionPageTitle), + softWrap: false, + overflow: TextOverflow.fade, + maxLines: 1, + ); if (appMode == AppMode.main) { title = SourceStateAwareAppBarTitle( title: title, @@ -430,13 +432,8 @@ class _CollectionAppBarState extends State with SingleTickerPr void _onQueryFocusRequest() => _queryBarFocusNode.requestFocus(); - void _updateStatusBarHeight() { - _statusBarHeight = EdgeInsets.fromWindowPadding(window.padding, window.devicePixelRatio).top; - _updateAppBarHeight(); - } - void _updateAppBarHeight() { - widget.appBarHeightNotifier.value = _statusBarHeight + kToolbarHeight + appBarBottomHeight; + widget.appBarHeightNotifier.value = AvesAppBar.appBarHeightForContentHeight(appBarContentHeight); } Future _onActionSelected(EntrySetAction action) async { diff --git a/lib/widgets/collection/grid/headers/any.dart b/lib/widgets/collection/grid/headers/any.dart index b390dcf00..d88929c68 100644 --- a/lib/widgets/collection/grid/headers/any.dart +++ b/lib/widgets/collection/grid/headers/any.dart @@ -76,7 +76,7 @@ class CollectionSectionHeader extends StatelessWidget { } final textScaleFactor = MediaQuery.textScaleFactorOf(context); - headerExtent = max(headerExtent, SectionHeader.leadingDimension * textScaleFactor) + SectionHeader.padding.vertical; + headerExtent = max(headerExtent, SectionHeader.leadingSize.height * textScaleFactor) + SectionHeader.padding.vertical; return headerExtent; } } diff --git a/lib/widgets/common/app_bar_title.dart b/lib/widgets/common/app_bar_title.dart index 6bed17d24..09a7897a4 100644 --- a/lib/widgets/common/app_bar_title.dart +++ b/lib/widgets/common/app_bar_title.dart @@ -18,7 +18,6 @@ class InteractiveAppBarTitle extends StatelessWidget { // so that we can also detect taps around the title `Text` child: Container( alignment: AlignmentDirectional.centerStart, - padding: const EdgeInsets.symmetric(horizontal: NavigationToolbar.kMiddleSpacing), color: Colors.transparent, height: kToolbarHeight, child: child, diff --git a/lib/widgets/common/basic/query_bar.dart b/lib/widgets/common/basic/query_bar.dart index e4365f297..a19d0e813 100644 --- a/lib/widgets/common/basic/query_bar.dart +++ b/lib/widgets/common/basic/query_bar.dart @@ -49,45 +49,48 @@ class _QueryBarState extends State { tooltip: context.l10n.clearTooltip, ); - return Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: TextField( - controller: _controller, - focusNode: widget.focusNode ?? FocusNode(), - decoration: InputDecoration( - icon: Padding( - padding: const EdgeInsetsDirectional.only(start: 16), - child: Icon(widget.icon ?? AIcons.filter), - ), - hintText: widget.hintText ?? MaterialLocalizations.of(context).searchFieldLabel, - hintStyle: Theme.of(context).inputDecorationTheme.hintStyle, - ), - textInputAction: TextInputAction.search, - onChanged: (s) => _debouncer(() => queryNotifier.value = s.trim()), - enabled: widget.editable, - ), - ), - ConstrainedBox( - constraints: const BoxConstraints(minWidth: 16), - child: ValueListenableBuilder( - valueListenable: _controller, - builder: (context, value, child) => AnimatedSwitcher( - duration: Durations.appBarActionChangeAnimation, - transitionBuilder: (child, animation) => FadeTransition( - opacity: animation, - child: SizeTransition( - axis: Axis.horizontal, - sizeFactor: animation, - child: child, + return DefaultTextStyle( + style: Theme.of(context).textTheme.bodyText2!, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: TextField( + controller: _controller, + focusNode: widget.focusNode ?? FocusNode(), + decoration: InputDecoration( + icon: Padding( + padding: const EdgeInsetsDirectional.only(start: 16), + child: Icon(widget.icon ?? AIcons.filter), ), + hintText: widget.hintText ?? MaterialLocalizations.of(context).searchFieldLabel, + hintStyle: Theme.of(context).inputDecorationTheme.hintStyle, ), - child: value.text.isNotEmpty ? clearButton : const SizedBox(), + textInputAction: TextInputAction.search, + onChanged: (s) => _debouncer(() => queryNotifier.value = s.trim()), + enabled: widget.editable, ), ), - ) - ], + ConstrainedBox( + constraints: const BoxConstraints(minWidth: 16), + child: ValueListenableBuilder( + valueListenable: _controller, + builder: (context, value, child) => AnimatedSwitcher( + duration: Durations.appBarActionChangeAnimation, + transitionBuilder: (child, animation) => FadeTransition( + opacity: animation, + child: SizeTransition( + axis: Axis.horizontal, + sizeFactor: animation, + child: child, + ), + ), + child: value.text.isNotEmpty ? clearButton : const SizedBox(), + ), + ), + ), + ], + ), ); } } diff --git a/lib/widgets/common/grid/header.dart b/lib/widgets/common/grid/header.dart index 2c43205d5..d5a4bbf2f 100644 --- a/lib/widgets/common/grid/header.dart +++ b/lib/widgets/common/grid/header.dart @@ -24,7 +24,7 @@ class SectionHeader extends StatelessWidget { this.selectable = true, }); - static const leadingDimension = 32.0; + static const leadingSize = Size(48, 32); static const padding = EdgeInsets.all(16); static const widgetSpanAlignment = PlaceholderAlignment.middle; @@ -33,7 +33,7 @@ class SectionHeader extends StatelessWidget { return Container( alignment: AlignmentDirectional.centerStart, padding: padding, - constraints: const BoxConstraints(minHeight: leadingDimension), + constraints: BoxConstraints(minHeight: leadingSize.height), child: GestureDetector( onTap: selectable ? () => _toggleSectionSelection(context) : null, child: Text.rich( @@ -47,8 +47,8 @@ class SectionHeader extends StatelessWidget { browsingBuilder: leading != null ? (context) => Container( padding: const EdgeInsetsDirectional.only(end: 8, bottom: 4), - width: leadingDimension, - height: leadingDimension, + width: leadingSize.width, + height: leadingSize.height, child: leading, ) : null, @@ -136,8 +136,6 @@ class _SectionSelectableLeading extends StatelessWidget { required this.onPressed, }); - static const leadingDimension = SectionHeader.leadingDimension; - @override Widget build(BuildContext context) { if (!selectable) return _buildBrowsing(context); @@ -174,7 +172,7 @@ class _SectionSelectableLeading extends StatelessWidget { ); } - Widget _buildBrowsing(BuildContext context) => browsingBuilder?.call(context) ?? const SizedBox(height: leadingDimension); + Widget _buildBrowsing(BuildContext context) => browsingBuilder?.call(context) ?? SizedBox(height: SectionHeader.leadingSize.height); } class _SectionSelectingLeading extends StatelessWidget { @@ -207,15 +205,14 @@ class _SectionSelectingLeading extends StatelessWidget { ), child: IconButton( iconSize: 26, - padding: const EdgeInsets.only(top: 1), - alignment: AlignmentDirectional.topStart, - icon: Icon(isSelected ? AIcons.selected : AIcons.unselected), + padding: const EdgeInsetsDirectional.only(end: 6, bottom: 4), onPressed: onPressed, tooltip: isSelected ? context.l10n.collectionDeselectSectionTooltip : context.l10n.collectionSelectSectionTooltip, - constraints: const BoxConstraints( - minHeight: SectionHeader.leadingDimension, - minWidth: SectionHeader.leadingDimension, + constraints: BoxConstraints( + minHeight: SectionHeader.leadingSize.height, + minWidth: SectionHeader.leadingSize.width, ), + icon: Icon(isSelected ? AIcons.selected : AIcons.unselected), ), ), ); diff --git a/lib/widgets/common/identity/aves_app_bar.dart b/lib/widgets/common/identity/aves_app_bar.dart new file mode 100644 index 000000000..9460a1dee --- /dev/null +++ b/lib/widgets/common/identity/aves_app_bar.dart @@ -0,0 +1,138 @@ +import 'dart:ui'; + +import 'package:aves/model/settings/settings.dart'; +import 'package:aves/theme/durations.dart'; +import 'package:aves/widgets/common/fx/blurred.dart'; +import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; + +class AvesAppBar extends StatelessWidget { + final double contentHeight; + final Widget leading; + final Widget title; + final List actions; + final Widget? bottom; + final Object? transitionKey; + + const AvesAppBar({ + super.key, + required this.contentHeight, + required this.leading, + required this.title, + required this.actions, + this.bottom, + this.transitionKey, + }); + + @override + Widget build(BuildContext context) { + return SliverPersistentHeader( + floating: true, + pinned: false, + delegate: _SliverAppBarDelegate( + height: appBarHeightForContentHeight(contentHeight), + child: SafeArea( + bottom: false, + child: AvesFloatingBar( + builder: (context, backgroundColor) => Material( + color: backgroundColor, + textStyle: Theme.of(context).appBarTheme.titleTextStyle, + child: Column( + children: [ + SizedBox( + height: kToolbarHeight, + child: Row( + children: [ + Padding( + padding: const EdgeInsets.symmetric(horizontal: 4), + child: leading, + ), + Expanded( + child: AnimatedSwitcher( + duration: context.read().iconAnimation, + child: Row( + key: ValueKey(transitionKey), + children: [ + Expanded(child: title), + ...actions, + ], + ), + ), + ), + ], + ), + ), + if (bottom != null) bottom!, + ], + ), + ), + ), + ), + ), + ); + } + + static double appBarHeightForContentHeight(double contentHeight) { + final topPadding = window.padding.top / window.devicePixelRatio; + return topPadding + AvesFloatingBar.margin.vertical + contentHeight; + } +} + +class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate { + final double height; + final Widget child; + + const _SliverAppBarDelegate({ + required this.height, + required this.child, + }); + + @override + double get minExtent => height; + + @override + double get maxExtent => height; + + @override + Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) => child; + + @override + bool shouldRebuild(covariant _SliverAppBarDelegate oldDelegate) => true; +} + +class AvesFloatingBar extends StatelessWidget { + final Widget Function(BuildContext context, Color backgroundColor) builder; + + const AvesFloatingBar({ + super.key, + required this.builder, + }); + + static const margin = EdgeInsets.all(8); + static const borderRadius = BorderRadius.all(Radius.circular(8)); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + final backgroundColor = theme.appBarTheme.backgroundColor!; + final blurred = context.select((s) => s.enableOverlayBlurEffect); + + return Container( + foregroundDecoration: BoxDecoration( + border: Border.all( + color: theme.dividerColor, + ), + borderRadius: borderRadius, + ), + margin: margin, + child: BlurredRRect( + enabled: blurred, + borderRadius: borderRadius, + child: builder( + context, + blurred ? backgroundColor.withOpacity(.85) : backgroundColor, + ), + ), + ); + } +} diff --git a/lib/widgets/dialogs/item_pick_dialog.dart b/lib/widgets/dialogs/item_pick_dialog.dart index dfb5ab706..29627b8a3 100644 --- a/lib/widgets/dialogs/item_pick_dialog.dart +++ b/lib/widgets/dialogs/item_pick_dialog.dart @@ -47,6 +47,7 @@ class _ItemPickDialogState extends State { initialQuery: liveFilter?.query, child: GestureAreaProtectorStack( child: SafeArea( + top: false, bottom: false, child: ChangeNotifierProvider.value( value: collection, diff --git a/lib/widgets/filter_grids/album_pick.dart b/lib/widgets/filter_grids/album_pick.dart index 2943a5b05..b25e49617 100644 --- a/lib/widgets/filter_grids/album_pick.dart +++ b/lib/widgets/filter_grids/album_pick.dart @@ -13,10 +13,10 @@ import 'package:aves/widgets/common/app_bar_subtitle.dart'; import 'package:aves/widgets/common/basic/menu.dart'; import 'package:aves/widgets/common/basic/query_bar.dart'; import 'package:aves/widgets/common/extensions/build_context.dart'; +import 'package:aves/widgets/common/identity/aves_app_bar.dart'; import 'package:aves/widgets/common/identity/aves_filter_chip.dart'; import 'package:aves/widgets/common/identity/empty.dart'; import 'package:aves/widgets/common/providers/selection_provider.dart'; -import 'package:aves/widgets/common/sliver_app_bar_title.dart'; import 'package:aves/widgets/dialogs/filter_editors/create_album_dialog.dart'; import 'package:aves/widgets/filter_grids/albums_page.dart'; import 'package:aves/widgets/filter_grids/common/action_delegates/album_set.dart'; @@ -144,59 +144,61 @@ class _AlbumPickAppBar extends StatelessWidget { } } - return SliverAppBar( + return AvesAppBar( + contentHeight: preferredHeight, leading: const BackButton(), - title: SliverAppBarTitleWrapper( - child: SourceStateAwareAppBarTitle( - title: Text(title()), - source: source, - ), + title: SourceStateAwareAppBarTitle( + title: Text(title()), + source: source, ), + actions: _buildActions(context), bottom: _AlbumQueryBar( queryNotifier: queryNotifier, ), - actions: [ - if (moveType != null) - IconButton( - icon: const Icon(AIcons.add), - onPressed: () async { - final newAlbum = await showDialog( - context: context, - builder: (context) => const CreateAlbumDialog(), - ); - // wait for the dialog to hide as applying the change may block the UI - await Future.delayed(Durations.dialogTransitionAnimation * timeDilation); - if (newAlbum != null && newAlbum.isNotEmpty) { - Navigator.pop(context, AlbumFilter(newAlbum, source.getAlbumDisplayName(context, newAlbum))); - } - }, - tooltip: context.l10n.createAlbumTooltip, - ), - MenuIconTheme( - child: PopupMenuButton( - itemBuilder: (context) { - return [ - PopupMenuItem( - value: ChipSetAction.configureView, - child: MenuRow(text: context.l10n.menuActionConfigureView, icon: const Icon(AIcons.view)), - ), - ]; - }, - onSelected: (action) async { - // remove focus, if any, to prevent the keyboard from showing up - // after the user is done with the popup menu - FocusManager.instance.primaryFocus?.unfocus(); - - // wait for the popup menu to hide before proceeding with the action - await Future.delayed(Durations.popupMenuAnimation * timeDilation); - actionDelegate.onActionSelected(context, {}, action); - }, - ), - ), - ], - floating: true, ); } + + List _buildActions(BuildContext context) { + return [ + if (moveType != null) + IconButton( + icon: const Icon(AIcons.add), + onPressed: () async { + final newAlbum = await showDialog( + context: context, + builder: (context) => const CreateAlbumDialog(), + ); + // wait for the dialog to hide as applying the change may block the UI + await Future.delayed(Durations.dialogTransitionAnimation * timeDilation); + if (newAlbum != null && newAlbum.isNotEmpty) { + Navigator.pop(context, AlbumFilter(newAlbum, source.getAlbumDisplayName(context, newAlbum))); + } + }, + tooltip: context.l10n.createAlbumTooltip, + ), + MenuIconTheme( + child: PopupMenuButton( + itemBuilder: (context) { + return [ + PopupMenuItem( + value: ChipSetAction.configureView, + child: MenuRow(text: context.l10n.menuActionConfigureView, icon: const Icon(AIcons.view)), + ), + ]; + }, + onSelected: (action) async { + // remove focus, if any, to prevent the keyboard from showing up + // after the user is done with the popup menu + FocusManager.instance.primaryFocus?.unfocus(); + + // wait for the popup menu to hide before proceeding with the action + await Future.delayed(Durations.popupMenuAnimation * timeDilation); + actionDelegate.onActionSelected(context, {}, action); + }, + ), + ), + ]; + } } class _AlbumQueryBar extends StatelessWidget implements PreferredSizeWidget { diff --git a/lib/widgets/filter_grids/common/app_bar.dart b/lib/widgets/filter_grids/common/app_bar.dart index 104f54d1f..549770ea5 100644 --- a/lib/widgets/filter_grids/common/app_bar.dart +++ b/lib/widgets/filter_grids/common/app_bar.dart @@ -8,7 +8,7 @@ import 'package:aves/widgets/common/app_bar_subtitle.dart'; import 'package:aves/widgets/common/app_bar_title.dart'; import 'package:aves/widgets/common/basic/menu.dart'; import 'package:aves/widgets/common/extensions/build_context.dart'; -import 'package:aves/widgets/common/sliver_app_bar_title.dart'; +import 'package:aves/widgets/common/identity/aves_app_bar.dart'; import 'package:aves/widgets/filter_grids/common/action_delegates/chip_set.dart'; import 'package:aves/widgets/search/search_delegate.dart'; import 'package:flutter/material.dart'; @@ -73,18 +73,23 @@ class _FilterGridAppBarState extends State>>(); final isSelecting = selection.isSelecting; _isSelectingNotifier.value = isSelecting; - return SliverAppBar( - leading: appMode.hasDrawer ? _buildAppBarLeading(isSelecting) : null, - title: SliverAppBarTitleWrapper( - child: _buildAppBarTitle(isSelecting), + return AvesAppBar( + contentHeight: kToolbarHeight, + leading: _buildAppBarLeading( + hasDrawer: appMode.hasDrawer, + isSelecting: isSelecting, ), + title: _buildAppBarTitle(isSelecting), actions: _buildActions(appMode, selection), - titleSpacing: 0, - floating: true, + transitionKey: isSelecting, ); } - Widget _buildAppBarLeading(bool isSelecting) { + Widget _buildAppBarLeading({required bool hasDrawer, required bool isSelecting}) { + if (!hasDrawer) { + return const CloseButton(); + } + VoidCallback? onPressed; String? tooltip; if (isSelecting) { diff --git a/lib/widgets/filter_grids/common/section_header.dart b/lib/widgets/filter_grids/common/section_header.dart index 2ec5d7107..7a9960510 100644 --- a/lib/widgets/filter_grids/common/section_header.dart +++ b/lib/widgets/filter_grids/common/section_header.dart @@ -21,6 +21,6 @@ class FilterChipSectionHeader extends StatelessWidget { static double getPreferredHeight(BuildContext context) { final textScaleFactor = MediaQuery.textScaleFactorOf(context); - return SectionHeader.leadingDimension * textScaleFactor + SectionHeader.padding.vertical; + return SectionHeader.leadingSize.height * textScaleFactor + SectionHeader.padding.vertical; } } diff --git a/lib/widgets/navigation/nav_bar/nav_bar.dart b/lib/widgets/navigation/nav_bar/nav_bar.dart index ea44104a0..ac638cbd9 100644 --- a/lib/widgets/navigation/nav_bar/nav_bar.dart +++ b/lib/widgets/navigation/nav_bar/nav_bar.dart @@ -7,7 +7,7 @@ import 'package:aves/widgets/collection/collection_page.dart'; import 'package:aves/widgets/common/basic/draggable_scrollbar.dart'; import 'package:aves/widgets/common/extensions/build_context.dart'; import 'package:aves/widgets/common/extensions/media_query.dart'; -import 'package:aves/widgets/common/fx/blurred.dart'; +import 'package:aves/widgets/common/identity/aves_app_bar.dart'; import 'package:aves/widgets/filter_grids/albums_page.dart'; import 'package:aves/widgets/navigation/nav_bar/floating.dart'; import 'package:aves/widgets/navigation/nav_bar/nav_item.dart'; @@ -27,17 +27,11 @@ class AppBottomNavBar extends StatelessWidget { this.currentCollection, }); - static const padding = EdgeInsets.all(8); - - static double get height => kBottomNavigationBarHeight + padding.vertical; + static double get height => kBottomNavigationBarHeight + AvesFloatingBar.margin.vertical; @override Widget build(BuildContext context) { - const borderRadius = BorderRadius.all(Radius.circular(8)); - - final blurred = context.select((s) => s.enableOverlayBlurEffect); final showVideo = context.select((s) => !s.hiddenFilters.contains(MimeFilter.video)); - final backgroundColor = Theme.of(context).canvasColor; final items = [ const AvesBottomNavItem(route: CollectionPage.routeName), @@ -46,25 +40,20 @@ class AppBottomNavBar extends StatelessWidget { const AvesBottomNavItem(route: AlbumListPage.routeName), ]; - Widget child = Padding( - padding: padding, - child: BlurredRRect( - enabled: blurred, - borderRadius: borderRadius, - child: BottomNavigationBar( - items: items - .map((item) => BottomNavigationBarItem( - icon: item.icon(context), - label: item.label(context), - )) - .toList(), - onTap: (index) => _goTo(context, items, index), - currentIndex: _getCurrentIndex(context, items), - type: BottomNavigationBarType.fixed, - backgroundColor: blurred ? backgroundColor.withOpacity(.85) : backgroundColor, - showSelectedLabels: false, - showUnselectedLabels: false, - ), + Widget child = AvesFloatingBar( + builder: (context, backgroundColor) => BottomNavigationBar( + items: items + .map((item) => BottomNavigationBarItem( + icon: item.icon(context), + label: item.label(context), + )) + .toList(), + onTap: (index) => _goTo(context, items, index), + currentIndex: _getCurrentIndex(context, items), + type: BottomNavigationBarType.fixed, + backgroundColor: backgroundColor, + showSelectedLabels: false, + showUnselectedLabels: false, ), );