Flutter - Internationalization - GeeksforGeeks

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.
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 {  // This widget is the root of your application.  @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.
android
Flutter
Picked
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Flexible Widget
Flutter - Stack Widget
Android Studio Setup for Flutter Development
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Flexible Widget
Flutter - Stack Widget
Flutter - Positioned Widget