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

Question

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

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

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

Answer 1

Пожалуйста, проверьте приложение интернационализация флаттер (арабский RTL) https://proandroiddev.com/internationalization-flutter-app-arabic-rtl-fe99bfae696e

Answer 2

сначала вы должны добавить 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 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,
                    );
                  },
                ),
              );
            },
          .
          .
          .
        );