Why does left and right break Arabic layouts in Flutter?

EdgeInsets.only(left:) and Alignment.centerLeft always point to the physical left. In Arabic the screen reads from the right, so spacing and alignment end up on the wrong side. The Directional versions use start and end, which follow the reading direction of the current locale.

Is the fixed code safe to paste back?

The automatic fixes only rename constructors and arguments to their Directional twins, which take the same values. Warnings are left for you to decide, because a fixed direction is sometimes intended, for example for phone numbers.

Does it send my code to a server?

No. The checking runs entirely in your browser.

Free tool

Flutter RTL Checker

Paste a widget and see every spot that will break in Arabic, Hebrew or Persian: padding, alignment, borders and positions written with left and right. The checker rewrites them with start and end, so the layout flips with the language.

Runs in your browser. Your code is not sent anywhere.

Your Dart code

7 to fix3 to check

Line 8Auto-fixed
EdgeInsets.only with left/right
left, right stay on the same side in Arabic. EdgeInsetsDirectional.only uses start, end, which flip with the language.
EdgeInsets.only(left: 16, right: 8)EdgeInsetsDirectional.only(start: 16, end: 8)
Line 9Auto-fixed
EdgeInsets.fromLTRB
The first and third values are fixed to left and right. fromSTEB takes the same four numbers as start, top, end, bottom.
EdgeInsets.fromLTRB(…)EdgeInsetsDirectional.fromSTEB(…)
Line 11Auto-fixed
BorderRadius.only with left/right corners
topLeft stay on the same side in Arabic. BorderRadiusDirectional.only uses topStart, which flip with the language.
BorderRadius.only(topLeft: Radius.circular(12))BorderRadiusDirectional.only(topStart: Radius.circular(12))
Line 12Auto-fixed
Border with left/right sides
left stay on the same side in Arabic. BorderDirectional uses start, which flip with the language.
Border(left: BorderSide(color: Colors.blue, width: 3))BorderDirectional(start: BorderSide(color: Colors.blue, width: 3))
Line 14Auto-fixed
Alignment.centerLeft
Points to the left in every language. AlignmentDirectional.centerStart follows the reading direction.
Alignment.centerLeftAlignmentDirectional.centerStart
Line 18Check by hand
Plural written by hand
Arabic has six plural forms, not two. Use an ICU plural message in your ARB file instead.
== 1 ? 'One item' : '$count items',
Line 19Auto-fixed
TextAlign.left
Arabic text aligned left looks wrong. TextAlign.start aligns with the start of each language's line.
TextAlign.leftTextAlign.start
Line 20Check by hand
letterSpacing
Space between letters breaks Arabic, whose letters join. Keep it at zero for Arabic text.
letterSpacing: 1.2),
Line 22Auto-fixed
Positioned with left/right
right stay on the same side in Arabic. PositionedDirectional uses end, which flip with the language.
Positioned(right: 0, top: 0, child: Image.asset('assets/arrow_next.png'))PositionedDirectional(end: 0, top: 0, child: Image.asset('assets/arrow_next.png'))
Line 22Check by hand
Direction image that will not flip
Built-in icons such as Icons.arrow_back flip on their own; your own arrow images do not. Add matchTextDirection: true.
Image.asset('assets/arrow_next.png')),

Fixed code

class OrderCard extends StatelessWidget {
  const OrderCard({super.key, required this.count});
  final int count;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsetsDirectional.only(start: 16, end: 8),
      padding: EdgeInsetsDirectional.fromSTEB(20, 12, 8, 12),
      decoration: BoxDecoration(
        borderRadius: BorderRadiusDirectional.only(topStart: Radius.circular(12)),
        border: BorderDirectional(start: BorderSide(color: Colors.blue, width: 3)),
      ),
      alignment: AlignmentDirectional.centerStart,
      child: Stack(
        children: [
          Text(
            count == 1 ? 'One item' : '$count items',
            textAlign: TextAlign.start,
            style: TextStyle(letterSpacing: 1.2),
          ),
          PositionedDirectional(end: 0, top: 0, child: Image.asset('assets/arrow_next.png')),
        ],
      ),
    );
  }
}

What it checks

EdgeInsets.only and fromLTRB → EdgeInsetsDirectional
Alignment.centerLeft and friends → AlignmentDirectional
Positioned left/right → PositionedDirectional
BorderRadius.only and Border sides → their Directional versions
TextAlign.left/right → start/end
Hard-coded TextDirection.ltr, letterSpacing on Arabic, arrow images without matchTextDirection, hand-written plurals, and missing localization delegates

Learn the why

Questions

Why does left and right break Arabic layouts in Flutter?: EdgeInsets.only(left:) and Alignment.centerLeft always point to the physical left. In Arabic the screen reads from the right, so spacing and alignment end up on the wrong side. The Directional versions use start and end, which follow the reading direction of the current locale.
Is the fixed code safe to paste back?: The automatic fixes only rename constructors and arguments to their Directional twins, which take the same values. Warnings are left for you to decide, because a fixed direction is sometimes intended, for example for phone numbers.
Does it send my code to a server?: No. The checking runs entirely in your browser.

Building a Flutter app in Arabic and English?

I build bilingual Flutter apps with right-to-left support from the first screen.

Flutter app development