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

user_5106574 · Answer

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:

user_11698662 · Answer

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.

user_438497 · Answer

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

flutter how to Create right to left (rtl) App

3 Answers