refactor: use shadcn NavigationBar for mobile navigation bar

This commit is contained in:
Kingkor Roy Tirtho 2024-12-21 09:28:55 +06:00
parent 5ad151932a
commit e73d2d06d8

View File

@ -1,10 +1,8 @@
import 'dart:ui';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/material.dart' show Badge;
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/side_bar_tiles.dart';
import 'package:spotube/extensions/constrains.dart';
@ -25,7 +23,6 @@ class SpotubeNavigationBar extends HookConsumerWidget {
@override
Widget build(BuildContext context, ref) {
final theme = Theme.of(context);
final routerState = GoRouterState.of(context);
final downloadCount = ref.watch(downloadManagerProvider).$downloadCount;
@ -33,11 +30,6 @@ class SpotubeNavigationBar extends HookConsumerWidget {
final layoutMode =
ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
final buttonColor = useBrightnessValue(
theme.colorScheme.inversePrimary,
theme.colorScheme.primary.withOpacity(0.2),
);
final navbarTileList = useMemoized(
() => getNavbarTileList(context.l10n),
[context.l10n],
@ -61,42 +53,21 @@ class SpotubeNavigationBar extends HookConsumerWidget {
return AnimatedContainer(
duration: const Duration(milliseconds: 100),
height: panelHeight,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
child: CurvedNavigationBar(
backgroundColor:
theme.colorScheme.secondaryContainer.withOpacity(0.72),
buttonBackgroundColor: buttonColor,
color: theme.colorScheme.surface,
height: panelHeight,
animationDuration: const Duration(milliseconds: 350),
items: navbarTileList.map(
(e) {
/// Using this [Builder] as an workaround for the first item's
/// icon color not updating unless navigating to another page
return Builder(builder: (context) {
return MouseRegion(
cursor: SystemMouseCursors.click,
child: Badge(
isLabelVisible: e.id == "library" && downloadCount > 0,
label: Text(downloadCount.toString()),
child: Icon(
e.icon,
color: Theme.of(context).colorScheme.primary,
),
),
);
});
},
).toList(),
index: selectedIndex,
onTap: (i) {
ServiceUtils.navigateNamed(context, navbarTileList[i].name);
},
),
),
child: NavigationBar(
index: selectedIndex,
onSelected: (i) {
ServiceUtils.navigateNamed(context, navbarTileList[i].name);
},
children: [
for (final tile in navbarTileList)
NavigationButton(
child: Badge(
isLabelVisible: tile.id == "library" && downloadCount > 0,
label: Text(downloadCount.toString()),
child: Icon(tile.icon),
),
)
],
),
);
}