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

@ -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)),
),
);
}
}

View file

@ -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,
);
}

View file

@ -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,
),
],
),
),
],
),
],
),
),
],
),
],
);