Open In App

Flutter – Internationalization

Last Updated : 15 Jan, 2021
Like Article

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:

   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
  "helloWorld": "GeeksforGeeks",
  "displayText":"This is a sample App",
  "@helloWorld": {
    "description": "SampleApp for GeeksforGeeks"

And for the second file

Name: app_hi.arb
  "helloWorld": "गीक्स फॉर गीक्स ",
  "displayText":"यह एक सैंपल ऐप है"

Now restart the app so that app_localizations.dart file is generated in the  following directory:


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.



import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
void main() {
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (context) => AppLocalizations.of(context).helloWorld,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      theme: ThemeData(primarySwatch:,
      home: MyHomePage(),
class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).helloWorld),
      body: Center(
        child: Text(
          style: TextStyle(fontSize: 30),


We can switch Languages by changing the Language of the device in the settings.

Like Article
Suggest improvement
Share your thoughts in the comments

Similar Reads