Localizing your Flutter app into multiple languages
Want to build the next app which will take over the world? Well to do so Localization is the key!
Localization is the ability to translate an app’s text and non-text elements into a different language. In this tutorial we will see how to integrate localization into your flutter application for text elements with ease.
You can also watch the video tutorial for this article: https://youtu.be/oxJG-EKyRj8
1. Manage dependencies
Add the following lines to your pubspec.yaml file
2. Create new files and folders
To handle localizations we will need to create the following files and folder structure in your lib/ folder
Each of the app_<language_code>.arb file will contain the translation of our text to that particular language
3. Create a l10.yaml file
This file will reference our language folder and default language file
4. Define the locales we will be working with
Inside l10n.dart, create a class which keeps all the locales we will offer in the application
5. Add translations to .arb files
In the newly created app_<language_code>.arb files add a Key-Value pair of text and its translation into that language.
6. Configure the main widgets in our app
Restart your app if your app is already running. Then in main.dart add the following import statements:
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';After these imports add the Localization delegates to the Material App widget in your main.dart. Note that app_localizations.dart file will be autogenerated when you restart your application.
The Locale you set here in MaterialApp widget will be the Locale that your application will follow. You can try changing the locale to Locale(‘hi’) and you’ll see that your app language text will change.
For actual production applications you need to configure this locale with your state management solution like Provider or Riverpod to automatically store and fetch user’s preferred localization at the time of app loading.
7. Finally use your localized text in your Text widget
You can access all the keys we have created in our app_<language_code>.arb files using the given syntax
Conclusion
In this article we have discussed how to implement basic Localization of text elements in a Flutter application. There are still a lot of features/tricks that we can cover, for example we can set a variable field in our value, or we can define singular and plural translations of words and so on
To learn more features you can visit official documentation or comment down below for me to write another article on those topics.
Thanks!
