Internationalization Flutter app (Arabic RTL)

Mohammad Saeed
ProAndroidDev
Published in
2 min readJun 2, 2018

Usually when developing apps for Middle East and North Africa, it requires to open in Arabic regardless of the device language. With option to change the language from the app to English or keep the Arabic version.

What will we build?

Change language from Arabic to English-Flutter

This article will cover

1- Load Flutter app in Arabic language RTL by default

2- Option to change to English LTR and return back to Arabic

Before we start you should be familiar with

Internationalizing Flutter Apps: Flutter have a great documentation about it and Tensor has a great explanation of how can I learn more abou localize and internationalize applications at https://youtu.be/IhsHGJEOSYM

Scoped Model : Which we can learn more about at https://youtu.be/RS36gBEp8OI

The main idea

  • Using MaterialApp’s locale property: The initial locale for this app’s [Localizations] widget.If the `locale` is null the system’s locale value is used.
  • Convert the root widget of the application to Stateful widget. That will cause rebuild based on the locale and direction we specify.
  • Using Scope Model to save the used local, change it when requied and update all childs to use the new locale.

Implementation

Packages

By default Flutter only provides US English localization. To add support for other languages, an application must specify additional MaterialApp properties, and include a separate package called flutter_localizations.

Also intl package to support message translation, and scoped_model that allow easily pass a data Model from a parent Widget down to it’s descendants

Localization Delegates

The elements of the localizationsDelegates list are factories that produce collections of localized values.

ScopeModelWrapper

Wrap our app with scope model to save/change the current locale, and to separate the interface from the logic.

Calling “changeDirection” from any where in the app will change the locale.

MyApp

  • This is the material app as Stateless widget, and it rebuild and update direction whenever the model change value (cause we used notifyListeners).

locale property: is the locale used when the app first run. The initial locale for this app’s Localizations widget. If the locale is null the system’s locale value is used.

Login

Finally, simple TextFormField widget to test the localization and direction. The language button change the local and direction by calling “model.changeDirection();”.

The Scope model then notifiy all it’s listeners.

Finally, you can grab the full source code

Base project that you can get and start directlly

Published in ProAndroidDev

The latest posts from Android Professionals and Google Developer Experts.

Written by Mohammad Saeed

Senior Business Analyst @MofaQatar_EN and now a @flutterio & @dart_lang Lover

Responses (7)

What are your thoughts?

السلام عليك ورحمة الله وبركاته
اخي الكريم
تتبعت الكود ولم اجد شي
أين يتم التغيير

--

Amazing Mohamad.
Thanks a lot for sharing.

--

Nice and useful Note. Thank you.

--