Make nav bar part of app bar instead in collections page

This commit is contained in:
Ming Ming 2024-10-27 00:02:23 +08:00
parent 121f611c7f
commit 6f148e57d1
5 changed files with 74 additions and 91 deletions

View file

@ -20,6 +20,7 @@ class HomeSliverAppBar extends StatelessWidget {
this.menuActions, this.menuActions,
this.onSelectedMenuActions, this.onSelectedMenuActions,
this.isShowProgressIcon = false, this.isShowProgressIcon = false,
this.bottom,
}); });
@override @override
@ -39,6 +40,7 @@ class HomeSliverAppBar extends StatelessWidget {
blurFilter: Theme.of(context).appBarBlurFilter, blurFilter: Theme.of(context).appBarBlurFilter,
floating: true, floating: true,
automaticallyImplyLeading: false, automaticallyImplyLeading: false,
bottom: bottom,
actions: [ actions: [
...actions ?? [], ...actions ?? [],
if (menuActions?.isNotEmpty == true) if (menuActions?.isNotEmpty == true)
@ -70,6 +72,7 @@ class HomeSliverAppBar extends StatelessWidget {
/// Screen specific action buttons /// Screen specific action buttons
final List<Widget>? actions; final List<Widget>? actions;
final PreferredSizeWidget? bottom;
/// Screen specific actions under the overflow menu. The value of each item /// Screen specific actions under the overflow menu. The value of each item
/// much >= 0 /// much >= 0

View file

@ -142,7 +142,6 @@ class _WrappedHomeCollectionsState extends State<_WrappedHomeCollections>
? const _AppBar() ? const _AppBar()
: const _SelectionAppBar(), : const _SelectionAppBar(),
), ),
const _NavigationBar(),
const SliverToBoxAdapter( const SliverToBoxAdapter(
child: SizedBox(height: 8), child: SizedBox(height: 8),
), ),

View file

@ -31,6 +31,10 @@ class _AppBar extends StatelessWidget {
break; break;
} }
}, },
bottom: const PreferredSize(
preferredSize: Size.fromHeight(48),
child: _NavigationBar(),
),
), ),
); );
} }

View file

@ -44,7 +44,9 @@ class HomeCollectionsNavBarButton extends StatelessWidget {
), ),
); );
} else { } else {
return ActionChip( return Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: ActionChip(
avatar: icon, avatar: icon,
label: Row( label: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
@ -57,6 +59,7 @@ class HomeCollectionsNavBarButton extends StatelessWidget {
], ],
), ),
onPressed: isEnabled ? onPressed : null, onPressed: isEnabled ? onPressed : null,
),
); );
} }
} }

View file

@ -37,15 +37,38 @@ class _NavigationBarState extends State<_NavigationBar> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SliverToBoxAdapter( return SizedBox(
child: SizedBox(
height: 48, height: 48,
child: Row( child: Row(
children: [ children: [
Expanded( Expanded(
child: Stack( child: ShaderMask(
children: [ shaderCallback: (rect) {
_BlocSelector( final colors = <Color>[];
final stops = <double>[];
if (_hasLeftContent) {
colors.addAll([Colors.white, Colors.transparent]);
stops.addAll([0, .1]);
} else {
colors.add(Colors.transparent);
stops.add(0);
}
if (_hasRightContent) {
colors.addAll([Colors.transparent, Colors.white]);
stops.addAll([.9, 1]);
} else {
colors.add(Colors.transparent);
stops.add(1);
}
return LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: colors,
stops: stops,
).createShader(rect);
},
blendMode: BlendMode.dstOut,
child: _BlocSelector(
selector: (state) => state.navBarButtons, selector: (state) => state.navBarButtons,
builder: (context, navBarButtons) { builder: (context, navBarButtons) {
final buttons = navBarButtons final buttons = navBarButtons
@ -60,58 +83,10 @@ class _NavigationBarState extends State<_NavigationBar> {
itemBuilder: (context, i) => Center( itemBuilder: (context, i) => Center(
child: buttons[i], child: buttons[i],
), ),
separatorBuilder: (context, _) => separatorBuilder: (context, _) => const SizedBox(width: 12),
const SizedBox(width: 12),
); );
}, },
), ),
if (_hasLeftContent)
Positioned(
left: 0,
top: 0,
bottom: 0,
child: IgnorePointer(
ignoring: true,
child: Container(
width: 32,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Theme.of(context).colorScheme.background,
Theme.of(context)
.colorScheme
.background
.withOpacity(0),
],
),
),
),
),
),
if (_hasRightContent)
Positioned(
right: 0,
top: 0,
bottom: 0,
child: IgnorePointer(
ignoring: true,
child: Container(
width: 32,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Theme.of(context)
.colorScheme
.background
.withOpacity(0),
Theme.of(context).colorScheme.background,
],
),
),
),
),
),
],
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
@ -119,7 +94,6 @@ class _NavigationBarState extends State<_NavigationBar> {
const SizedBox(width: 16), const SizedBox(width: 16),
], ],
), ),
),
); );
} }