0PricingLogin▼
Flutter Mobile Development · Lesson

RTL Layouts and Directionality Handling

Build layouts that mirror correctly for right-to-left languages using Directionality.

Why RTL Matters

Languages like Arabic, Hebrew, Persian, and Urdu read right-to-left (RTL). A UI built only for left-to-right (LTR) feels broken to those users: back arrows point the wrong way, text aligns to the wrong edge, and rows appear mirrored.

  • Goal: the entire layout should mirror when the locale is RTL.
  • Flutter handles most of this automatically through a concept called directionality.
  • Your job is to write direction-aware code instead of hard-coding left and right.

In this lesson you will learn how Flutter resolves direction and how to keep your widgets mirroring correctly.

The TextDirection Enum

At the core of RTL support is the TextDirection enum from dart:ui. It has exactly two values: ltr and rtl.

  • Every text-rendering and direction-aware widget needs a TextDirection to lay out.
  • In a real app it is normally derived from the device locale, but it is just a plain enum you can reason about in pure Dart.

Here is a tiny pure-Dart model that mirrors how Flutter picks a start edge from a direction.

enum TextDirection { ltr, rtl }

String startEdge(TextDirection dir) {
  return dir == TextDirection.rtl ? 'right' : 'left';
}

String endEdge(TextDirection dir) {
  return dir == TextDirection.rtl ? 'left' : 'right';
}

void main() {
  for (final dir in TextDirection.values) {
    print('$dir -> start=${startEdge(dir)}, end=${endEdge(dir)}');
  }
}

All lessons in this course

  1. ARB Files and gen_l10n Localization Workflow
  2. Pluralization, Gender, and ICU Message Formatting
  3. RTL Layouts and Directionality Handling
  4. Semantics, Screen Readers, and Accessible Widgets
← Back to Flutter Mobile Development