right-to-left (RTL) in flutter - layout

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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