reorg ui into app

lib/app/hooks/use_paging_controller.dart

@@ -0,0 +1,61 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
+
+PagingController<PageKeyType, ItemType>
+usePagingController<PageKeyType, ItemType>({
+  required PageKeyType? Function(PagingState<PageKeyType, ItemType>)
+  getNextPageKey,
+  required FutureOr<List<ItemType>> Function(PageKeyType) fetchPage,
+}) {
+  return use(
+    _PagingControllerHook<PageKeyType, ItemType>(
+      getNextPageKey: getNextPageKey,
+      fetchPage: fetchPage,
+    ),
+  );
+}
+
+class _PagingControllerHook<PageKeyType, ItemType>
+    extends Hook<PagingController<PageKeyType, ItemType>> {
+  const _PagingControllerHook({
+    super.keys,
+    required this.getNextPageKey,
+    required this.fetchPage,
+  });
+
+  final PageKeyType? Function(PagingState<PageKeyType, ItemType>)
+  getNextPageKey;
+  final FutureOr<List<ItemType>> Function(PageKeyType) fetchPage;
+
+  @override
+  HookState<
+    PagingController<PageKeyType, ItemType>,
+    Hook<PagingController<PageKeyType, ItemType>>
+  >
+  createState() => _PagingControllerHookState<PageKeyType, ItemType>();
+}
+
+class _PagingControllerHookState<PageKeyType, ItemType>
+    extends
+        HookState<
+          PagingController<PageKeyType, ItemType>,
+          _PagingControllerHook<PageKeyType, ItemType>
+        > {
+  late final controller = PagingController<PageKeyType, ItemType>(
+    getNextPageKey: hook.getNextPageKey,
+    fetchPage: hook.fetchPage,
+  );
+
+  @override
+  PagingController<PageKeyType, ItemType> build(BuildContext context) =>
+      controller;
+
+  @override
+  void dispose() => controller.dispose();
+
+  @override
+  String get debugLabel => 'usePagingController';
+}

lib/app/lists/albums_grid.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';
+
+import '../hooks/use_paging_controller.dart';
+import 'list_items.dart';
+
+class AlbumsGrid extends HookWidget {
+  const AlbumsGrid({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = usePagingController<int, String>(
+      getNextPageKey: (state) =>
+          state.lastPageIsEmpty ? null : state.nextIntPageKey,
+      fetchPage: (pageKey) => List.generate(30, (_) => pageKey.toString()),
+    );
+
+    return PagingListener(
+      controller: controller,
+      builder: (context, state, fetchNextPage) {
+        return PagedSliverGrid(
+          state: state,
+          fetchNextPage: fetchNextPage,
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 3,
+          ),
+          builderDelegate: PagedChildBuilderDelegate<String>(
+            itemBuilder: (context, item, index) => AlbumGridTile(
+              onTap: () {
+                context.push('/album');
+              },
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/app/lists/list_items.dart

@@ -0,0 +1,85 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+
+import '../util/clip.dart';
+
+class AlbumGridTile extends StatelessWidget {
+  const AlbumGridTile({
+    super.key,
+    this.onTap,
+  });
+
+  final void Function()? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return CardTheme(
+      clipBehavior: Clip.antiAlias,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadiusGeometry.circular(3),
+      ),
+      margin: EdgeInsets.all(2),
+      child: ImageCard(
+        onTap: onTap,
+        child: CachedNetworkImage(
+          imageUrl: 'https://placehold.net/400x400.png',
+          placeholder: (context, url) => CircularProgressIndicator(),
+          errorWidget: (context, url, error) => Icon(Icons.error),
+        ),
+      ),
+    );
+  }
+}
+
+class ArtistListTile extends StatelessWidget {
+  const ArtistListTile({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      leading: CircleClip(
+        child: CachedNetworkImage(
+          imageUrl: 'https://placehold.net/400x400.png',
+          placeholder: (context, url) => CircularProgressIndicator(),
+          errorWidget: (context, url, error) => Icon(Icons.error),
+        ),
+      ),
+      title: Text('Some Artist'),
+    );
+  }
+}
+
+class ImageCard extends StatelessWidget {
+  const ImageCard({
+    super.key,
+    required this.child,
+    this.onTap,
+    this.onLongPress,
+  });
+
+  final Widget child;
+  final void Function()? onTap;
+  final void Function()? onLongPress;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: Stack(
+        fit: StackFit.passthrough,
+        alignment: Alignment.center,
+        children: [
+          child,
+          Positioned.fill(
+            child: Material(
+              color: Colors.transparent,
+              child: InkWell(
+                onTap: onTap,
+                onLongPress: onLongPress,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/router.dart

@@ -0,0 +1,40 @@
+import 'package:go_router/go_router.dart';
+
+import 'screens/album_screen.dart';
+import 'screens/artist_screen.dart';
+import 'screens/library_screen.dart';
+import 'screens/now_playing_screen.dart';
+import 'screens/root_shell_screen.dart';
+import 'screens/settings_screen.dart';
+
+final router = GoRouter(
+  routes: [
+    ShellRoute(
+      builder: (context, state, child) => RootShellScreen(child: child),
+      routes: [
+        GoRoute(
+          path: '/',
+          builder: (context, state) => LibraryScreen(),
+          routes: [
+            GoRoute(
+              path: 'album',
+              builder: (context, state) => AlbumScreen(),
+            ),
+            GoRoute(
+              path: 'artist',
+              builder: (context, state) => ArtistScreen(),
+            ),
+          ],
+        ),
+      ],
+    ),
+    GoRoute(
+      path: '/now-playing',
+      builder: (context, state) => NowPlayingScreen(),
+    ),
+    GoRoute(
+      path: '/settings',
+      builder: (context, state) => SettingsScreen(),
+    ),
+  ],
+);

lib/app/screens/album_screen.dart

@@ -0,0 +1,32 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class AlbumScreen extends StatelessWidget {
+  const AlbumScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('Album!'),
+            TextButton(
+              onPressed: () {
+                context.push('/artist');
+              },
+              child: Text('Artist...'),
+            ),
+            CachedNetworkImage(
+              imageUrl: 'https://placehold.net/400x400.png',
+              placeholder: (context, url) => CircularProgressIndicator(),
+              errorWidget: (context, url, error) => Icon(Icons.error),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/screens/artist_screen.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class ArtistScreen extends StatelessWidget {
+  const ArtistScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(child: Text('Artist!')),
+    );
+  }
+}

lib/app/screens/library_screen.dart

@@ -0,0 +1,211 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_symbols_icons/symbols.dart';
+
+import '../lists/albums_grid.dart';
+import '../util/custom_scroll_fix.dart';
+
+class LibraryScreen extends StatefulWidget {
+  const LibraryScreen({super.key});
+
+  @override
+  State<LibraryScreen> createState() => _LibraryScreenState();
+}
+
+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
+  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) {
+            return <Widget>[
+              SliverOverlapAbsorber(
+                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
+                  context,
+                ),
+                sliver: SliverAppBar(
+                  flexibleSpace: FlexibleSpaceBar(
+                    collapseMode: CollapseMode.pin,
+                    background: SafeArea(
+                      child: Padding(
+                        padding: EdgeInsets.symmetric(
+                          horizontal: 18,
+                          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),
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 10),
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          TabBar(
+                            controller: tabController,
+                            dividerColor: Colors.transparent,
+                            isScrollable: true,
+                            tabAlignment: TabAlignment.start,
+                            indicatorSize: TabBarIndicatorSize.label,
+                            labelPadding: EdgeInsets.symmetric(
+                              horizontal: 2,
+                            ),
+                            labelColor: Theme.of(context).primaryColorDark,
+                            unselectedLabelColor: Theme.of(
+                              context,
+                            ).textTheme.headlineLarge?.color,
+                            padding: EdgeInsets.symmetric(
+                              // horizontal: 12,
+                              vertical: 8,
+                            ),
+                            splashBorderRadius: BorderRadius.circular(8),
+                            indicator: BoxDecoration(
+                              color: Theme.of(
+                                context,
+                              ).primaryTextTheme.headlineLarge?.color,
+                              borderRadius: BorderRadius.circular(8),
+                            ),
+                            tabs: tabs
+                                .map(
+                                  (tab) => Tab(
+                                    height: tabHeight,
+                                    child: Padding(
+                                      padding: const EdgeInsets.symmetric(
+                                        horizontal: 6,
+                                      ),
+                                      child: tab.$2,
+                                    ),
+                                  ),
+                                )
+                                .toList(),
+                          ),
+                          IconButton(
+                            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(),
+                ),
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class NewWidget extends StatefulWidget {
+  const NewWidget({
+    super.key,
+    required this.index,
+    required this.tab,
+  });
+
+  final int index;
+  final (String, Widget) tab;
+
+  @override
+  State<NewWidget> createState() => _NewWidgetState();
+}
+
+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],
+      slivers: <Widget>[
+        SliverOverlapInjector(
+          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
+            context,
+          ),
+        ),
+        SliverPadding(
+          padding: const EdgeInsets.all(8.0),
+          sliver: AlbumsGrid(),
+        ),
+      ],
+    );
+  }
+}

lib/app/screens/now_playing_screen.dart

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class NowPlayingScreen extends StatelessWidget {
+  const NowPlayingScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text('Now Playing!'),
+            TextButton(
+              onPressed: () {
+                context.go('/album');
+              },
+              child: Text('Album...'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/screens/root_shell_screen.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class RootShellScreen extends StatelessWidget {
+  const RootShellScreen({
+    super.key,
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: child,
+      bottomNavigationBar: BottomAppBar(
+        child: Center(
+          child: TextButton(
+            onPressed: () {
+              context.push('/now-playing');
+            },
+            child: Text('Now playing...'),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/app/screens/settings_screen.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class SettingsScreen extends StatelessWidget {
+  const SettingsScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(child: Text('Settings!')),
+    );
+  }
+}

lib/app/util/clip.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class CircleClip extends StatelessWidget {
+  const CircleClip({
+    super.key,
+    required this.child,
+  });
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipOval(
+      clipBehavior: Clip.antiAlias,
+      child: AspectRatio(
+        aspectRatio: 1.0,
+        child: child,
+      ),
+    );
+  }
+}

lib/app/util/custom_scroll_fix.dart

@@ -0,0 +1,175 @@
+import 'package:flutter/material.dart';
+
+// Fixes scroll postion being reset in a tab when scrolling up inside a
+// NestedScrollView.
+//
+// https://dartpad.dev/?id=5d1a0c7c4b55281ccff377fc8ea90b60
+// https://github.com/flutter/flutter/issues/159123#issuecomment-2614343654
+
+class CustomScrollProvider extends StatefulWidget {
+  const CustomScrollProvider({
+    super.key,
+    required this.tabController,
+    required this.parent,
+    required this.child,
+  });
+
+  final TabController tabController;
+  final ScrollController parent;
+  final Widget child;
+
+  @override
+  State<CustomScrollProvider> createState() => _CustomScrollProviderState();
+}
+
+class _CustomScrollProviderState extends State<CustomScrollProvider> {
+  late final List<CustomScrollController> scrollControllers;
+
+  @override
+  void initState() {
+    super.initState();
+
+    final activeIndex = widget.tabController.index;
+
+    scrollControllers = List.generate(
+      widget.tabController.length,
+      (index) => CustomScrollController(
+        isActive: index == activeIndex,
+        parent: widget.parent,
+        debugLabel: 'CustomScrollController/$index',
+      ),
+    );
+
+    widget.tabController.addListener(() {
+      changeActiveIndex(widget.tabController.index);
+    });
+  }
+
+  @override
+  void dispose() {
+    for (final scrollController in scrollControllers) {
+      scrollController.dispose();
+    }
+
+    super.dispose();
+  }
+
+  void changeActiveIndex(int value) {
+    for (var i = 0; i < scrollControllers.length; i++) {
+      final scrollController = scrollControllers[i];
+      final isActive = i == value;
+      scrollController.isActive = isActive;
+
+      if (isActive) {
+        scrollController.forceAttach();
+      } else {
+        scrollController.forceDetach();
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomScrollProviderData(
+      scrollControllers: scrollControllers,
+      child: widget.child,
+    );
+  }
+}
+
+class CustomScrollProviderData extends InheritedWidget {
+  const CustomScrollProviderData({
+    super.key,
+    required super.child,
+    required this.scrollControllers,
+  });
+
+  static CustomScrollProviderData of(BuildContext context) {
+    return context
+        .dependOnInheritedWidgetOfExactType<CustomScrollProviderData>()!;
+  }
+
+  final List<CustomScrollController> scrollControllers;
+
+  @override
+  bool updateShouldNotify(CustomScrollProviderData oldWidget) {
+    return scrollControllers != oldWidget.scrollControllers;
+  }
+}
+
+class CustomScrollController extends ScrollController {
+  CustomScrollController({
+    required this.isActive,
+    required this.parent,
+    String debugLabel = 'CustomScrollController',
+  }) : super(
+         debugLabel: parent.debugLabel == null
+             ? null
+             : '${parent.debugLabel}/$debugLabel',
+         initialScrollOffset: parent.initialScrollOffset,
+         keepScrollOffset: parent.keepScrollOffset,
+       );
+
+  bool isActive;
+  final ScrollController parent;
+
+  @override
+  ScrollPosition createScrollPosition(
+    ScrollPhysics physics,
+    ScrollContext context,
+    ScrollPosition? oldPosition,
+  ) {
+    debugPrint('$debugLabel-createScrollPosition: $isActive');
+
+    return parent.createScrollPosition(physics, context, oldPosition);
+  }
+
+  @override
+  void attach(ScrollPosition position) {
+    debugPrint('$debugLabel-attach: $isActive');
+
+    super.attach(position);
+    if (isActive && !parent.positions.contains(position)) {
+      parent.attach(position);
+    }
+  }
+
+  @override
+  void detach(ScrollPosition position) {
+    debugPrint('$debugLabel-detach: $isActive');
+
+    if (parent.positions.contains(position)) {
+      parent.detach(position);
+    }
+
+    super.detach(position);
+  }
+
+  void forceDetach() {
+    debugPrint('$debugLabel-forceDetach: $isActive');
+
+    for (final position in positions) {
+      if (parent.positions.contains(position)) {
+        parent.detach(position);
+      }
+    }
+  }
+
+  void forceAttach() {
+    debugPrint('$debugLabel-forceAttach: $isActive');
+
+    for (final position in positions) {
+      if (!parent.positions.contains(position)) {
+        parent.attach(position);
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    debugPrint('$debugLabel-dispose: $isActive');
+
+    forceDetach();
+    super.dispose();
+  }
+}