diff --git a/lib/components/shared/colored_tab_bar.dart b/lib/components/shared/colored_tab_bar.dart deleted file mode 100644 index a2a8b597..00000000 --- a/lib/components/shared/colored_tab_bar.dart +++ /dev/null @@ -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; -} diff --git a/lib/components/shared/themed_button_tab_bar.dart b/lib/components/shared/themed_button_tab_bar.dart new file mode 100644 index 00000000..c968020b --- /dev/null +++ b/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 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); +} diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart index b785d38a..e2650eb0 100644 --- a/lib/pages/home/home.dart +++ b/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,37 +10,21 @@ class HomePage extends HookConsumerWidget { @override Widget build(BuildContext context, ref) { - return DefaultTabController( + return const DefaultTabController( length: 2, child: Scaffold( - appBar: const PageWindowTitleBar( - titleWidth: 347, + appBar: PageWindowTitleBar( centerTitle: true, - title: TabBar( - isScrollable: true, - tabs: [ - Tab(text: 'Genres'), - Tab(text: 'Personalized'), - ], + leadingWidth: double.infinity, + leading: ThemedButtonsTabBar( + tabs: ["Genres", "Personalized"], ), ), - body: AnimatedSwitcher( - duration: const Duration(milliseconds: 300), - transitionBuilder: (child, animation) => SlideTransition( - position: animation.drive( - Tween( - begin: const Offset(1, 0), - end: const Offset(0, 0), - ), - ), - child: child, - ), - child: const TabBarView( - children: [ - GenrePage(), - PersonalizedPage(), - ], - ), + body: TabBarView( + children: [ + GenrePage(), + PersonalizedPage(), + ], ), ), ); diff --git a/lib/pages/library/library.dart b/lib/pages/library/library.dart index 2d4dc7b3..04b0bf73 100644 --- a/lib/pages/library/library.dart +++ b/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( - isScrollable: true, + leading: ThemedButtonsTabBar( tabs: [ - Tab(text: 'Playlists'), - Tab(text: 'Tracks'), - Tab(text: 'Downloads'), - Tab(text: 'Artists'), - Tab(text: 'Albums'), + 'Playlists', + 'Tracks', + 'Downloads', + 'Artists', + 'Albums', ], ), + leadingWidth: double.infinity, ), body: TabBarView( children: [ diff --git a/lib/pages/lyrics/lyrics.dart b/lib/pages/lyrics/lyrics.dart index 58d93db4..e5aecd5b 100644 --- a/lib/pages/lyrics/lyrics.dart +++ b/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( - isScrollable: true, + const tabbar = ThemedButtonsTabBar( tabs: [ - Tab(text: "Synced"), - Tab(text: "Plain"), + "Synced", + "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( diff --git a/lib/themes/theme.dart b/lib/themes/theme.dart index b87e7ab0..d40e2018 100644 --- a/lib/themes/theme.dart +++ b/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), diff --git a/pubspec.lock b/pubspec.lock index 0ca8371f..7391050f 100644 --- a/pubspec.lock +++ b/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: diff --git a/pubspec.yaml b/pubspec.yaml index 8f9bbd9f..7e2730e8 100644 --- a/pubspec.yaml +++ b/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: