颤振从右向左(RTL)

我已经使用 Flutter 一个多星期了,想要创建一个阿拉伯语(从右到左)的应用程序。

我在读 Flutter Apps 国际化,但它没有提到如何设置布局方向。

那么,如何显示右向左(RTL)布局在颤振?

80844 次浏览

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

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

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

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

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