颤动中的从右到左 (RTL)

Question

我使用 Flutter 已经超过一周了，想要创建一个阿拉伯语（从右到左）应用程序。

我正在阅读Internationalizing Flutter Apps，但它没有提到如何设置布局方向。

那么，如何在 Flutter 中显示从右到左（RTL）布局？

Answer 1

你有两个选择：

1。在所有设备上强制使用区域设置（和方向）

-- 方法1：本地化

将

flutter_localizations

包添加到您的

pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

然后

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

-- 方法2：无本地化

MaterialApp(
  .
  .
  .
  builder: (context, child) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: child,
    );
  },
  .
  .
  .
);

2。根据设备区域设置设置布局方向 （如果用户手机区域设置是

RTL

语言并且存在于

supportedLocales

中，则您的应用程序以

RTL

模式运行，否则您的应用程序为

LTR

）

将

flutter_localizations

包添加到您的

pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

然后

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

注意：flutter 中的 RTL 语言有：

[
  'ar', // Arabic
  'fa', // Farsi
  'he', // Hebrew
  'ps', // Pashto
  'ur', // Urdu
];

Answer 2

为整个应用程序设置

RTL

配置的最佳和最短的方法。

void main() {
  runApp(
    MaterialApp(
      home: Directionality( // add this
        textDirection: TextDirection.rtl, // set this property 
        child: HomePage(),
      ),
    ),
  );
}

Answer 3

您需要创建一个 Builder 并使用

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

如果您需要反向显示文本，只需将其

textDirection

属性设置为

TextDirection.rtl

。

TextField 小部件的示例代码，

TextField(
  textDirection: TextDirection.rtl,
  decoration: InputDecoration(
    labelText: "Enter Pashto Name",
  ),
),

文本小部件的示例代码，

    Text(
      "This text is in the other direction!"
      textDirection: TextDirection.rtl,
    ),

Answer 5

只需将其附加到您的材料应用程序中即可：

 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

如果您使用 flutter_localizations： sdk：颤动

添加这些行来更改您的应用程序方向

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