web-dev-qa-db-fra.com

de droite à gauche (RTL) en flottement

J'utilisais Flutter depuis plus d'une semaine et je voulais créer une application arabe (de droite à gauche).

Je lisais Internationalizing Flutter Apps , mais il ne mentionnait pas comment définir la direction de la mise en page.

Alors, comment afficher la disposition de droite à gauche (RTL) dans Flutter?

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

vous devez d'abord ajouter flutter_localizations package à votre pubspec.yml

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

vous avez maintenant deux choix:

1. forcer une localisation (et une direction) sur tous les appareils

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. définissez la direction de la mise en page en fonction des paramètres régionaux de l'appareil (si les paramètres régionaux du téléphone de l'utilisateur sont une langue RTL et existent en supportedLocales, votre application s'exécute en mode RTL, sinon votre application est 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
  ],
  .
  .
  .
);

note: les langues rtl en flutter sont:

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

Vous devez créer un Builder et lui passer la direction de la mise en page en utilisant 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 عبدالمؤمن

Veuillez vérifier l'application Internationalization Flutter (RTL arabe) https://proandroiddev.com/internationalization-flutter-app-arabic-rtl-fe99bfae696e

1
user2013047

Si vous avez besoin de droite à gauche ou de gauche à droite dans le champ de texte. vous pouvez utiliser TextDirection dans TextField

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

Le meilleur et le plus court chemin pour définir la configuration RTL pour toute l'application.

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