Easily integrate Multi-Language in Flutter App
Multi-language support in your application is very important to cover global market. Many tutorials are available for Flutter Localization & Integrate multi-language support in Flutter but I made a very easy tutorial for add multi-language in Flutter app. Also this tutorial helpful for beginners to learning about Flutter Localization.
Here is the complete demo app with full source code for Flutter Localization & Multi-Language support in Flutter.
Why Multi-Language?
Adding multi-language support in application is crucial for global accessibility, enhanced user experience, market expansion, cultural sensitivity, competitiveness, and adaptability to user preferences. It ensures a wider audience, increased satisfaction, and a strategic edge in a diverse and competitive landscape.
Getting Stated with Multi-Language :
First you need to create a new Flutter project with follow this steps :
- Open your terminal or command prompt.
- Enter the following command :
flutter create multi_language_app
Add Dependency :
By default, Flutter only provides US English localizations. So, need to add flutter_localizations
as a dependency to your pubspec.yaml
file. As of December 2023, this package supports 115 languages and language variants.
Open the pubspec.yaml
file and make the following changes:
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
shared_preferences: ^latest_version
Add the Languages :
First create the language
folder under your lib
folder. Then create create the language.dart
file in language
folder. After that create an abstract class which contains all localized strings. We need to define all localized texts in different language string files which is looks like below :
After that you can create other Languages class as per your requirement and extend Languages class and overrides all strings. Here I added the three languages which is English, Arabic, and Hindi.
Here is the my language_en.dart
file :
Here is the my language_ar.dart
file :
Here is the my language_hi.dart
file :
Create LocalizationsDelegate :
The LocalizationDelegate
in Flutter is required for multi-language support as it manages the localization logic, allowing the app to dynamically switch between different languages.
AppLocalizationsDelegate is the key file for localization. Create a class and extend LocalizationsDelegate and give our created Languages class in a generic parameter. After that you need to override with 3 methods which is isSupported, load and shouldReload. So, now create the localization
folder under your lib
folder. Then create create the delegation.dart
file in localization
folder which is as per below :
Setup the main.dart
file :
Need to create the MyApp class with StatefulWidget because whenever changing language at time whole app rebuild and reflect with the new language. So, first need to set some properties in MaterialApp Widget.
We need to add MaterialApp widget supportedLocales and localizationsDelegates inside MyApp() class like below :
supportedLocales: const [
Locale('en', ''),
Locale('ar', ''),
Locale('hi', ''),
],
localizationsDelegates: const [
AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
Here is the full source code for the main.dart
file :
Also you can use the SharedPreference for store language locale & get locale which we used in main class. I have defined it in the constant.dart file.
When run the application, we ought to get the screen’s output like the underneath screen capture.
Conclusion :
In this blog, we learned about the multi-language support in Flutter, exploring how to create a truly globalized app that caters to a diverse audience. From handling localization and internationalization to implementing language-switching mechanisms.
By incorporating robust language support in your Flutter applications with me, you not only enhance user accessibility but also will open doors to new markets and opportunities.
❤ ❤ Thanks for reading this article ❤❤
Codeklips
Thank you for reading until the end. Before you go:
- Please consider clapping and following the writer! 👏
- Follow us on Twitter(X), LinkedIn, Instagram, and YouTube.
- Visit Codeklips.com to find out more about how we are democratising free programming education around the world.