flutter how to Create right to left (rtl) App

Question

I start an App in Flutter with GetX . I want to Create a rtl App and I used flutter_localizations package as this post .

This is my main() code

void main() => runApp(
      GetMaterialApp(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: [
          Locale('fa', 'IR'),
        ],
        locale: Locale('fa', 'IR'),
        home: HomeScreen(),
      ),
    );

and this is my HomeScreen Code

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "Some Text",
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );

and as you see in this picture , debug banner has gone to left side but text steel is in left

Jitesh Mohite · Answer 1 · 2021-07-26T12:50:52.880

2

Use textDirection property and set it to TextDirection.rtl

Local TextDirection

Text(
  "Some Text",
  textDirection: TextDirection.rtl,
),

Global TextDirection

MaterialApp(
      home: Directionality(
        textDirection: TextDirection.rtl, 
        child: UserDetailsScreen(),
      ),
    ),

Complete Example:

void main() => runApp(
      MaterialApp(
        home: Directionality(
            // add this
            textDirection: TextDirection.rtl,
            child: HomeScreen()),
      ),
    );

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Text(
          "ہائے میں فلاں دنیا ہوں !!! امید ہے کہ آپ اچھا کر رہے ہیں۔ کوڈنگ مبارک ہو :)",
          style: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Output:

edited Jul 26 '21 at 12:50

answered Jul 26 '21 at 10:52

Jitesh Mohite

31,138
12
157
147

Hi, I want to convert whole my App to rtl not some of text or images – mm sh Jul 26 '21 at 10:56
Thank you but noting happened :-( – mm sh Jul 26 '21 at 11:05
close application and re-run again this should work – Jitesh Mohite Jul 26 '21 at 11:07
I did . But nothing changed :-( – mm sh Jul 26 '21 at 11:10
I have updated my flutter version this morning . Is it depend ? – mm sh Jul 26 '21 at 11:25
check edited answer, added complete example – Jitesh Mohite Jul 26 '21 at 12:51
Thank you alot but this code works if text is in rtl language only – mm sh Jul 27 '21 at 04:49
try english with long text – Jitesh Mohite Jul 27 '21 at 10:50

score 1 · Answer 2 · answered Jul 26 '21 at 13:27

1

The App is already rtl. it is just that the widget under the safeArea puts the widget to the left with minimum size, I dont' know why this happens try wrapping your text widget with a row or with a container and give it a width then you can see that the default is now to the right not left.

answered Jul 26 '21 at 13:27

Ahmed ibrahim

905
9
16

Thank you alot but I dont want to set TextAlign for every widgets – mm sh Jul 27 '21 at 04:50
you don't need to, the default is now set to right, it will be the same thing without the textAlign property (I forgot to delete the line). – Ahmed ibrahim Jul 27 '21 at 06:06

score 1 · Accepted Answer · answered Jul 26 '21 at 15:40

1

your app is rtl correctly, your problem is current body widget, test this as body widget :

body: SafeArea(
  child: Row(
    mainAxisSize: MainAxisSize.max,
    children: [
      Text("Some Text"),
    ],
  ),
),

answered Jul 26 '21 at 15:40

DJafari

12,955
8
43
65

Thank you a lot but why it does not work with column , only works with row ? – mm sh Jul 27 '21 at 04:53

flutter how to Create right to left (rtl) App

3 Answers3

Linked