How do you handle text scaling and RTL support without breaking the layout in Flutter?

Short answer

Use flexible layouts instead of fixed heights, let text expand with the user's settings, and prefer directional classes (EdgeInsetsDirectional and AlignmentDirectional) so the layout automatically flips in right-to-left languages.

Explanation

The user sets the font size from the system settings and Flutter reads it through MediaQuery.textScalerOf. Avoid setting a fixed height for elements that contain text, use Flexible/Expanded and a ConstrainedBox with a minimum, and review screens at a 200% scale. Directionality sets the writing direction automatically from the locale, so directional classes (start/end) flip instead of (left/right). Directional icons (such as a back arrow) need mirroring, while images and numbers are not mirrored without reason.

Code example

Padding(
  padding: const EdgeInsetsDirectional.only(start: 16, end: 8),   // flips automatically in RTL
  child: Row(
    children: [
      const Icon(Icons.arrow_back),                                // Icons.arrow_back mirrors in RTL
      const SizedBox(width: 8),
      Expanded(child: Text(title, maxLines: 2, overflow: TextOverflow.ellipsis)),
    ],
  ),
);

Align(
  alignment: AlignmentDirectional.centerStart,                    // left in LTR, right in RTL
  child: Text(label),
);

// Respect the user's font size; avoid fixed heights around text
ConstrainedBox(
  constraints: const BoxConstraints(minHeight: 48),
  child: Text(label, textScaler: MediaQuery.textScalerOf(context)),
);

Common mistakes

• Setting a fixed height on a text container, so the text overflows the container when the font is enlarged.
• Using EdgeInsets.only(left: ...) and Alignment.centerLeft, so the layout does not flip in Arabic.

Follow-up questions

• How do you implement localization (i18n/l10n) in Flutter using ARB files and the gen-l10n tool?

Sources

• Flutter docs — Accessibility
• Flutter API — EdgeInsetsDirectional