справа налево (RTL) в флаттере

Я использовал Flutter более недели и хотел создать приложение на арабском (справа налево).

Я читал Интернационализацию приложений Flutter, но там не упоминалось, как установить направление макета.

Итак, как показать расположение справа налево (RTL) во Flutter?

ОТВЕТЫ

Ответ 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
  ];

Ответ 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,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );

Ответ 4

Если вам нужно справа налево или слева направо в текстовом поле. Вы можете использовать TextDirection в TextField

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

Ответ 5

Лучший и самый короткий способ установить конфигурацию RTL для всего приложения.

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