September 6, 2022

Making your app available for multiple locales is important. And for that, you need to localize your app. It will help you scale your audience to the maximum because a larger reach drives more traffic and leads, ultimately. Let’s get to know how to localize an app step-by-step. 1. Adding Dependencies In the very first step of the Flutter app localization, you need to add the dependencies into the “pubspec.yaml” file. You’ll need to add ‘flutter_localizations’ and ‘intl’ packages into your Flutter project. Go to the pubspec.yaml file from your Flutter app and add the following code: 2. Creating the l10n.yaml file After adding the dependencies, now you have to create the “l10.n.yaml” file. This file contains all the localization classes that you generate using any localization generator or do it manually. Use the code as: Here, the ‘arb-dir’ defines the directory where the input files can be found. This directory has the message catalogs in the “.arb” format. Moreover, there is a ‘template-arb-file’ that specifies all the messages that your application can support. And lastly, there is the ‘output-localization-file’ that defines the main dart class file that your application will import. 3. Creating the template ARB or lib/l10n/app_en.arb file After defining the path of the ARB files in l10n.yaml file you need to create a template .arb file. This template is specific for a particular locale. You’ll need to create the template .arb files for each language in case your app supports multiple languages. Here, we will go with the English language first. The name or the key of each message that you represent here will become the name of the Dart method. The application will use that message or the Dart method to show the localized value of its. In short, a message name like “helloWord” should have a valid value present in the .arb file. 4. Integration of Localization Classes Now that we have created the template .arb file, it’s time to integrate these localization classes with your Flutter app. Use the following code to automatically integrate the localization classes. Overriding Localization Localizations.override is a factory constructor for localization in Flutter that allows you to localize or translate a particular screen or a section of your app in a different language than the language/locale that your device is already configured in. Let’s give you an example so you can have a clear idea of how overriding works. As you hot reload the app, you will notice that the syntax AppLocalizations.of(context).helloWorld will return the strings in the Spanish locale while it shouldn’t have. This is because of using the localizations.override constructor. What Now? You must not underestimate the potential of making your app available for multiple locales. App localization can help scale your online presence to the next level. The reason behind this is that localization adds an extra value to your app that more people can leverage. App localization is not limited to the language only but also the customs, history, taste, and traits as well. If you’re looking for a trusted and reputable Flutter app development company to turn your business ideas into real-world mobile, web, or desktop apps then FlutterDesk is the perfect place for that. Or if you’re facing any issues in any of your tech-related projects, just reach out to us and our team will help you solve them. We at FlutterDesk strive to help Flutter developers in every way possible.