Question

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

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

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

Answer 1

首先，您必须将flutter_localizations软件包添加到pubspec.yml

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

现在您有两种选择：

1。在所有设备上强制使用语言环境（和方向）

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    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。根据设备区域设置布局方向（如果用户电话的语言环境是RTL语言并且以supportedLocales存在，则您的应用以RTL模式运行，否则您的应用为LTR）

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    Locale("en", "US"),
    Locale("fa", "IR"), // OR Locale('ar', 'AE') OR Other RTL locales
  ],
  .
  .
  .
);

注释：颤抖的rtl语言是：

static const List<String> _rtlLanguages = <String>[
    'ar', // Arabic
    'fa', // Farsi
    'he', // Hebrew
    'ps', // Pashto
    'ur', // Urdu
  ];

Answer 2

您需要创建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 3

请检查Internationalization Flutter应用程序（阿拉伯语RTL） https://proandroiddev.com/internationalization-flutter-app-arabic-rtl-fe99bfae696e

Answer 4

通过在textDirection小部件中将rtl属性设置为Directionality，SfRangeSelector支持从右向左更改小部件的布局方向。

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

答案来自：https://help.syncfusion.com/flutter/range-selector/right-to-left

Answer 5

如果在文本字段中需要从右到左或从左到右。您可以在TextField中使用TextDirection

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

Answer 6

为整个应用设置RTL配置的最佳和最短的方法。

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

Answer 7

只需将此附加到您的材料应用程序：

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

从右向左（RTL）颤动

7 个答案: