fix: padding issues (#47)

## Pull Request Description

This fixes a bunch of padding issues, and also improves padding in other
areas.

Issue Number: #29

---------

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>

lib/widgets/navigation_scaffold/components/navigation_body.dart

@@ -111,76 +111,78 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
   }
 
   Widget navigationRail(BuildContext context) {
-    return Padding(
-      key: const Key('navigation_rail'),
-      padding: AdaptiveLayout.of(context).isDesktop ? EdgeInsets.zero : MediaQuery.of(context).padding,
-      child: Column(
-        children: [
-          if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{
-            const SizedBox(height: 4),
-            Text(
-              "Fladder",
-              style: Theme.of(context).textTheme.titleSmall,
-            ),
-          },
-          if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS)
-            const SizedBox(height: 32)
-          else
-            const SizedBox(height: 16),
-          IconButton(
-            onPressed: () {
-              if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
-                widget.drawerKey.currentState?.openDrawer();
-              } else {
-                setState(() {
-                  expandedSideBar = true;
-                });
-              }
-            },
-            icon: const Icon(IconsaxBold.menu),
+    return Column(
+      children: [
+        if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{
+          const SizedBox(height: 4),
+          Text(
+            "Fladder",
+            style: Theme.of(context).textTheme.titleSmall,
           ),
-          if (AdaptiveLayout.of(context).size == ScreenLayout.dual) ...[
-            const SizedBox(height: 8),
-            AnimatedFadeSize(
-              child: AnimatedSwitcher(
-                duration: const Duration(milliseconds: 250),
-                transitionBuilder: (Widget child, Animation<double> animation) {
-                  return ScaleTransition(scale: animation, child: child);
-                },
-                child: actionButton()?.normal,
-              ),
-            ),
-          ],
-          const Spacer(),
-          IconTheme(
-            data: const IconThemeData(size: 28),
+        },
+        Flexible(
+          child: Padding(
+            key: const Key('navigation_rail'),
+            padding: MediaQuery.paddingOf(context).copyWith(right: 0),
             child: Column(
-              crossAxisAlignment: CrossAxisAlignment.center,
               children: [
-                ...widget.destinations.mapIndexed(
-                  (index, destination) => destination.toNavigationButton(widget.currentIndex == index, false),
-                )
+                IconButton(
+                  onPressed: () {
+                    if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
+                      widget.drawerKey.currentState?.openDrawer();
+                    } else {
+                      setState(() {
+                        expandedSideBar = true;
+                      });
+                    }
+                  },
+                  icon: const Icon(IconsaxBold.menu),
+                ),
+                if (AdaptiveLayout.of(context).size == ScreenLayout.dual) ...[
+                  const SizedBox(height: 8),
+                  AnimatedFadeSize(
+                    child: AnimatedSwitcher(
+                      duration: const Duration(milliseconds: 250),
+                      transitionBuilder: (Widget child, Animation<double> animation) {
+                        return ScaleTransition(scale: animation, child: child);
+                      },
+                      child: actionButton()?.normal,
+                    ),
+                  ),
+                ],
+                const Spacer(),
+                IconTheme(
+                  data: const IconThemeData(size: 28),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      ...widget.destinations.mapIndexed(
+                        (index, destination) => destination.toNavigationButton(widget.currentIndex == index, false),
+                      )
+                    ],
+                  ),
+                ),
+                const Spacer(),
+                SizedBox(
+                  height: 48,
+                  child: AnimatedSwitcher(
+                      duration: const Duration(milliseconds: 250),
+                      child: widget.currentLocation.contains(const SettingsRoute().routeName)
+                          ? Card(
+                              color: Theme.of(context).colorScheme.primaryContainer,
+                              child: const Padding(
+                                padding: EdgeInsets.all(10),
+                                child: Icon(IconsaxBold.setting_3),
+                              ),
+                            )
+                          : const SettingsUserIcon()),
+                ),
+                if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
               ],
             ),
           ),
-          const Spacer(),
-          SizedBox(
-            height: 48,
-            child: AnimatedSwitcher(
-                duration: const Duration(milliseconds: 250),
-                child: widget.currentLocation.contains(const SettingsRoute().routeName)
-                    ? Card(
-                        color: Theme.of(context).colorScheme.primaryContainer,
-                        child: const Padding(
-                          padding: EdgeInsets.all(10),
-                          child: Icon(IconsaxBold.setting_3),
-                        ),
-                      )
-                    : const SettingsUserIcon()),
-          ),
-          if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }

lib/widgets/shared/alert_content.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+
+import 'package:fladder/util/list_padding.dart';
+
+class ActionContent extends StatelessWidget {
+  final Widget? title;
+  final Widget child;
+  final List<Widget> actions;
+  final bool showDividers;
+  final EdgeInsetsGeometry? padding;
+  const ActionContent({
+    this.title,
+    required this.child,
+    this.padding,
+    this.showDividers = true,
+    this.actions = const [],
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding ?? MediaQuery.paddingOf(context).add(const EdgeInsets.symmetric(horizontal: 16)),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (title != null) ...[
+            title!,
+            if (showDividers)
+              const Divider(
+                height: 4,
+              ),
+          ],
+          Expanded(child: child),
+          if (actions.isNotEmpty) ...[
+            if (showDividers)
+              const Divider(
+                height: 4,
+              ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: actions,
+            )
+          ],
+        ].addInBetween(const SizedBox(height: 16)),
+      ),
+    );
+  }
+}

lib/widgets/shared/item_actions.dart

@@ -1,9 +1,10 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first
 import 'dart:async';
 
-import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
+import 'package:collection/collection.dart';
+
 abstract class ItemAction {
   Widget toMenuItemButton();
   PopupMenuEntry toPopupMenuItem({bool useIcons = false});
@@ -67,7 +68,11 @@ class ItemActionButton extends ItemAction {
                     iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
                   ),
                   child: Row(
-                    children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)],
+                    children: [
+                      if (icon != null) icon!,
+                      const SizedBox(width: 8),
+                      if (label != null) Flexible(child: label!)
+                    ],
                   ),
                 ),
               );
@@ -82,25 +87,38 @@ class ItemActionButton extends ItemAction {
   }
 
   @override
-  ListTile toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) {
-    return ListTile(
-      onTap: () {
+  Widget toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) {
+    return ElevatedButton(
+      style: ButtonStyle(
+        backgroundColor: const WidgetStatePropertyAll(Colors.transparent),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 12)),
+        minimumSize: const WidgetStatePropertyAll(Size(50, 50)),
+        elevation: const WidgetStatePropertyAll(0),
+        foregroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.onSurface),
+      ),
+      onPressed: () {
         if (shouldPop) {
           Navigator.of(context).pop();
         }
         action?.call();
       },
-      title: useIcons
-          ? Builder(builder: (context) {
-              return Theme(
-                data: ThemeData(
-                  iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
-                ),
-                child: Row(
-                  children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)],
-                ),
-              );
-            })
+      child: useIcons
+          ? Builder(
+              builder: (context) {
+                return Theme(
+                  data: ThemeData(
+                    iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
+                  ),
+                  child: Row(
+                    children: [
+                      if (icon != null) icon!,
+                      const SizedBox(width: 8),
+                      if (label != null) Flexible(child: label!)
+                    ],
+                  ),
+                );
+              },
+            )
           : label,
     );
   }

lib/widgets/shared/modal_bottom_sheet.dart

@@ -1,8 +1,10 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import 'package:fladder/models/item_base_model.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/fladder_image.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 Future<void> showBottomSheetPill({
   ItemBaseModel? item,
@@ -32,7 +34,10 @@ Future<void> showBottomSheetPill({
         controller: controller,
         children: [
           if (item != null) ...{
-            ItemBottomSheetPreview(item: item),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12),
+              child: ItemBottomSheetPreview(item: item),
+            ),
             const Divider(),
           },
           content(context, controller),
@@ -51,49 +56,46 @@ class ItemBottomSheetPreview extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return Column(
       children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-          child: Row(
-            children: [
-              Card(
-                child: SizedBox(
-                  height: 90,
-                  child: AspectRatio(
-                    aspectRatio: 1,
-                    child: FladderImage(
-                      image: item.images?.primary,
-                      fit: BoxFit.contain,
-                    ),
+        Row(
+          children: [
+            Card(
+              child: SizedBox(
+                height: 90,
+                child: AspectRatio(
+                  aspectRatio: 1,
+                  child: FladderImage(
+                    image: item.images?.primary,
+                    fit: BoxFit.contain,
                   ),
                 ),
               ),
-              const SizedBox(width: 16),
-              Flexible(
-                child: Column(
-                  mainAxisSize: MainAxisSize.max,
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      item.title,
-                      maxLines: 2,
-                      overflow: TextOverflow.ellipsis,
-                      style: Theme.of(context).textTheme.titleLarge,
-                    ),
-                    if (item.subText?.isNotEmpty ?? false)
-                      Opacity(
-                        opacity: 0.75,
-                        child: Text(
-                          item.subText!,
-                          overflow: TextOverflow.ellipsis,
-                          maxLines: 2,
-                          style: Theme.of(context).textTheme.titleMedium,
-                        ),
+            ),
+            const SizedBox(width: 16),
+            Flexible(
+              child: Column(
+                mainAxisSize: MainAxisSize.max,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    item.title,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    style: Theme.of(context).textTheme.titleLarge,
+                  ),
+                  if (item.subText?.isNotEmpty ?? false)
+                    Opacity(
+                      opacity: 0.75,
+                      child: Text(
+                        item.subText!,
+                        overflow: TextOverflow.ellipsis,
+                        maxLines: 2,
+                        style: Theme.of(context).textTheme.titleMedium,
                       ),
-                  ],
-                ),
+                    ),
+                ],
               ),
-            ],
-          ),
+            ),
+          ],
         ),
       ],
     );