CODEWITHSUNDEEP
layoutflutterright-to-leftdirection
AbdulMomen عبدالمؤمن
AbdulMomen عبدالمؤمن

Reputation: 22327

right-to-left (RTL) in flutter

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?

Upvotes: 96

Views: 119133

Answers (7)

Abdurahman Popal
Abdurahman Popal

Reputation: 3009

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

Upvotes: 12

Zia Ullah
Zia Ullah

Reputation: 53

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

Upvotes: 1

adarsh
adarsh

Reputation: 531

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

Upvotes: 1

Mostafa Wael
Mostafa Wael

Reputation: 3828

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,
                    );
                  },
                ),
              );
            },

Upvotes: 2

DJafari
DJafari

Reputation: 13535

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
];

Upvotes: 207

CopsOnRoad
CopsOnRoad

Reputation: 267404

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(),
      ),
    ),
  );
}

Upvotes: 53

AbdulMomen عبدالمؤمن
AbdulMomen عبدالمؤمن

Reputation: 22327

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,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );

Upvotes: 45

Related Questions