right-to-left (RTL) in flutter

Question

I was using Flutter more than a week, and wanted to create an Arabic (right-to-left) app.

I was reading Internationalizing Flutter Apps, but it didn't mention how to set the layout direction.

So, how to show right-to-left (RTL) layout in Flutter?

If you just need to set the text direction set the `textDirection` property to TextDirection.rtl your TextField or Text widget. — Mohit Shetty, Sep 01 '19 at 19:20
How to restrict a widget to change its children's alignment when the locale is changed? Could you please solve this https://stackoverflow.com/questions/65180615/restrict-a-widget-to-change-its-childrens-alignment-when-locale-is-changed-flut — Febin K R, Dec 07 '20 at 15:16

score 195 · Accepted Answer · edited Jan 04 '21 at 10:09

195

you have two choices :

1. force a locale ( and direction ) on all devices

-- method 1: with localization

add flutter_localizations package to your pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

then

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    GlobalCupertinoLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales
  ],
  locale: Locale("fa", "IR") // OR Locale('ar', 'AE') OR Other RTL locales,
  .
  .
  .
);

-- method 2: without localization

MaterialApp(
  .
  .
  .
  builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
  .
  .
  .
);

2. set layout direction according to device locale ( if user phone locale is a RTL language and exist in supportedLocales, your app run in RTL mode, otherwise your app is LTR )

add flutter_localizations package to your pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

then

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    GlobalCupertinoLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale("en", "US"),
    Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales
  ],
  .
  .
  .
);

note : rtl languages in flutter are:

[
  'ar', // Arabic
  'fa', // Farsi
  'he', // Hebrew
  'ps', // Pashto
  'ur', // Urdu
];

edited Jan 04 '21 at 10:09

mohammad

2,568
3
20
41

answered Feb 14 '19 at 11:54

DJafari

12,955
8
43
65

_rtlLanguages is not use – Elia Weiss Dec 04 '19 at 11:31
The getter 'rtl' isn't defined for the type 'TextDirection'. – Bhargav Sejpal Aug 07 '20 at 09:05
@BhargavSejpal if you imported `intl`package, you must import intl with name : `import 'package:intl/intl.dart' as intl` – DJafari Aug 07 '20 at 23:51
@mohammad Hi , please answer my question in https://stackoverflow.com/questions/68528499 – mm sh Jul 26 '21 at 10:47
@DJafari Hi, please answer my question in https://stackoverflow.com/questions/68528499 – mm sh Jul 26 '21 at 10:57
@DJafari is there any way of obtaining or changing the current ``textDirection`` ? – jksevend Jun 01 '22 at 17:03
@jksevend please ask your question in another question and insert link here – DJafari Jun 01 '22 at 21:14
is it possible to RTL a `MaterialBanner` ? i asked this Question here: https://stackoverflow.com/questions/74020451/flutter-can-materialbanner-have-rtl-direction – Shaybc Oct 10 '22 at 20:37

score 49 · Answer 2 · answered Sep 10 '19 at 04:08

49

The best and shortest way to set RTL configuration for the entire app.

void main() {
  runApp(
    MaterialApp(
      home: Directionality( // add this
        textDirection: TextDirection.rtl, // set this property 
        child: HomePage(),
      ),
    ),
  );
}

answered Sep 10 '19 at 04:08

CopsOnRoad

237,138
77
654
440

error: The argument type 'TextDirection (where TextDirection is defined in D:\flutter\.pub-cache\hosted\pub.dartlang.org\intl-0.15.8\lib\src\intl\bidi_utils.dart)' can't be assigned to the parameter type 'TextDirection (where TextDirection is defined in D:\flutter\bin\cache\pkg\sky_engine\lib\ui\text.dart)'. (argument_type_not_assignable at [zapit] lib\main.dart:186) – Elia Weiss Dec 04 '19 at 16:25
@EliaWeiss Make sure you don't import any other conflicting package, this is the one you should be using import `package:flutter/material.dart`; – CopsOnRoad Dec 05 '19 at 03:31
How to set dynamic when button click from any page? As user wants to change RTL to LTR then how to do? – Pradeep Jul 14 '20 at 11:17
this answer is incorect, because this make only home page rtl, other pages must wrap with `Directionality` too, check my second method of choise 1 – DJafari Jan 09 '23 at 11:42
1

@DJafari This will make all pages rtl not just the `HomePage`. If you navigate to other pages from your `HomePage`, you'll see this in effect. – CopsOnRoad Jan 09 '23 at 11:57

AbdulMomen عبدالمؤمن · Answer 3 · 2018-06-20T06:37:24.767

43

You need to create a Builder and pass it the layout direction using TextDirection.rtl

new MaterialApp(
          title: 'Flutter RTL',
          color: Colors.grey,
          builder: (BuildContext context, Widget child) {
              return new Directionality(
                textDirection: TextDirection.rtl,
                child: new Builder(
                  builder: (BuildContext context) {
                    return new MediaQuery(
                      data: MediaQuery.of(context).copyWith(
                            textScaleFactor: 1.0,
                          ),
                      child: child,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );

edited Jun 20 '18 at 06:37

answered May 25 '18 at 18:45

AbdulMomen عبدالمؤمن

19,419
17
57
65

4

Although it's working, I don't like this answer. You have provided no explanation about how it works or how doing this affects other layouting calculations and etc. – aderchox Jan 20 '20 at 16:55
Why do you need to override the text scale factor? – Miguel Beltran Sep 16 '21 at 09:42

score 10 · Answer 4 · edited Jul 15 '20 at 03:35

10

If you need to display text in reverse direction then just set it's textdirection property to TextDirection.rtl.

Example code for TextField widget,

TextField(
  textDirection: TextDirection.rtl,
  decoration: InputDecoration(
    labelText: "Enter Pashto Name",
  ),
),

Example code for Text widget,

    Text(
      "This text is in the other direction!"
      textDirection: TextDirection.rtl,
    ),

edited Jul 15 '20 at 03:35

Mohit Shetty

1,551
8
26

answered Sep 01 '19 at 18:35

Abdurahman Popal

2,859
24
18

1

You can even use it for Text widget – Mohit Shetty Sep 01 '19 at 19:29
best Answer , Worked for me shortcut – Noor Hossain Oct 05 '22 at 14:47

score 1 · Answer 5 · answered Jul 04 '21 at 15:38

Just append this to your material app:

 builder: (BuildContext context, Widget child) {
              return new Directionality(
                textDirection: TextDirection.rtl,
                child: new Builder(
                  builder: (BuildContext context) {
                    return new MediaQuery(
                      data: MediaQuery.of(context).copyWith(
                            textScaleFactor: 1.0,
                          ),
                      child: child,
                    );
                  },
                ),
              );
            },

score 1 · Answer 6 · answered Aug 04 '22 at 05:34

if you use flutter_localizations: sdk: flutter

add these line to change your app direction

 supportedLocales: [
    Locale("fa", "IR"), 
    Locale("en", 'US'),
  ],
  locale: Locale("fa", "IR")  // this is important line if not add this Apps will not change direction

score 1 · Answer 7 · answered Dec 18 '22 at 14:55

1

GetMaterialApp( textDirection: TextDirection.rtl, home: SignUpScreen() // const HomeExpert() );

answered Dec 18 '22 at 14:55

Zia Ullah

27
5

2

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Vickel Dec 19 '22 at 01:14

right-to-left (RTL) in flutter

7 Answers7

Linked