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?
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?
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
];
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,
);
},
),
);
},
.
.
.
);
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(),
),
),
);
}
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,
),
The SfRangeSelector supports changing the layout direction of the widget in the right-to-left direction by setting the textDirection
property to rtl
in the Directionality
widget.
SfRangeValues _initialValues = SfRangeValues(4.0, 8.0);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Directionality(
textDirection: TextDirection.rtl,
child: Center(
child: SfRangeSelector(
min: 2.0,
max: 10.0,
interval: 1,
showLabels: true,
showTicks: true,
initialValues: _initialValues,
child: Container(
color: Colors.pink[200],
height: 150,
),
),
)
),
)
);
}
Ans From: https://help.syncfusion.com/flutter/range-selector/right-to-left