How to Set Up Localization in the Flutter App

In today's interconnected world, effective communication across various languages is increasingly vital. With the growth of mobile apps, websites, and software platforms, the demand for translation and multi-language capabilities has become essential for provisioning a more inclusive and accessible user experience. As companies extend their operations internally, presenting content in multiple languages help them engage a broader audience, honor cultural differences, and align with the needs of their diverse user base.

In this blog, we will explore how to manage translation and multi-language supporting the intl and flutter_localizations packages.

Firstly, add the intl and flutter_localizations packages to your pubspec.yaml file as following terminal command:

flutter pub add intl:any
flutter pub add flutter_localization

Now add generate: true on pubspec.yaml file under flutter: like bellow:

flutter:
  uses-material-design: true
  generate: true

Now create l10n directory under lib, also add app_en.arb and app_es.arb under l10n directory.

For app_en.arb add content as bellow:

{
  "hello": "Hello",
  "welcome": "Welcome to the app"
}

For app_es.arb add content as bellow:

{
  "hello": "Hola",
  "welcome": "Bienvenido a la aplicación"
}

After adding these run the following command: flutter gen-l10n

After running the command, you can see a newly created directory named flutter_gen under the main project's .dart_tool as show in the image bellow:

Now, add the following content to the main.dart file's class.

 localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: Locale ('es'),
      supportedLocales: [
        Locale ('en'),
        Locale ('es')
      ],

If you add locale: Locale ('es'), your app will use Spanish as the language. If you do not specify a locale, the app will default to English.

Then change the title and contents of the build as bellow:

AppLocalizations.of (context)?.hello ?? 'Hello'

Below is the complete code that demonstrates how to add text with localization support for different languages:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
void main () {
  runApp (const MyApp ());
}
class MyApp extends StatelessWidget {
  const MyApp ({super.key});
  @override
  Widget build (BuildContext context) {
    return MaterialApp (
      title: 'Flutter Demo',
      theme: ThemeData (
        colorScheme: ColorScheme.fromSeed (seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      localizationsDelegates: [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: Locale ('es'),
      supportedLocales: [
        Locale ('en'),
        Locale ('es')
      ],
      home: const MyHomePage (title: ''),
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage ({super.key, requested this.title});
  final String title;
  @override
  State< MyHomePage> createState () => _MyHomePageState ();
}
class _MyHomePageState extends State< MyHomePage> {
  @override
  Widget build (BuildContext context) {
    return Scaffold
      appBar: AppBar (
        backgroundColor: Theme.of (context).colorScheme.inversePrimary,
        title: Text(AppLocalizations.of(context)?.hello ?? 'Hello',style: TextStyle (fontSize: 22,fontWeight: FontWeight.bold),),
      ),
      body: center
        child: Column (
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget> [
            Text(AppLocalizations.of (context)?.welcome ?? 'Welcome',style: TextStyle (fontWeight: FontWeight.bold,fontSize: 22),),
          ],
        ),
      ),
    );
  }
}

Incorporating translation and multi-language support into your Flutter app is essential for reaching a global audience and ensuring an inclusive user experience. By leveraging packages like intl and flutter_localizations, you can easily manage localization and provide content in multiple languages, making your app accessible to users from different cultural backgrounds.

In this blog, we demonstrated how to set up localization in Flutter, configuration language files for multiple languages (English and Spanish), and use the generated localization classes to display translated text in your app. With these steps, you can easily extend your app to support additional languages and create a more personalized experience for your users.

To read more about How to Take a Picture Using a Camera in Flutter, refer to our blog How to Take a Picture Using a Camera in Flutter.