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>
This commit is contained in:
PartyDonut 2024-10-19 15:25:32 +02:00 committed by GitHub
parent f5343be4e7
commit 6669a06e53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 926 additions and 877 deletions

View file

@ -31,41 +31,44 @@ class SettingsListTile extends StatelessWidget {
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(8), bottomLeft: Radius.circular(8))),
margin: EdgeInsets.zero,
child: ListTile(
minVerticalPadding: 12,
minLeadingWidth: 16,
minTileHeight: 75,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
horizontalTitleGap: 0,
titleAlignment: ListTileTitleAlignment.center,
contentPadding: const EdgeInsets.only(right: 12),
leading: (suffix ?? iconWidget) != null
? Padding(
padding: const EdgeInsets.only(left: 8.0, right: 16.0),
child: AnimatedContainer(
duration: const Duration(milliseconds: 125),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer.withOpacity(selected ? 1 : 0),
borderRadius: BorderRadius.circular(selected ? 5 : 20),
child: MediaQuery(
data: const MediaQueryData(padding: EdgeInsets.zero),
child: ListTile(
minVerticalPadding: 12,
minLeadingWidth: 16,
minTileHeight: 75,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
horizontalTitleGap: 0,
titleAlignment: ListTileTitleAlignment.center,
contentPadding: const EdgeInsets.only(right: 12, left: 2),
leading: (suffix ?? iconWidget) != null
? Padding(
padding: const EdgeInsets.only(left: 8.0, right: 16.0),
child: AnimatedContainer(
duration: const Duration(milliseconds: 125),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer.withOpacity(selected ? 1 : 0),
borderRadius: BorderRadius.circular(selected ? 5 : 20),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12),
child: (suffix ?? iconWidget),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12),
child: (suffix ?? iconWidget),
),
),
)
: suffix ?? const SizedBox(),
title: label,
titleTextStyle: Theme.of(context).textTheme.titleLarge,
trailing: Padding(
padding: const EdgeInsets.only(left: 16),
child: trailing,
)
: suffix ?? const SizedBox(),
title: label,
titleTextStyle: Theme.of(context).textTheme.titleLarge,
trailing: Padding(
padding: const EdgeInsets.only(left: 16),
child: trailing,
),
selected: selected,
textColor: contentColor,
iconColor: contentColor,
subtitle: subLabel,
onTap: onTap,
),
selected: selected,
textColor: contentColor,
iconColor: contentColor,
subtitle: subLabel,
onTap: onTap,
),
);
}

View file

@ -43,11 +43,11 @@ class SettingsScaffold extends ConsumerWidget {
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
leading: context.router.backButton(),
flexibleSpace: FlexibleSpaceBar(
titlePadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16)
titlePadding: const EdgeInsets.symmetric(horizontal: 16)
.add(EdgeInsets.only(left: padding.left, right: padding.right)),
title: Row(
children: [
Text(label, style: Theme.of(context).textTheme.headlineSmall),
Text(label, style: Theme.of(context).textTheme.headlineLarge),
const Spacer(),
if (showUserIcon)
SizedBox.fromSize(
@ -73,8 +73,11 @@ class SettingsScaffold extends ConsumerWidget {
style: Theme.of(context).textTheme.headlineLarge),
),
),
SliverList(
delegate: SliverChildListDelegate(items),
SliverPadding(
padding: MediaQuery.paddingOf(context),
sliver: SliverList(
delegate: SliverChildListDelegate(items),
),
),
if (bottomActions.isEmpty)
const SliverToBoxAdapter(child: SizedBox(height: kBottomNavigationBarHeight + 40)),

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class SettingsLabelDivider extends ConsumerWidget {
@ -8,11 +9,7 @@ class SettingsLabelDivider extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8).add(
EdgeInsets.symmetric(
horizontal: MediaQuery.paddingOf(context).horizontal,
),
),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Text(
label,
style: Theme.of(context).textTheme.titleMedium?.copyWith(