feat: curved navigation bar

lib/components/root/spotube_navigation_bar.dart

@@ -1,3 +1,4 @@
+import 'package:curved_navigation_bar/curved_navigation_bar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -5,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/components/root/sidebar.dart';
 import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/provider/downloader_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
 
@@ -29,6 +31,11 @@ class SpotubeNavigationBar extends HookConsumerWidget {
 
     final insideSelectedIndex = useState<int>(selectedIndex);
 
+    final buttonColor = useBrightnessValue(
+      Theme.of(context).colorScheme.inversePrimary,
+      Theme.of(context).colorScheme.primary.withOpacity(0.2),
+    );
+
     useEffect(() {
       insideSelectedIndex.value = selectedIndex;
       return null;
@@ -37,12 +44,18 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     if (layoutMode == LayoutMode.extended ||
         (breakpoint.isMoreThan(Breakpoints.sm) &&
             layoutMode == LayoutMode.adaptive)) return const SizedBox();
-    return NavigationBar(
+
-      destinations: [
+    return CurvedNavigationBar(
+      backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
+      buttonBackgroundColor: buttonColor,
+      color: Theme.of(context).colorScheme.background,
+      height: 50,
+      items: [
         ...navbarTileList.map(
           (e) {
-            return NavigationDestination(
+            return MouseRegion(
-              icon: Badge(
+              cursor: SystemMouseCursors.click,
+              child: Badge(
                 backgroundColor: Theme.of(context).primaryColor,
                 isLabelVisible: e.title == "Library" && downloadCount > 0,
                 label: Text(
@@ -52,15 +65,17 @@ class SpotubeNavigationBar extends HookConsumerWidget {
                     fontSize: 10,
                   ),
                 ),
-                child: Icon(e.icon),
+                child: Icon(
+                  e.icon,
+                  color: Theme.of(context).colorScheme.primary,
+                ),
               ),
-              label: e.title,
             );
           },
         ),
       ],
-      selectedIndex: insideSelectedIndex.value,
+      index: insideSelectedIndex.value,
-      onDestinationSelected: (i) {
+      onTap: (i) {
         insideSelectedIndex.value = i;
         if (navbarTileList[i].title == "Settings") {
           Sidebar.goToSettings(context);

lib/hooks/use_brightness_value.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+T useBrightnessValue<T>(
+  T lightValue,
+  T darkValue,
+) {
+  final context = useContext();
+
+  return Theme.of(context).brightness == Brightness.light
+      ? lightValue
+      : darkValue;
+}

pubspec.lock

@@ -418,6 +418,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.5"
+  curved_navigation_bar:
+    dependency: "direct main"
+    description:
+      name: curved_navigation_bar
+      sha256: ea6412d00c5d83501bbf1cf9d1ac2ff11a20fbaf910c103c95ace7de82910334
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.3"
   dart_style:
     dependency: transitive
     description:

pubspec.yaml

@@ -24,6 +24,7 @@ dependencies:
       url: https://github.com/ThexXTURBOXx/catcher
   collection: ^1.15.0
   cupertino_icons: ^1.0.5
+  curved_navigation_bar: ^1.0.3
   dbus: ^0.7.8
   file_picker: ^5.2.2
   fl_query: ^1.0.0-alpha.0