layoutflutterright-to-leftdirection

right-to-left (RTL) in flutter


I was using Flutter more than a week, and wanted to create an Arabic (right-to-left) app.

I was reading Internationalizing Flutter Apps, but it didn't mention how to set the layout direction.

So, how to show right-to-left (RTL) layout in Flutter?


Solution

  • you have two choices :

    1. force a locale ( and direction ) on all devices

    -- method 1: with localization

    add flutter_localizations package to your pubspec.yml

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

    then

    import 'package:flutter/material.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';
    
    MaterialApp(
      localizationsDelegates: [
        GlobalCupertinoLocalizations.delegate,
        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,
      .
      .
      .
    );
    

    -- method 2: without localization

    MaterialApp(
      .
      .
      .
      builder: (context, child) {
        return Directionality(
          textDirection: TextDirection.rtl,
          child: child,
        );
      },
      .
      .
      .
    );
    

    2. set layout direction according to device locale ( if user phone locale is a RTL language and exist in supportedLocales, your app run in RTL mode, otherwise your app is LTR )

    add flutter_localizations package to your pubspec.yml

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

    then

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

    note : rtl languages in flutter are:

    [
      'ar', // Arabic
      'fa', // Farsi
      'he', // Hebrew
      'ps', // Pashto
      'ur', // Urdu
    ];