fix: move all .of(context) out of the widget tree and into a variable

At some places <something>.of(context) was used multiple times in the
same widget. This, although small, can have an impact on performance
that's just plain unnecessary. It's better to just get things you need
out of the context first before you do anything else.

lib/app/pages/artist_page.dart

@@ -118,10 +118,11 @@ class _Title extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return Text(
       text,
       textAlign: TextAlign.center,
-      style: Theme.of(context).textTheme.displayMedium!.copyWith(
+      style: theme.textTheme.displayMedium!.copyWith(
         fontWeight: FontWeight.bold,
         color: Colors.white,
         shadows: [

lib/app/pages/bottom_nav_page.dart

@@ -46,6 +46,8 @@ class BottomNavTabsPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     final observer = ref.watch(bottomTabObserverProvider);
     const navElevation = 3.0;
 
@@ -63,8 +65,8 @@ class BottomNavTabsPage extends HookConsumerWidget {
         return AnnotatedRegion<SystemUiOverlayStyle>(
           value: SystemUiOverlayStyle.light.copyWith(
             systemNavigationBarColor: ElevationOverlay.applySurfaceTint(
-              Theme.of(context).colorScheme.surface,
-              Theme.of(context).colorScheme.surfaceTint,
+              theme.colorScheme.surface,
+              theme.colorScheme.surfaceTint,
               navElevation,
             ),
             statusBarColor: Colors.transparent,
@@ -136,7 +138,6 @@ class OfflineIndicator extends HookConsumerWidget {
                 padding: EdgeInsets.only(left: 2, bottom: 2),
                 child: Icon(
                   Icons.cloud_off_rounded,
-                  // color: Theme.of(context).colorScheme.secondary,
                   size: 20,
                 ),
               ),
@@ -154,6 +155,7 @@ class _BottomNavBar extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final iconTheme = IconTheme.of(context);
     final tabsRouter = AutoTabsRouter.of(context);
 
     useListenableSelector(tabsRouter, () => tabsRouter.activeIndex);
@@ -190,9 +192,7 @@ class _BottomNavBar extends HookConsumerWidget {
                 return SvgPicture.asset(
                   'assets/tag_FILL0_wght400_GRAD0_opsz24.svg',
                   colorFilter: ColorFilter.mode(
-                    IconTheme.of(context).color!.withOpacity(
-                          IconTheme.of(context).opacity ?? 1,
-                        ),
+                    iconTheme.color!.withOpacity(iconTheme.opacity ?? 1),
                     BlendMode.srcIn,
                   ),
                   height: 28,

lib/app/pages/browse_page.dart

@@ -249,6 +249,8 @@ class _Category extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     return MultiSliver(
       children: [
         SliverToBoxAdapter(
@@ -256,7 +258,7 @@ class _Category extends HookConsumerWidget {
             padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
             child: Text(
               title,
-              style: Theme.of(context).textTheme.headlineMedium,
+              style: theme.textTheme.headlineMedium,
             ),
           ),
         ),

lib/app/pages/library_page.dart

@@ -228,6 +228,8 @@ class _LibraryFilterFab extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     final tabsRouter = AutoTabsRouter.of(context);
     final activeIndex =
         useListenableSelector(tabsRouter, () => tabsRouter.activeIndex);
@@ -242,7 +244,7 @@ class _LibraryFilterFab extends HookConsumerWidget {
           end: 0,
           child: Icon(
             Icons.circle,
-            color: Theme.of(context).colorScheme.primaryContainer,
+            color: theme.colorScheme.primaryContainer,
             size: 11,
           ),
         ),
@@ -449,6 +451,8 @@ class ListSortFilterOptions extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     final list = ref.watch(libraryListQueryProvider(index));
 
     return SliverList(
@@ -457,7 +461,7 @@ class ListSortFilterOptions extends HookConsumerWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16),
           child: Text(
             'Sort by',
-            style: Theme.of(context).textTheme.titleLarge,
+            style: theme.textTheme.titleLarge,
           ),
         ),
         const SizedBox(height: 8),
@@ -480,7 +484,7 @@ class ListSortFilterOptions extends HookConsumerWidget {
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
           child: Text(
             'Filter',
-            style: Theme.of(context).textTheme.titleLarge,
+            style: theme.textTheme.titleLarge,
           ),
         ),
         for (var column in list.options.filterColumns)

lib/app/pages/now_playing_page.dart

@@ -215,6 +215,8 @@ class _Progress extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
     final colors = ref.watch(mediaItemThemeProvider).valueOrNull;
     final position = ref.watch(positionProvider);
     final duration = ref.watch(durationProvider);
@@ -246,7 +248,7 @@ class _Progress extends HookConsumerWidget {
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 24),
           child: DefaultTextStyle(
-            style: Theme.of(context).textTheme.titleMedium!,
+            style: theme.textTheme.titleMedium!,
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [

lib/app/pages/search_page.dart

@@ -131,11 +131,11 @@ class _SectionHeader extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final theme = Theme.of(context).textTheme;
+    final theme = Theme.of(context);
 
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-      child: Text(title, style: theme.headlineMedium),
+      child: Text(title, style: theme.textTheme.headlineMedium),
     );
   }
 }