fix(flutter): replace ListTile with custom InkWell+Row in _SettingsRow to fix vertical text

ListTile in Material 3 constrains trailing to ~72px, causing long title text
like "Refer & Earn" to be squeezed vertically letter-by-letter. Custom layout
uses Expanded on the title to take all available space, with trailing/chevron
floated to the right — matching how major apps handle settings rows.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hailin 2026-03-08 01:12:49 -08:00
parent ece778e593
commit 99c883fad9
1 changed files with 25 additions and 17 deletions

View File

@ -961,31 +961,39 @@ class _SettingsRow extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListTile(
leading: Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: iconBg,
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: Colors.white, size: 18),
),
title: Text(title),
trailing: Row(
mainAxisSize: MainAxisSize.min,
final row = Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child: Row(
children: [
if (trailing != null) Flexible(child: trailing!),
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: iconBg,
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: Colors.white, size: 18),
),
const SizedBox(width: 16),
Expanded(
child: Text(
title,
style: Theme.of(context).textTheme.bodyMedium,
overflow: TextOverflow.ellipsis,
),
),
if (trailing != null) ...[const SizedBox(width: 8), trailing!],
if (onTap != null) ...[
const SizedBox(width: 4),
Icon(Icons.chevron_right,
size: 20,
color: Theme.of(context).hintColor),
size: 20, color: Theme.of(context).hintColor),
],
],
),
onTap: onTap,
);
return onTap != null
? InkWell(onTap: onTap, child: row)
: row;
}
}