Table of contents

Introduction

Steps required to internationalize an app

Complete Code for Internationalization

Frequently Asked Questions

4.1.

What is internationalization in flutter?

4.2.

How many languages are supported in flutter?

4.3.

What is localization in flutter?

4.4.

What are the benefits of internationalization?

Conclusion

Last Updated: Mar 27, 2024

Medium

Flutter internationalization

Author Navrachit Kulshrestha

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

Internationalization refers to the term that a single app is available in different languages for the convenience of the local population. Almost eight of the top ten countries for app downloads do not adhere to the English language, and localized apps also generate more revenue. Keeping these two facts in mind, it becomes necessary to internationalize our app to reap the benefits of the local population which does not understand English.

Flutter has widgets and classes that help with internationalization and the flutter libraries are themselves internationalized. This article will explore various steps to internationalize our apps using MaterialApp and CupertinoApp classes.

Steps required to internationalize an app

Follow the steps given below to implement internationalization in your app.

1. First, add the following lines of code to the pubspec.yaml dependencies file, as shown below:

flutter_localizations: 
   
   sdk: flutter         
 
 intl: ^0.17.0-nullsafety.2

Add the following code to the flutter section of pubspec.yaml:

generate: true

To get all the dependencies, click on the pub get.

2. Now, in the project's root directory, create a new yaml file (as l10n.yaml) with the following content:

arb-dir: lib/l10n

template-arb-file: app_en.arb

output-localization-file: app_localizations.dart

3. In the lib directory, create a directory called l10n and add the language files. We will be uploading statistics for two languages, English and Hindi, in this section.

a. Create a file with the name app_en.arb and paste the following code

{
  "helloNinja": "Coding Ninjas",
  
  "displayText":"Hello Ninja",
  
  "@helloNinja": {
  
      "description": "Hello Ninja"
  }
}

b. Create another file with the name app_hi.arb and paste the following code.

{
  "helloNinja": "कोडिंग निन्जास ",
  
  "displayText":"नमस्ते निंजा"
}

4. Now restart the app to produce the app localizations.dart file in the following directory:

<project_dir>.dart_tools/flutter_get/genl10n

5. Now we must write the following lines of code to internationalise the app -

localizationsDelegates property: It defines all of the application's localised resources.
onGeneratedTitle property: It is called when the widget has been configured, indicating that localization is enabled.
supportedLocales property: It displays a list of the languages that the programme supports.

Complete Code for Internationalization

Paste the code given below and you will get the following output:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  // Rootwidget 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.blue),

      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).helloNinja),

      ),

      body: Center(

        child: Text(

          AppLocalizations.of(context).displayText,

        ),
      ),
    );
  }
}

Output:

Are you preparing for roles based on Flutter? Check out Flutter Interview Questions and crack the interviews.

Frequently Asked Questions

What is internationalization in flutter?

Internationalization refers to the term that a single app is available in different languages for the convenience of the local population.

How many languages are supported in flutter?

As of 2020, 78 languages are supported in flutter.

What is localization in flutter?

Localization is the process of making an app available to other locales. It includes the parameters defining the user’s language, region, and any particular variant — for example, en-US (American English).

What are the benefits of internationalization?

Eight of the top ten countries for app downloads are not English-speaking countries; according to Sensor Tower also, localized apps are downloaded almost 128% times as often and earn 26% more revenue than the English apps, according to Distimo. Hence internationalization of apps is very beneficial for both developers as well as the users.

Conclusion

In this article, we have extensively discussed internationalization in flutter and seen its execution.

After reading about flutter internationalization, are you not feeling excited to read/explore more articles on the topic of flutter? Don't worry; Coding Ninjas has you covered. To learn, see guided path for flutter, flutter basics, flutter Interview questions, flutter navigation and flutter advance concepts .

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc, you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!