Google’s Flutter is a very attractive app development platform. It allows to development of apps like android ios etc. based on a single codebase. It is compiled in machine language for its great performance. It is built with Dart language. As we create an app in Flutter in which we want to do localization, then we load it using the localization widget to see all the objects in which we have a collection of localized objects. ‘flutter_localizations’ library is used to set up localization in Flutter.
Hello friends, I will talk about my new blog on Localization / Multi-Language In Flutter. We will also implement a Localization / Multi-Language In Flutter. describe his properties, and use them in your flutter applications. So let’s get started.
Table Of Contents :
How To Implement Code In Dart File
Flutter Localization:
The Flutter localization widget is used to view and load objects from a collection of localized values. If we create an application and want to increase the use of the application, we have to support multiple languages in our apps.
With the help of localization, we can change the language of our application as android and ios is the most popular operating system of mobile so we using flutter localization will show localization on both types of device and will be localized for both field
Some Basic requirements of multiple languages.
- Flutter localization application works by default according to the language configured in the smartphone.
- If a language is not supported in the application, then English is the (en)default language of the language.
- The end-user can change the working language from a list of supported languages.
- When the user selects any of the other languages, the entire layout of the application is refreshed to display the values for the chosen language
Implementation :
You need to implement it in your code respectively :
Step 1: Add dependencies.
Add dependencies to pubspec — yaml file.
First, we will add flutter_localization and intl library to pubspec. yaml.
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutterdev_dependencies:
intl: ^0.17.0-nullsafety.2 flutter_test:
sdk: flutterStep 2: import the package :
import 'package:flutter_localizations/flutter_localizations.dart';Step 3: Run flutter package get
How to implement code in dart file :
Create a new dart file calledflutter_localization_demo inside the lib folder.
First, we create a dart file named l10n of the l10n package in which arb file initializes the to local list which contains all our languages which we provide in our project.
We have app_in. arb defines its language, which is a type of localization code, as an arb file is a kind of translator toolkit that is used as an input to a translation tool.
For Example:
app_en.arb, app_es.arb, app_id.arb, app_it.arb
We have initialized the English language in the app_en.arb file regarding the code given below.
Here is the code for app_en.arb:
{
"english_language": "English Language",
"hello_world": "Hello World"
}After this, we have created a class named LocalProvider, in which the value has been set and get with the help of the provider.
class LocaleProvider with ChangeNotifier {
Locale? _locale;
Locale? get locale => _locale;
void setLocale(Locale locale){
if(!L10n.all.contains(locale)) return;
_locale = locale;
notifyListeners();
}
}Localization adds for MaterialApp:
To implement localization in our application we will add MaterialApp widget supportedLocales and localizationsDelegates inside MyApp() class.
Add supportedLocales:
This is used to set all the languages we provide locally as it recognizes the US English language by default.supportedLocales: L10n.all,
Add localizationsDelegates in Material App:
- GlobalMaterialLocalizations.delegate is used to get localized strings and other values for material components.
- localizationsDelegates is a listed property in materialApp to get collection localized values from localizing delegates.
- GlobalWidgetsLocalizations.delegate is used to define the default text direction for the widgets library.
localizationsDelegates:[
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
AppLocalizations.delegate,
],After this, we will create a class named FlutterLocalizationDemo inside which we are using a dropdown button inside which we will set the value in our widget text and we have created a function named title which we will set the title of the language in which the language code, Country code, etc can be anything as soon as we select the language in the dropdown it will also change our given title.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.english_language,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
SizedBox(height:85.0),
DropdownButton(
value: lang,
onChanged: (Locale? val) {
provider.setLocale(val!);
},
items: L10n.all
.map((e) => DropdownMenuItem(
value: e,
child: _title(e.languageCode),
))
.toList())
],
),
)When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_localiztion_demo/l10n/l10n.dart';
import 'package:flutter_localiztion_demo/providers/locale_provider.dart';
import 'package:flutter_localiztion_demo/providers/localizations.dart';
import 'package:provider/provider.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => LocaleProvider()),
],
child: Consumer<LocaleProvider>(builder: (context, provider, snapshot) {
return MaterialApp(
locale: provider.locale,
localizationsDelegates:[
//AppLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
AppLocalizations.delegate,
],
supportedLocales: L10n.all,
home: FlutterLocalizationDemo(),
);
}),
);
}
}
class FlutterLocalizationDemo extends StatelessWidget {
const FlutterLocalizationDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
_title(String val) {
switch (val) {
case 'en':
return Text(
'English',
style: TextStyle(fontSize: 16.0),
);
case 'id':
return Text(
'Indonesia',
style: TextStyle(fontSize: 16.0),
);
case 'es':
return Text(
'Spanish',
style: TextStyle(fontSize: 16.0),
);
case 'it':
return Text(
'Italian',
style: TextStyle(fontSize: 16.0),
);
default:
return Text(
'English',
style: TextStyle(fontSize: 16.0),
);
}
}
return Consumer<LocaleProvider>(builder: (context, provider, snapshot) {
var lang = provider.locale ?? Localizations.localeOf(context);
return Scaffold(
appBar:AppBar(
title:Text('Localization Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.english_language,
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
),
),
SizedBox(height:85.0),
DropdownButton(
value: lang,
onChanged: (Locale? val) {
provider.setLocale(val!);
},
items: L10n.all
.map((e) => DropdownMenuItem(
value: e,
child: _title(e.languageCode),
))
.toList())
],
),
),
);
});
}
}
Conclusion:
In this article, I have explained Localization / Multi-Language In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Localization / Multi-Language. In the Flutter demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Localization / Multi-Language In Flutter. In Flutter in your flutter project. We showed you what the Localization / Multi-Language In Flutter is and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
