library screen refactor

lib/app/lists/albums_grid.dart

@@ -35,7 +35,9 @@ class AlbumsGrid extends HookConsumerWidget {
     return PagingListener(
       controller: controller,
       builder: (context, state, fetchNextPage) {
-        return PagedSliverGrid(
+        return SliverPadding(
+          padding: const EdgeInsets.all(8.0),
+          sliver: PagedSliverGrid(
             state: state,
             fetchNextPage: fetchNextPage,
             gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
@@ -49,6 +51,7 @@ class AlbumsGrid extends HookConsumerWidget {
                 },
               ),
             ),
+          ),
         );
       },
     );

lib/app/screens/library_screen.dart

@@ -1,92 +1,112 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:material_symbols_icons/symbols.dart';
 
+import '../lists/albums_grid.dart';
 import '../lists/artists_list.dart';
 import '../state/services.dart';
 import '../util/custom_scroll_fix.dart';
 
-class LibraryScreen extends StatefulWidget {
+const kIconSize = 26.0;
+const kTabHeight = 36.0;
+
+enum LibraryTab {
+  home(Icon(Symbols.home_rounded)),
+  albums(Icon(Symbols.album_rounded)),
+  artists(Icon(Symbols.person_rounded)),
+  songs(Icon(Symbols.music_note_rounded)),
+  playlists(Icon(Symbols.playlist_play_rounded));
+
+  const LibraryTab(this.icon);
+
+  final Widget icon;
+
+  @override
+  toString() => name;
+}
+
+class LibraryScreen extends HookConsumerWidget {
   const LibraryScreen({super.key});
 
   @override
-  State<LibraryScreen> createState() => _LibraryScreenState();
+  Widget build(BuildContext context, WidgetRef ref) {
-}
+    final tabController = useTabController(
-
+      initialLength: LibraryTab.values.length,
-class _LibraryScreenState extends State<LibraryScreen>
-    with SingleTickerProviderStateMixin {
-  late final TabController tabController;
-
-  final iconSize = 26.0;
-  final tabHeight = 36.0;
-
-  late final List<(String, Widget)> tabs = [
-    ('Home', Icon(Symbols.home_rounded, size: iconSize)),
-    ('Albums', Icon(Symbols.album_rounded, size: iconSize)),
-    ('Artists', Icon(Symbols.person_rounded, size: iconSize)),
-    ('Songs', Icon(Symbols.music_note_rounded, size: iconSize)),
-    ('Playlists', Icon(Symbols.playlist_play_rounded, size: iconSize)),
-  ];
-
-  @override
-  void initState() {
-    super.initState();
-    tabController = TabController(
-      length: tabs.length,
       initialIndex: 1,
-      vsync: this,
     );
-  }
 
-  @override
+    return Scaffold(
-  void dispose() {
-    tabController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return IconTheme(
-      data: IconThemeData(
-        fill: 1,
-        color: TextTheme.of(context).headlineLarge?.color,
-        weight: 600,
-        opticalSize: iconSize,
-      ),
-      child: Scaffold(
       body: NestedScrollView(
         floatHeaderSlivers: true,
-          headerSliverBuilder: (context, innerBoxIsScrolled) {
+        headerSliverBuilder: (context, innerBoxIsScrolled) => <Widget>[
-            return <Widget>[
           SliverOverlapAbsorber(
-                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
+            handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
-                  context,
+            sliver: LibraryTabsHeader(tabController: tabController),
           ),
-                sliver: SliverAppBar(
+        ],
+        body: Builder(
+          builder: (context) => CustomScrollProvider(
+            tabController: tabController,
+            parent: PrimaryScrollController.of(context),
+            child: TabBarView(
+              controller: tabController,
+              children: LibraryTab.values
+                  .map(
+                    (tab) => TabScrollView(
+                      index: LibraryTab.values.indexOf(tab),
+                      sliver: switch (tab) {
+                        LibraryTab.albums => AlbumsGrid(),
+                        _ => ArtistsList(),
+                      },
+                    ),
+                  )
+                  .toList(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class LibraryTabsHeader extends HookConsumerWidget {
+  const LibraryTabsHeader({
+    super.key,
+    required this.tabController,
+  });
+
+  final TabController tabController;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
+    return SliverAppBar(
+      pinned: true,
+      floating: true,
       flexibleSpace: FlexibleSpaceBar(
         collapseMode: CollapseMode.pin,
         background: SafeArea(
           child: Padding(
-                        padding: EdgeInsets.symmetric(
+            padding: EdgeInsets.symmetric(horizontal: 18, vertical: 16),
-                          horizontal: 18,
+            child: TabTitleText(tabController: tabController),
-                          vertical: 16,
-                        ),
-                        child: Text(
-                          'Albums',
-                          style: TextTheme.of(context).headlineLarge?.copyWith(
-                            fontWeight: FontWeight.w800,
           ),
         ),
       ),
-                    ),
-                  ),
-                  pinned: true,
-                  floating: true,
       bottom: PreferredSize(
-                    preferredSize: Size.fromHeight(tabHeight + 18),
+        preferredSize: Size.fromHeight(kTabHeight + 18),
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10),
+          child: IconTheme(
+            data: IconThemeData(
+              fill: 1,
+              color: theme.textTheme.headlineLarge?.color,
+              weight: 600,
+              opticalSize: kIconSize,
+              size: kIconSize,
+            ),
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
@@ -96,78 +116,32 @@ class _LibraryScreenState extends State<LibraryScreen>
                   isScrollable: true,
                   tabAlignment: TabAlignment.start,
                   indicatorSize: TabBarIndicatorSize.label,
-                            labelPadding: EdgeInsets.symmetric(
+                  labelPadding: EdgeInsets.symmetric(horizontal: 2),
-                              horizontal: 2,
+                  labelColor: theme.primaryColorDark,
-                            ),
+                  unselectedLabelColor: theme.textTheme.headlineLarge?.color,
-                            labelColor: Theme.of(context).primaryColorDark,
+                  padding: EdgeInsets.symmetric(vertical: 8),
-                            unselectedLabelColor: Theme.of(
-                              context,
-                            ).textTheme.headlineLarge?.color,
-                            padding: EdgeInsets.symmetric(
-                              // horizontal: 12,
-                              vertical: 8,
-                            ),
                   splashBorderRadius: BorderRadius.circular(8),
                   indicator: BoxDecoration(
-                              color: Theme.of(
+                    color: theme.primaryTextTheme.headlineLarge?.color,
-                                context,
-                              ).primaryTextTheme.headlineLarge?.color,
                     borderRadius: BorderRadius.circular(8),
                   ),
-                            tabs: tabs
+                  tabs: LibraryTab.values
                       .map(
                         (tab) => Tab(
-                                    height: tabHeight,
+                          height: kTabHeight,
                           child: Padding(
-                                      padding: const EdgeInsets.symmetric(
+                            padding: const EdgeInsets.symmetric(horizontal: 6),
-                                        horizontal: 6,
+                            child: tab.icon,
-                                      ),
-                                      child: tab.$2,
                           ),
                         ),
                       )
                       .toList(),
                 ),
-                          Row(
+                Spacer(),
-                            children: [
                 SyncButton(),
-                              IconButton(
+                SettingsButton(),
-                                onPressed: () {
-                                  context.push('/settings');
-                                },
-                                icon: Icon(
-                                  Symbols.settings_rounded,
-                                ),
-                              ),
               ],
             ),
-                        ],
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ];
-          },
-          body: Builder(
-            builder: (context) {
-              return CustomScrollProvider(
-                tabController: tabController,
-                parent: PrimaryScrollController.of(context),
-                child: TabBarView(
-                  // These are the contents of the tab views, below the tabs.
-                  controller: tabController,
-                  children: tabs.map((tab) {
-                    final index = tabs.indexOf(tab);
-                    return SafeArea(
-                      top: false,
-                      bottom: false,
-                      child: NewWidget(index: index, tab: tab),
-                    );
-                  }).toList(),
-                ),
-              );
-            },
           ),
         ),
       ),
@@ -175,43 +149,57 @@ class _LibraryScreenState extends State<LibraryScreen>
   }
 }
 
-class NewWidget extends StatefulWidget {
+class TabTitleText extends HookConsumerWidget {
-  const NewWidget({
+  const TabTitleText({
+    super.key,
+    required this.tabController,
+  });
+
+  final TabController tabController;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+    final tabText = useState(LibraryTab.home.toString());
+
+    useListenable(tabController);
+    useEffect(() {
+      tabText.value = LibraryTab.values[tabController.index].toString();
+      return;
+    }, [tabController.index]);
+
+    return Text(
+      tabText.value,
+      style: theme.textTheme.headlineLarge?.copyWith(
+        fontWeight: FontWeight.w800,
+      ),
+    );
+  }
+}
+
+class TabScrollView extends HookConsumerWidget {
+  const TabScrollView({
     super.key,
     required this.index,
-    required this.tab,
+    required this.sliver,
   });
 
   final int index;
-  final (String, Widget) tab;
+  final Widget sliver;
 
   @override
-  State<NewWidget> createState() => _NewWidgetState();
+  Widget build(BuildContext context, WidgetRef ref) {
-}
+    useAutomaticKeepAlive();
-
-class _NewWidgetState extends State<NewWidget>
-    with AutomaticKeepAliveClientMixin {
-  @override
-  bool get wantKeepAlive => true;
-
-  @override
-  Widget build(BuildContext context) {
-    super.build(context);
 
     final scrollProvider = CustomScrollProviderData.of(context);
 
     return CustomScrollView(
-      controller: scrollProvider.scrollControllers[widget.index],
+      controller: scrollProvider.scrollControllers[index],
       slivers: <Widget>[
         SliverOverlapInjector(
-          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
+          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
-            context,
-          ),
-        ),
-        SliverPadding(
-          padding: const EdgeInsets.all(8.0),
-          sliver: ArtistsList(),
         ),
+        sliver,
       ],
     );
   }
@@ -232,3 +220,17 @@ class SyncButton extends HookConsumerWidget {
     );
   }
 }
+
+class SettingsButton extends HookConsumerWidget {
+  const SettingsButton({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return IconButton(
+      icon: Icon(Symbols.settings_rounded),
+      onPressed: () {
+        context.push('/settings');
+      },
+    );
+  }
+}