groove/Vaani
1
0
Fork 0
mirror of https://github.com/Dr-Blank/Vaani.git synced 2025-12-07 19:49:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: replace BottomNavigationBar with NavigationBar and adjust height calculation

Browse source
This commit is contained in:
Dr-Blank 2024-09-19 00:44:27 -04:00
parent 36c90c20bc
commit bee1d233bf
No known key found for this signature in database
GPG key ID: 7452CC63F210A266
1 changed files with 26 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

62
lib/router/scaffold_with_nav_bar.dart
View file

@ -12,6 +12,8 @@ import 'package:vaani/features/player/view/player_when_expanded.dart';
// if stack is empty, push home, if already contains home, pop it // if stack is empty, push home, if already contains home, pop it
final Set<int> navigationShellStack = {}; final Set<int> navigationShellStack = {};
const bottomBarHeight = 64;
/// Builds the "shell" for the app by building a Scaffold with a /// Builds the "shell" for the app by building a Scaffold with a
/// BottomNavigationBar, where [child] is placed in the body of the Scaffold. /// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
class ScaffoldWithNavBar extends HookConsumerWidget { class ScaffoldWithNavBar extends HookConsumerWidget {
@ -31,10 +33,10 @@ class ScaffoldWithNavBar extends HookConsumerWidget {
// useValueListenable(ref.watch(playerExpandProgressNotifierProvider)); // useValueListenable(ref.watch(playerExpandProgressNotifierProvider));
final playerProgress = ref.watch(playerHeightProvider); final playerProgress = ref.watch(playerHeightProvider);
final playerMaxHeight = MediaQuery.of(context).size.height; final playerMaxHeight = MediaQuery.of(context).size.height;
var percentExpanded = (playerProgress - playerMinHeight) / var percentExpandedMiniPlayer = (playerProgress - playerMinHeight) /
(playerMaxHeight - playerMinHeight); (playerMaxHeight - playerMinHeight);
// Clamp the value between 0 and 1 // Clamp the value between 0 and 1
percentExpanded = percentExpanded.clamp(0.0, 1.0); percentExpandedMiniPlayer = percentExpandedMiniPlayer.clamp(0.0, 1.0);
onBackButtonPressed() async { onBackButtonPressed() async {
final isPlayerExpanded = playerProgress != playerMinHeight; final isPlayerExpanded = playerProgress != playerMinHeight;
@ -97,41 +99,29 @@ class ScaffoldWithNavBar extends HookConsumerWidget {
), ),
bottomNavigationBar: Opacity( bottomNavigationBar: Opacity(
// Opacity is interpolated from 1 to 0 when player is expanded // Opacity is interpolated from 1 to 0 when player is expanded
opacity: 1 - percentExpanded, opacity: 1 - percentExpandedMiniPlayer,
child: SizedBox( child: NavigationBar(
// height is interpolated from 0 to 56 when player is expanded elevation: 0.0,
height: 56 * (1 - percentExpanded), height: bottomBarHeight * (1 - percentExpandedMiniPlayer),
child: BottomNavigationBar( // TODO: get destinations from the navigationShell
elevation: 0.0, // Here, the items of BottomNavigationBar are hard coded. In a real
landscapeLayout: BottomNavigationBarLandscapeLayout.centered, // world scenario, the items would most likely be generated from the
selectedFontSize: // branches of the shell route, which can be fetched using
Theme.of(context).textTheme.labelMedium!.fontSize!, // `navigationShell.route.branches`.
unselectedFontSize: destinations: _navigationItems
Theme.of(context).textTheme.labelMedium!.fontSize!, .map(
showUnselectedLabels: false, (item) => NavigationDestination(
fixedColor: Theme.of(context).colorScheme.onSurface, icon: Icon(item.icon),
enableFeedback: true, selectedIcon: item.activeIcon != null
type: BottomNavigationBarType.fixed, ? Icon(item.activeIcon)
: Icon(item.icon),
// Here, the items of BottomNavigationBar are hard coded. In a real label: item.name,
// world scenario, the items would most likely be generated from the ),
// branches of the shell route, which can be fetched using )
// `navigationShell.route.branches`. .toList(),
items: _navigationItems selectedIndex: navigationShell.currentIndex,
.map( onDestinationSelected: (int index) => _onTap(context, index, ref),
(item) => BottomNavigationBarItem(
icon: Icon(item.icon),
activeIcon: item.activeIcon != null
? Icon(item.activeIcon)
: Icon(item.icon),
label: item.name,
),
)
.toList(),
currentIndex: navigationShell.currentIndex,
onTap: (int index) => _onTap(context, index, ref),
),
), ),
), ),
), ),