flutter how to Create right to left (rtl) App

flutter localization right-to-left flutter-getx

477

Solution 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"),
    ],
  ),
),

Solution 2

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.

Solution 3

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:

477

Author by

mm sh

Updated on December 31, 2022

Comments

mm sh over 1 year

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

mm sh almost 3 years

Hi, I want to convert whole my App to rtl not some of text or images
mm sh almost 3 years

Thank you but noting happened :-(
Jitesh Mohite almost 3 years

close application and re-run again this should work
mm sh almost 3 years

I did . But nothing changed :-(
mm sh almost 3 years

I have updated my flutter version this morning . Is it depend ?
Jitesh Mohite almost 3 years

check edited answer, added complete example
mm sh almost 3 years

Thank you alot but this code works if text is in rtl language only
mm sh almost 3 years

Thank you alot but I dont want to set TextAlign for every widgets
mm sh almost 3 years

Thank you a lot but why it does not work with column , only works with row ?
Ahmed ibrahim almost 3 years

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).
Jitesh Mohite almost 3 years

try english with long text