Make your Flutter app support multiple Languages (Localization) natively Part 2

In previous article, we have config localization in Flutter. In this part we will try to implement it. But before we create UI widgets, let’s add provider package in pubspec.yaml file to managing language state so when we want change language we don’t need to go to system setting in our device, we can change it on app in real time.

pubspec.yaml

Now let’s move to provider folder and create file language_provider.dart . Then add the code to manage language state that user chooses.

language_provider.dart

As you can see there in one property with default value Locale(‘en’) so for default language will be English and also we have setter getter method to expose property.

Let’s register our provider to our main.dart file.

main.dart

As you can see we wrap our MaterialApp with ChangeNotifierProvider because changes language state is happen in MaterialApp level. Then you can see for code locale: Provider.of<LanguageProvider>(context).locale this code to inform MaterialApp what language that choosed by user and will automatically change when user change to other language. Maybe you mention it, in this class we have already using localization text for app title.

Next let’s make our HomePage widget, create file home_page.dart in pages folder and add some code to create UI Widget.

home_page.dart

From our HomePage we already using localization text on AppBar title and 2 Text widget on bottom of Flutter logo. So let’s look at this code AppLocalizations.of(context)?.greeting('Alfi') . As i mention it before, localization can take a parameter so this is make our localization text more dynamically.

app_en.arb

Now you will found error red lines at LanguageFlagWidget() and LanguagePickerWidget() because we haven’t create it. But before that, let’s move to l10n.dart file to create getter method for country flag and country name.

l10n.dart

Next create language_flag_widget.dart and languages_picker_widget.dart files in widgets folder. Let’s add some code inlanguage_flag_widget.dart first.

language_flag_widget.dart

At above code, we use Consumer widget to listen when the state of language that chooses by user changes. Then the value that have we retrieve from provider is Locale() object where it can return language code. This language code that we used to determine which flag country that will we show to user.

Okay now let’s move to languages_picker_widget.dart and add some code to change language.

languages_picker_widget.dart

In this class we create a PopupMenuItem where the item is list of available languages and when user click one of them will return language code and then we update tour provider with selected language code. So every widget that listen to LanguageProvider will get update data (language code) automatically when LanguageProvider updated.

In the end our structural folders and files for our project will like this

Structure folders and files

Don’t forget to fix error code in home_page.dart and main.dart before we run the project. Then when we running the project will like this.

Congratz, we already implement localization on our Flutter App and that’s it we are at the end.

You can see and download completed project in here

Thank you for taking your time to read this long post and keep fluttering 💙.