web-dev-qa-db-ja.com

フラッターの右から左（RTL）

Flutterを1週間以上使用していて、アラビア語（右から左）のアプリを作成したいと考えていました。

Internationalizing Flutter Apps を読んでいましたが、レイアウトの方向を設定する方法については言及していませんでした。

では、Flutterで右から左（RTL）レイアウトを表示する方法は？

layoutflutterright-to-leftdirection
14
AbdulMomen عبدالمؤمن

まず、flutter_localizationsパッケージをpubspec.ymlに追加する必要があります

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

現在、2つの選択肢があります。

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

注：flutterのRTL言語は：

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

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,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );
16
AbdulMomen عبدالمؤمن

国際化フラッターアプリ（アラビア語RTL）を確認してください https://proandroiddev.com/internationalization-flutter-app-arabic-rtl-fe99bfae696e

1
user2013047

テキストフィールドで右から左または左から右が必要な場合。 TextFieldでTextDirectionを使用できます

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

アプリ全体にRTL設定を設定するへの最良かつ最短の方法。

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