diff --git a/lib/screens/settings/settings_list_tile.dart b/lib/screens/settings/settings_list_tile.dart index 73dd1cd..ce02129 100644 --- a/lib/screens/settings/settings_list_tile.dart +++ b/lib/screens/settings/settings_list_tile.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:fladder/screens/shared/flat_button.dart'; + class SettingsListTile extends StatelessWidget { final Widget label; final Widget? subLabel; @@ -24,48 +26,86 @@ class SettingsListTile extends StatelessWidget { @override Widget build(BuildContext context) { final iconWidget = icon != null ? Icon(icon) : null; + + final leadingWidget = (suffix ?? iconWidget) != null + ? Padding( + padding: const EdgeInsets.only(left: 8, right: 16.0), + child: AnimatedContainer( + duration: const Duration(milliseconds: 125), + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.primaryContainer.withValues(alpha: selected ? 1 : 0), + borderRadius: BorderRadius.circular(selected ? 5 : 20), + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12), + child: (suffix ?? iconWidget), + ), + ), + ) + : suffix ?? const SizedBox(); return Card( elevation: selected ? 2 : 0, - color: selected ? null : Colors.transparent, + color: selected ? Theme.of(context).colorScheme.surfaceContainerLow : Colors.transparent, shadowColor: Colors.transparent, 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, 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.withValues(alpha: selected ? 1 : 0), - borderRadius: BorderRadius.circular(selected ? 5 : 20), - ), - 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, - ), - selected: selected, - textColor: contentColor, - iconColor: contentColor, - subtitle: subLabel, + child: FlatButton( onTap: onTap, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 12, + ).copyWith( + left: (suffix ?? iconWidget) != null ? 0 : null, + ), + child: ConstrainedBox( + constraints: const BoxConstraints( + minHeight: 50, + ), + child: ClipRRect( + borderRadius: BorderRadius.circular(12), + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + ColorFiltered( + colorFilter: ColorFilter.mode( + contentColor ?? Theme.of(context).colorScheme.onSurface, + BlendMode.srcIn, + ), + child: leadingWidget, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Material( + color: Colors.transparent, + textStyle: Theme.of(context).textTheme.titleLarge, + child: label, + ), + if (subLabel != null) + Opacity( + opacity: 0.75, + child: Material( + color: Colors.transparent, + textStyle: Theme.of(context).textTheme.labelLarge, + child: subLabel, + ), + ), + ], + ), + ), + if (trailing != null) + Padding( + padding: const EdgeInsets.only(left: 16), + child: trailing, + ) + ], + ), + ), + ), + ), ), ); } diff --git a/lib/screens/shared/flat_button.dart b/lib/screens/shared/flat_button.dart index c943d79..9d091e4 100644 --- a/lib/screens/shared/flat_button.dart +++ b/lib/screens/shared/flat_button.dart @@ -29,8 +29,13 @@ class FlatButton extends ConsumerWidget { super.key, }); + bool get _hasInteraction => onTap != null || onLongPress != null || onDoubleTap != null; + @override Widget build(BuildContext context, WidgetRef ref) { + if (!_hasInteraction) { + return child ?? Container(); + } return Stack( fit: StackFit.passthrough, children: [