fix(a11y): improve compact control readability

This commit is contained in:
zarzet
2026-07-29 17:12:30 +07:00
parent 1443be6a4f
commit eed48a5fec
7 changed files with 24 additions and 26 deletions
+1 -1
View File
@@ -1534,7 +1534,7 @@ class _QuickPicksPageViewState extends State<_QuickPicksPageView> {
),
onPressed: () => widget.onItemMenu(item),
padding: EdgeInsets.zero,
constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
constraints: const BoxConstraints(minWidth: 48, minHeight: 48),
),
],
),
+4 -8
View File
@@ -736,9 +736,6 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
isScrollControlled: true,
showDragHandle: true,
backgroundColor: colorScheme.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
),
builder: (context) {
return DraggableScrollableSheet(
expand: false,
@@ -923,9 +920,6 @@ class _NowPlayingScreenState extends ConsumerState<NowPlayingScreen> {
isScrollControlled: true,
showDragHandle: true,
backgroundColor: colorScheme.surfaceContainerHigh,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
),
builder: (context) {
return DraggableScrollableSheet(
expand: false,
@@ -1003,11 +997,13 @@ class _PlaybackControls extends ConsumerWidget {
alpha: 0.18,
),
thumbColor: colorScheme.primary,
// A 7dp thumb was hard to grab; 10dp with a 24dp overlay
// gives the drag gesture a full-size target.
thumbShape: const RoundSliderThumbShape(
enabledThumbRadius: 7,
enabledThumbRadius: 10,
),
overlayShape: const RoundSliderOverlayShape(
overlayRadius: 16,
overlayRadius: 24,
),
),
child: Slider(
+2 -2
View File
@@ -46,8 +46,8 @@ class _AudioInfoCard extends StatelessWidget {
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(
minWidth: 32,
minHeight: 32,
minWidth: 48,
minHeight: 48,
),
color: cs.onSurfaceVariant,
onPressed: onRescan,
+1 -1
View File
@@ -1281,7 +1281,7 @@ class _AudioAnalysisCardState extends State<AudioAnalysisCard> {
tooltip: l10n.audioAnalysisRescan,
visualDensity: VisualDensity.compact,
padding: EdgeInsets.zero,
constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
constraints: const BoxConstraints(minWidth: 48, minHeight: 48),
color: cs.onErrorContainer,
onPressed: () => _analyze(forceRefresh: true),
),
+9 -8
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:spotiflac_android/theme/app_tokens.dart';
class AudioQualityBadge extends StatelessWidget {
final String label;
@@ -16,12 +17,12 @@ class AudioQualityBadge extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: colorScheme.primaryContainer.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(4),
borderRadius: context.tokens.borderRadiusBadge,
),
child: Text(
label,
style: TextStyle(
fontSize: 9,
fontSize: context.tokens.badgeFontSize,
fontWeight: FontWeight.w600,
color: colorScheme.onPrimaryContainer,
height: 1.3,
@@ -41,17 +42,17 @@ class ExplicitBadge extends StatelessWidget {
return Tooltip(
message: 'Explicit',
child: Container(
width: 14,
height: 14,
width: 18,
height: 18,
alignment: Alignment.center,
decoration: BoxDecoration(
color: colorScheme.onSurfaceVariant.withValues(alpha: 0.85),
borderRadius: BorderRadius.circular(3),
borderRadius: context.tokens.borderRadiusBadge,
),
child: Text(
'E',
style: TextStyle(
fontSize: 9,
fontSize: context.tokens.badgeFontSize,
fontWeight: FontWeight.w700,
color: colorScheme.surface,
height: 1.0,
@@ -73,7 +74,7 @@ class DolbyAtmosBadge extends StatelessWidget {
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: colorScheme.tertiaryContainer.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(4),
borderRadius: context.tokens.borderRadiusBadge,
),
child: Row(
mainAxisSize: MainAxisSize.min,
@@ -86,7 +87,7 @@ class DolbyAtmosBadge extends StatelessWidget {
Text(
'Atmos',
style: TextStyle(
fontSize: 9,
fontSize: context.tokens.badgeFontSize,
fontWeight: FontWeight.w600,
color: colorScheme.onTertiaryContainer,
height: 1.3,
+5 -4
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:spotiflac_android/theme/app_tokens.dart';
import 'package:spotiflac_android/l10n/l10n.dart';
/// Small "In Library" chip shown next to a track that already exists in the
@@ -10,24 +11,24 @@ class InLibraryBadge extends StatelessWidget {
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
padding: context.tokens.badgePadding,
decoration: BoxDecoration(
color: colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(4),
borderRadius: context.tokens.borderRadiusBadge,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.folder_outlined,
size: 10,
size: 12,
color: colorScheme.onPrimaryContainer,
),
const SizedBox(width: 3),
Text(
context.l10n.libraryInLibrary,
style: TextStyle(
fontSize: 9,
fontSize: context.tokens.badgeFontSize,
fontWeight: FontWeight.w500,
color: colorScheme.onPrimaryContainer,
),
+2 -2
View File
@@ -49,7 +49,7 @@ class PreviewButton extends ConsumerWidget {
padding: EdgeInsets.zero,
alignment: Alignment.centerRight,
visualDensity: VisualDensity.compact,
constraints: const BoxConstraints(minWidth: 24, minHeight: 36),
constraints: const BoxConstraints(minWidth: 48, minHeight: 48),
icon: Icon(
isPlaying
? Icons.pause_circle_filled_rounded
@@ -113,7 +113,7 @@ class PreviewButton extends ConsumerWidget {
padding: EdgeInsets.zero,
alignment: Alignment.centerRight,
visualDensity: VisualDensity.compact,
constraints: const BoxConstraints(minWidth: 24, minHeight: 36),
constraints: const BoxConstraints(minWidth: 48, minHeight: 48),
icon: icon,
tooltip: tooltip,
onPressed: () => _onPressed(context, ref),