fix: remove useBreakpoints as it clogs up memory with unnecessary sta…

…te updates
KRTirtho · Jun 10, 2023 · e1c0f5c · e1c0f5c
1 parent c83d74b
commit e1c0f5c
Show file tree

Hide file tree

Showing 23 changed files with 113 additions and 216 deletions.
diff --git a/lib/components/player/player_track_details.dart b/lib/components/player/player_track_details.dart
@@ -4,7 +4,7 @@ import 'package:spotify/spotify.dart';
 
 import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
@@ -17,7 +17,7 @@ class PlayerTrackDetails extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final playback = ref.watch(ProxyPlaylistNotifier.provider);
 
     return Row(
@@ -37,7 +37,7 @@ class PlayerTrackDetails extends HookConsumerWidget {
               ),
             ),
           ),
-        if (breakpoint.isLessThanOrEqualTo(Breakpoints.md))
+        if (mediaQuery.isSm || mediaQuery.isMd)
           Flexible(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
@@ -60,7 +60,7 @@ class PlayerTrackDetails extends HookConsumerWidget {
               ],
             ),
           ),
-        if (breakpoint.isMoreThan(Breakpoints.md))
+        if (mediaQuery.lgAndUp)
           Flexible(
             flex: 1,
             child: Column(

diff --git a/lib/components/root/bottom_player.dart b/lib/components/root/bottom_player.dart
@@ -12,8 +12,8 @@ import 'package:spotube/components/player/player_actions.dart';
 import 'package:spotube/components/player/player_overlay.dart';
 import 'package:spotube/components/player/player_track_details.dart';
 import 'package:spotube/components/player/player_controls.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/models/logger.dart';
 import 'package:flutter/material.dart';
@@ -33,7 +33,7 @@ class BottomPlayer extends HookConsumerWidget {
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     String albumArt = useMemoized(
       () => playlist.activeTrack?.album?.images?.isNotEmpty == true
@@ -57,7 +57,7 @@ class BottomPlayer extends HookConsumerWidget {
     // returning an empty non spacious Container as the overlay will take
     // place in the global overlay stack aka [_entries]
     if (layoutMode == LayoutMode.compact ||
-        (breakpoint.isLessThanOrEqualTo(Breakpoints.md) &&
+        ((mediaQuery.isSm || mediaQuery.isMd) &&
             layoutMode == LayoutMode.adaptive)) {
       return PlayerOverlay(albumArt: albumArt);
     }

diff --git a/lib/components/root/sidebar.dart b/lib/components/root/sidebar.dart
@@ -9,8 +9,8 @@ import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/hooks/use_sidebarx_controller.dart';
 import 'package:spotube/provider/download_manager_provider.dart';
@@ -49,7 +49,7 @@ class Sidebar extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final breakpoints = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     final downloadCount = ref.watch(
       downloadManagerProvider.select((s) => s.length),
@@ -60,7 +60,7 @@ class Sidebar extends HookConsumerWidget {
 
     final controller = useSidebarXController(
       selectedIndex: selectedIndex,
-      extended: breakpoints > Breakpoints.md,
+      extended: mediaQuery.lgAndUp,
     );
 
     final theme = Theme.of(context);
@@ -82,16 +82,16 @@ class Sidebar extends HookConsumerWidget {
     }, [controller]);
 
     useEffect(() {
-      if (breakpoints > Breakpoints.md && !controller.extended) {
+      if (mediaQuery.lgAndUp && !controller.extended) {
         controller.setExtended(true);
-      } else if (breakpoints <= Breakpoints.md && controller.extended) {
+      } else if ((mediaQuery.isSm || mediaQuery.isMd) && controller.extended) {
         controller.setExtended(false);
       }
       return null;
-    }, [breakpoints, controller]);
+    }, [mediaQuery, controller]);
 
     if (layoutMode == LayoutMode.compact ||
-        (breakpoints.isSm && layoutMode == LayoutMode.adaptive)) {
+        (mediaQuery.isSm && layoutMode == LayoutMode.adaptive)) {
       return Scaffold(body: child);
     }
 
@@ -183,10 +183,10 @@ class SidebarHeader extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final theme = Theme.of(context);
 
-    if (breakpoint <= Breakpoints.md) {
+    if (mediaQuery.isSm || mediaQuery.isMd) {
       return Container(
         height: 40,
         width: 40,
@@ -224,7 +224,7 @@ class SidebarFooter extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final me = useQueries.user.me(ref);
     final data = me.data;
 
@@ -236,7 +236,7 @@ class SidebarFooter extends HookConsumerWidget {
 
     final auth = ref.watch(AuthenticationNotifier.provider);
 
-    if (breakpoint <= Breakpoints.md) {
+    if (mediaQuery.isSm || mediaQuery.isMd) {
       return IconButton(
         icon: const Icon(SpotubeIcons.settings),
         onPressed: () => Sidebar.goToSettings(context),

diff --git a/lib/components/root/spotube_navigation_bar.dart b/lib/components/root/spotube_navigation_bar.dart
@@ -7,8 +7,8 @@ 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/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/hooks/use_brightness_value.dart';
 import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
@@ -29,7 +29,7 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     final downloadCount = ref.watch(
       downloadManagerProvider.select((s) => s.length),
     );
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final layoutMode =
         ref.watch(userPreferencesProvider.select((s) => s.layoutMode));
 
@@ -49,8 +49,9 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     }, [selectedIndex]);
 
     if (layoutMode == LayoutMode.extended ||
-        (breakpoint.isMoreThan(Breakpoints.sm) &&
-            layoutMode == LayoutMode.adaptive)) return const SizedBox();
+        (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive)) {
+      return const SizedBox();
+    }
 
     return ClipRect(
       child: BackdropFilter(

diff --git a/lib/components/shared/adaptive/adaptive_list_tile.dart b/lib/components/shared/adaptive/adaptive_list_tile.dart
@@ -1,15 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 
 class AdaptiveListTile extends HookWidget {
   final Widget Function(BuildContext, StateSetter?)? trailing;
   final Widget? title;
   final Widget? subtitle;
   final Widget? leading;
   final void Function()? onTap;
-  final Breakpoints breakOn;
+  final bool? breakOn;
 
   const AdaptiveListTile({
     super.key,
@@ -18,20 +17,20 @@ class AdaptiveListTile extends HookWidget {
     this.title,
     this.subtitle,
     this.leading,
-    this.breakOn = Breakpoints.md,
+    this.breakOn ,
   });
 
   @override
   Widget build(BuildContext context) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     return ListTile(
       title: title,
       subtitle: subtitle,
       trailing:
-          breakpoint.isLessThan(breakOn) ? null : trailing?.call(context, null),
+          breakOn ?? mediaQuery.isSm ? null : trailing?.call(context, null),
       leading: leading,
-      onTap: breakpoint.isLessThan(breakOn)
+      onTap: breakOn ??  mediaQuery.isSm
           ? () {
               onTap?.call();
               showDialog(

diff --git a/lib/components/shared/adaptive/adaptive_popup_menu_button.dart b/lib/components/shared/adaptive/adaptive_popup_menu_button.dart
@@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 
 import 'package:popover/popover.dart';
 import 'package:spotube/collections/spotube_icons.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 
 class Action extends StatelessWidget {
   final Widget text;
@@ -49,18 +49,18 @@ class Action extends StatelessWidget {
 
 class AdaptiveActions extends HookWidget {
   final List<Action> actions;
-  final Breakpoints breakOn;
+  final bool? breakOn;
   const AdaptiveActions({
     required this.actions,
-    this.breakOn = Breakpoints.lg,
+    this.breakOn,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
-    if (breakpoint.isLessThan(breakOn)) {
+    if (breakOn ?? mediaQuery.lgAndUp) {
       return IconButton(
         icon: const Icon(SpotubeIcons.moreHorizontal),
         onPressed: () {

diff --git a/lib/components/shared/adaptive/adaptive_select_tile.dart b/lib/components/shared/adaptive/adaptive_select_tile.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
+import 'package:spotube/extensions/constrains.dart';
 
 class AdaptiveSelectTile<T> extends HookWidget {
   final Widget title;
@@ -12,15 +12,15 @@ class AdaptiveSelectTile<T> extends HookWidget {
 
   final List<DropdownMenuItem<T>> options;
 
-  final Breakpoints breakAfterOr;
-
   /// Show the smaller value when the breakpoint is reached
   ///
   /// If false, the control will be hidden when the breakpoint is reached
   ///
   /// Defaults to `true`
   final bool showValueWhenUnfolded;
 
+  final bool? breakLayout;
+
   const AdaptiveSelectTile({
     required this.title,
     required this.value,
@@ -29,15 +29,15 @@ class AdaptiveSelectTile<T> extends HookWidget {
     this.controlAffinity = ListTileControlAffinity.trailing,
     this.subtitle,
     this.secondary,
-    this.breakAfterOr = Breakpoints.md,
+    this.breakLayout,
     this.showValueWhenUnfolded = true,
     super.key,
   });
 
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
     final rawControl = DropdownButton<T>(
       items: options,
       value: value,
@@ -55,7 +55,7 @@ class AdaptiveSelectTile<T> extends HookWidget {
             .child,
         [value, options]);
 
-    final control = breakpoint >= breakAfterOr
+    final control = breakLayout ?? mediaQuery.mdAndUp
         ? rawControl
         : showValueWhenUnfolded
             ? Container(
@@ -85,7 +85,7 @@ class AdaptiveSelectTile<T> extends HookWidget {
       trailing: controlAffinity == ListTileControlAffinity.leading
           ? secondary
           : control,
-      onTap: breakpoint >= breakAfterOr
+      onTap: breakLayout ?? mediaQuery.mdAndUp
           ? null
           : () {
               showDialog(

diff --git a/lib/components/shared/shimmers/shimmer_lyrics.dart b/lib/components/shared/shimmers/shimmer_lyrics.dart
@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 
 import 'package:skeleton_text/skeleton_text.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/theme.dart';
-import 'package:spotube/hooks/use_breakpoints.dart';
 
 const widths = [20, 56, 89, 60, 25, 69];
 
@@ -21,18 +21,18 @@ class ShimmerLyrics extends HookWidget {
     final shimmerBackgroundColor =
         shimmerTheme.shimmerBackgroundColor ?? Colors.grey;
 
-    final breakpoint = useBreakpoints();
+    final mediaQuery = MediaQuery.of(context);
 
     return ListView.builder(
       itemCount: 20,
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
       itemBuilder: (context, index) {
         final widthsCp = [...widths];
-        if (breakpoint.isMd) {
+        if (mediaQuery.isMd) {
           widthsCp.removeLast();
         }
-        if (breakpoint.isSm) {
+        if (mediaQuery.isSm) {
           widthsCp.removeLast();
           widthsCp.removeLast();
         }