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.
Now let’s move to provider folder and create file
language_provider.dart . Then add the code to manage language state that user chooses.
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
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.
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.
Now you will found error red lines at
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.
languages_picker_widget.dart files in widgets folder. Let’s add some code in
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.
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
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 💙.