Open In App

Flutter – Internationalization

Improve
Improve
Like Article
Like
Save
Share
Report

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 {
  // 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.



Last Updated : 15 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads