feat: compact button tabbar

lib/components/shared/colored_tab_bar.dart

@@ -1,16 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ColoredTabBar extends ColoredBox implements PreferredSizeWidget {
-  @override
-  // ignore: overridden_fields
-  final TabBar child;
-
-  const ColoredTabBar({
-    required super.color,
-    required this.child,
-    super.key,
-  }) : super(child: child);
-
-  @override
-  Size get preferredSize => child.preferredSize;
-}

lib/components/shared/themed_button_tab_bar.dart

@@ -0,0 +1,40 @@
+import 'package:buttons_tabbar/buttons_tabbar.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+
+class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
+  final List<String> tabs;
+  const ThemedButtonsTabBar({Key? key, required this.tabs}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8),
+      child: ButtonsTabBar(
+        radius: 100,
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surfaceVariant,
+          borderRadius: BorderRadius.circular(15),
+        ),
+        labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
+              color: Theme.of(context).colorScheme.primary,
+              fontWeight: FontWeight.bold,
+            ),
+        borderWidth: 0,
+        unselectedDecoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.background,
+          borderRadius: BorderRadius.circular(15),
+        ),
+        unselectedLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
+              color: Theme.of(context).colorScheme.primary,
+            ),
+        tabs: tabs.map((tab) {
+          return Tab(text: "   $tab   ");
+        }).toList(),
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(50);
+}

lib/pages/home/home.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-
 import 'package:spotube/components/shared/page_window_title_bar.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
 import 'package:spotube/pages/home/genres.dart';
 import 'package:spotube/pages/home/personalized.dart';
 
@@ -10,39 +10,23 @@ class HomePage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    return DefaultTabController(
+    return const DefaultTabController(
       length: 2,
       child: Scaffold(
-        appBar: const PageWindowTitleBar(
+        appBar: PageWindowTitleBar(
-          titleWidth: 347,
           centerTitle: true,
-          title: TabBar(
+          leadingWidth: double.infinity,
-            isScrollable: true,
+          leading: ThemedButtonsTabBar(
-            tabs: [
+            tabs: ["Genres", "Personalized"],
-              Tab(text: 'Genres'),
-              Tab(text: 'Personalized'),
-            ],
           ),
         ),
-        body: AnimatedSwitcher(
+        body: TabBarView(
-          duration: const Duration(milliseconds: 300),
-          transitionBuilder: (child, animation) => SlideTransition(
-            position: animation.drive(
-              Tween<Offset>(
-                begin: const Offset(1, 0),
-                end: const Offset(0, 0),
-              ),
-            ),
-            child: child,
-          ),
-          child: const TabBarView(
           children: [
             GenrePage(),
             PersonalizedPage(),
           ],
         ),
       ),
-      ),
     );
   }
 }

lib/pages/library/library.dart

@@ -7,6 +7,7 @@ import 'package:spotube/components/library/user_albums.dart';
 import 'package:spotube/components/library/user_artists.dart';
 import 'package:spotube/components/library/user_downloads.dart';
 import 'package:spotube/components/library/user_playlists.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
 
 class LibraryPage extends HookConsumerWidget {
   const LibraryPage({Key? key}) : super(key: key);
@@ -17,18 +18,17 @@ class LibraryPage extends HookConsumerWidget {
         length: 5,
         child: Scaffold(
           appBar: PageWindowTitleBar(
-            titleWidth: 347,
             centerTitle: true,
-            title: TabBar(
+            leading: ThemedButtonsTabBar(
-              isScrollable: true,
               tabs: [
-                Tab(text: 'Playlists'),
+                'Playlists',
-                Tab(text: 'Tracks'),
+                'Tracks',
-                Tab(text: 'Downloads'),
+                'Downloads',
-                Tab(text: 'Artists'),
+                'Artists',
-                Tab(text: 'Albums'),
+                'Albums',
               ],
             ),
+            leadingWidth: double.infinity,
           ),
           body: TabBarView(
             children: [

lib/pages/lyrics/lyrics.dart

@@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/components/shared/themed_button_tab_bar.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
 import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/pages/lyrics/plain_lyrics.dart';
@@ -38,11 +39,10 @@ class LyricsPage extends HookConsumerWidget {
       noSetBGColor: true,
     );
 
-    const tabbar = TabBar(
+    const tabbar = ThemedButtonsTabBar(
-      isScrollable: true,
       tabs: [
-        Tab(text: "Synced"),
+        "Synced",
-        Tab(text: "Plain"),
+        "Plain",
       ],
     );
 
@@ -73,10 +73,10 @@ class LyricsPage extends HookConsumerWidget {
                     ),
                   ),
                   AppBar(
-                    title: tabbar,
+                    leadingWidth: double.infinity,
+                    leading: tabbar,
                     backgroundColor: Colors.transparent,
                     automaticallyImplyLeading: false,
-                    toolbarOpacity: 1,
                     actions: [
                       IconButton(
                         icon: const Icon(SpotubeIcons.minimize),
@@ -106,11 +106,10 @@ class LyricsPage extends HookConsumerWidget {
         extendBodyBehindAppBar: true,
         appBar: !kIsMacOS
             ? const PageWindowTitleBar(
-                toolbarOpacity: 0,
                 backgroundColor: Colors.transparent,
                 title: tabbar,
               )
-            : tabbar as PreferredSizeWidget?,
+            : tabbar,
         body: Container(
           clipBehavior: Clip.hardEdge,
           decoration: BoxDecoration(

lib/themes/theme.dart

@@ -30,7 +30,7 @@ ThemeData theme(Color seed, Brightness brightness) {
       indicatorSize: TabBarIndicatorSize.tab,
       labelStyle: const TextStyle(fontWeight: FontWeight.w600),
       labelColor: scheme.primary,
-      overlayColor: MaterialStateProperty.all(Colors.transparent),
+      dividerColor: Colors.transparent,
       indicator: BoxDecoration(
         color: scheme.secondaryContainer,
         borderRadius: BorderRadius.circular(15),

pubspec.lock

@@ -289,6 +289,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "8.4.3"
+  buttons_tabbar:
+    dependency: "direct main"
+    description:
+      name: buttons_tabbar
+      sha256: d8a53cd3be0ce5b662d01378b1cd842eb44ee68da5abeeff3c081ee3bf614160
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.6"
   cached_network_image:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -18,6 +18,7 @@ dependencies:
   audioplayers: ^3.0.1
   auto_size_text: ^3.0.0
   badges: ^2.0.3
+  buttons_tabbar: ^1.3.6
   cached_network_image: ^3.2.2
   catcher:
     git: