Refactor

lib/common_widgets/logo_app_bar.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:npm/common_widgets/logo.dart';
+
+class LogoAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const LogoAppBar({
+    required this.title,
+    required this.trailing,
+    this.height = 80.0,
+    super.key,
+  });
+
+  final Widget title;
+  final Widget trailing;
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      leading: const Padding(
+        padding: EdgeInsets.only(left: 16.0),
+        child: Logo(),
+      ),
+      leadingWidth: 80,
+      surfaceTintColor: Colors.transparent,
+      toolbarHeight: height,
+      actions: [trailing],
+      title: title,
+    );
+  }
+
+  @override
+  Size get preferredSize => Size(AppBar().preferredSize.width, height);
+}

lib/features/package_details/package_details_page.dart

@@ -22,12 +22,10 @@ class PackageDetailsPage extends ConsumerWidget {
       appBar: TitleAppBar(title: l10n.packageDetailsPage.title),
       body: Padding(
         padding: const EdgeInsets.symmetric(horizontal: 24),
-        child: Center(
-          child: package.when(
-            data: (package) => PackegeDetailsItem(package),
-            error: (e, _) => Text(e.toString()),
-            loading: () => const CircularProgressIndicator(),
-          ),
+        child: package.when(
+          data: (package) => PackegeDetailsItem(package),
+          error: (e, _) => Text(e.toString()),
+          loading: () => const Center(child: CircularProgressIndicator()),
         ),
       ),
     );

lib/features/packages/packages_page.dart

@@ -4,14 +4,14 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:npm/common_widgets/empty_image.dart';
+import 'package:npm/common_widgets/logo_app_bar.dart';
+import 'package:npm/features/settings/go_settings_button.dart';
 import 'package:npm/util/extensions.dart';
 import 'package:npm/features/packages/package_item.dart';
 import 'package:npm/features/packages/packages.dart';
 import 'package:npm/features/score/score.dart';
 import 'package:npm/features/score/score_radio_tile.dart';
 import 'package:npm/features/settings/language.dart';
-import 'package:npm/router.dart';
-import 'package:npm/common_widgets/logo.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 part 'packages_page.g.dart';
@@ -34,23 +34,8 @@ class PackagesPage extends HookConsumerWidget {
     final l10n = ref.watch(l10nProvider);
 
     return Scaffold(
-      appBar: AppBar(
-        leading: const Padding(
-          padding: EdgeInsets.only(left: 16.0),
-          child: Logo(),
-        ),
-        leadingWidth: 80,
-        surfaceTintColor: Colors.transparent,
-        toolbarHeight: 80,
-        actions: [
-          Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: IconButton.outlined(
-              onPressed: () => const SettingsRoute().go(context),
-              icon: const Icon(Icons.settings),
-            ),
-          ),
-        ],
+      appBar: LogoAppBar(
+        trailing: const GoSettingsButton(),
         title: SearchBar(
           hintText: l10n.packagesPage.searchPackages,
           controller: searchController,
@@ -61,7 +46,7 @@ class PackagesPage extends HookConsumerWidget {
         child: context.isLargeScreen
             ? Row(
                 children: [
-                  const _SortPannel(),
+                  const _SortPanel(),
                   const VerticalDivider(),
                   Expanded(
                     child: _PackageItems(searchText: searchController.text),
@@ -73,23 +58,18 @@ class PackagesPage extends HookConsumerWidget {
                   const SliverAppBar(
                     surfaceTintColor: Colors.transparent,
                     toolbarHeight: 200,
-                    title: SizedBox(
-                      width: double.maxFinite,
-                      child: _SortPannel(),
-                    ),
+                    title: _SortPanel(),
                   )
                 ],
-                body: Center(
-                  child: _PackageItems(searchText: searchController.text),
-                ),
+                body: _PackageItems(searchText: searchController.text),
               ),
       ),
     );
   }
 }
 
-class _SortPannel extends ConsumerWidget {
-  const _SortPannel();
+class _SortPanel extends ConsumerWidget {
+  const _SortPanel();
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -128,34 +108,32 @@ class _PackageItems extends ConsumerWidget {
     final sort = ref.watch(sortProvider);
     final l10n = ref.watch(l10nProvider);
 
-    return Center(
-      child: packages.when(
-        data: (packages) {
-          final sortedPackages = sort == null
-              ? List.of(packages)
-              : packages.sortedByCompare(
-                  (package) => sort.getValue(package.score),
-                  (a, b) => b.compareTo(a));
+    return packages.when(
+      data: (packages) {
+        final sortedPackages = sort == null
+            ? List.of(packages)
+            : packages.sortedByCompare(
+                (package) => sort.getValue(package.score),
+                (a, b) => b.compareTo(a));
 
-          return sortedPackages.isEmpty
-              ? SingleChildScrollView(
-                  child: EmptyImage(text: l10n.packagesPage.packageNotFound),
-                )
-              : RefreshIndicator(
-                  onRefresh: () async => ref.refresh(packagesProvider(
-                    search: searchText,
-                    debounce: false,
-                  ).future),
-                  child: ListView.separated(
-                    separatorBuilder: (_, __) => const Divider(),
-                    itemCount: sortedPackages.length,
-                    itemBuilder: (_, int i) => PackageItem(sortedPackages[i]),
-                  ),
-                );
-        },
-        error: (e, _) => Text(e.toString()),
-        loading: () => const CircularProgressIndicator(),
-      ),
+        return sortedPackages.isEmpty
+            ? SingleChildScrollView(
+                child: EmptyImage(text: l10n.packagesPage.packageNotFound),
+              )
+            : RefreshIndicator(
+                onRefresh: () async => ref.refresh(packagesProvider(
+                  search: searchText,
+                  debounce: false,
+                ).future),
+                child: ListView.separated(
+                  separatorBuilder: (_, __) => const Divider(),
+                  itemCount: sortedPackages.length,
+                  itemBuilder: (_, int i) => PackageItem(sortedPackages[i]),
+                ),
+              );
+      },
+      error: (e, _) => Text(e.toString()),
+      loading: () => const Center(child: CircularProgressIndicator()),
     );
   }
 }

lib/features/settings/go_settings_button.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/material.dart';
+import 'package:npm/router.dart';
+
+class GoSettingsButton extends StatelessWidget {
+  const GoSettingsButton({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: IconButton.outlined(
+        onPressed: () => const SettingsRoute().go(context),
+        icon: const Icon(Icons.settings),
+      ),
+    );
+  }
+}