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

View file

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

View file

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

View file

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

View file

@ -37,15 +37,38 @@ class _NavigationBarState extends State<_NavigationBar> {
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: SizedBox(
return SizedBox(
height: 48,
child: Row(
children: [
Expanded(
child: Stack(
children: [
_BlocSelector(
child: ShaderMask(
shaderCallback: (rect) {
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,
builder: (context, navBarButtons) {
final buttons = navBarButtons
@ -60,58 +83,10 @@ class _NavigationBarState extends State<_NavigationBar> {
itemBuilder: (context, i) => Center(
child: buttons[i],
),
separatorBuilder: (context, _) =>
const SizedBox(width: 12),
separatorBuilder: (context, _) => 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),
@ -119,7 +94,6 @@ class _NavigationBarState extends State<_NavigationBar> {
const SizedBox(width: 16),
],
),
),
);
}