Flutter – Internationalization
Last Updated :
15 Jan, 2021
Internationalization refers to the term that an app is available in different regional languages for better reach to people. For this, we have to make an app available in different languages and suitable layouts for them. Flutter provides methods to internationalize the app. We will be discussing how to localize a MaterialApp.
Flutter supports 78 different languages. By default, English (US) is the localized language.
Setting up the App:
First, we have to add the below lines of code in the pubspec.yaml dependencies file as shown below:
dependencies:
flutter:
sdk: flutter
flutter_localizations: # ADD
sdk: flutter # ADD
intl: ^0.17.0-nullsafety.2 # ADD
And in the flutter section in pubspec.yaml add the code :
generate: true
Click on the pub get to get all the dependencies.
Now create a new yaml file (as l10n.yaml) in the root directory of the project with the following content:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
Add a directory named l10n in the lib directory and then add the files for the languages. Here we will be adding data for two languages i.e. English and Hindi.
Name: app_en.arb
Content:
{
"helloWorld": "GeeksforGeeks",
"displayText":"This is a sample App",
"@helloWorld": {
"description": "SampleApp for GeeksforGeeks"
}
}
And for the second file
Name: app_hi.arb
Content:
{
"helloWorld": "गीक्स फॉर गीक्स ",
"displayText":"यह एक सैंपल ऐप है"
}
Now restart the app so that app_localizations.dart file is generated in the following directory:
<project_dir>.dart_tools/flutter_get/genl10n
Now we have to write below lines of codes to make the app internationalize –
First, we have to import app_localizations then we have to add the following two properties to the MaterialApp as
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
- localizationsDelegates property: It defines all the localized resources for the application.
- supportedLocales property: It provides a list of languages supported by the app.
- onGeneratedTitle property: It is called after the widget is set up which means localization is available.
Example:
Dart
import 'package:flutter/material.dart' ;
import 'package:flutter_gen/gen_l10n/app_localizations.dart' ;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
onGenerateTitle: (context) => AppLocalizations.of(context).helloWorld,
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
theme: ThemeData(primarySwatch: Colors.green),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context).helloWorld),
),
body: Center(
child: Text(
AppLocalizations.of(context).displayText,
style: TextStyle(fontSize: 30),
),
),
);
}
}
|
Output:
We can switch Languages by changing the Language of the device in the settings.
Share your thoughts in the comments
Please Login to comment...