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,19 +44,22 @@ class HomeCollectionsNavBarButton extends StatelessWidget {
),
);
} else {
return ActionChip(
avatar: icon,
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label),
if (isShowIndicator) ...const [
SizedBox(width: 4),
_NavBarButtonIndicator(),
return Theme(
data: Theme.of(context).copyWith(canvasColor: Colors.transparent),
child: ActionChip(
avatar: icon,
label: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(label),
if (isShowIndicator) ...const [
SizedBox(width: 4),
_NavBarButtonIndicator(),
],
],
],
),
onPressed: isEnabled ? onPressed : null,
),
onPressed: isEnabled ? onPressed : null,
);
}
}

View file

@ -37,88 +37,62 @@ class _NavigationBarState extends State<_NavigationBar> {
@override
Widget build(BuildContext context) {
return SliverToBoxAdapter(
child: SizedBox(
height: 48,
child: Row(
children: [
Expanded(
child: Stack(
children: [
_BlocSelector(
selector: (state) => state.navBarButtons,
builder: (context, navBarButtons) {
final buttons = navBarButtons
.map((e) => _buildButton(context, e))
.nonNulls
.toList();
return ListView.separated(
controller: _scrollController,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(left: 16),
itemCount: buttons.length,
itemBuilder: (context, i) => Center(
child: buttons[i],
),
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),
],
),
),
),
),
return SizedBox(
height: 48,
child: Row(
children: [
Expanded(
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
.map((e) => _buildButton(context, e))
.nonNulls
.toList();
return ListView.separated(
controller: _scrollController,
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.only(left: 16),
itemCount: buttons.length,
itemBuilder: (context, i) => Center(
child: buttons[i],
),
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,
],
),
),
),
),
),
],
separatorBuilder: (context, _) => const SizedBox(width: 12),
);
},
),
),
const SizedBox(width: 8),
const _NavBarNewButton(),
const SizedBox(width: 16),
],
),
),
const SizedBox(width: 8),
const _NavBarNewButton(),
const SizedBox(width: 16),
],
),
);
}