Building Multilingual Apps in Flutter: Localization & Internationalization

In today’s global market, it is essential to create mobile apps that cater to users from different regions and cultures. Flutter’s localization and internationalisation features enable developers to build multilingual apps that provide a seamless user experience across different languages. In this article, we will explore how to implement localization in Flutter, allowing your app to adapt to various languages and provide localised content. We will dive into code examples to demonstrate the process of setting up and using Flutter’s localization capabilities effectively.

Setting up Localization 

To get started with localization in Flutter, follow these steps:

Step 1: Add the flutter_localizations package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

Step 2: Import the required packages in your Dart file:

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'package:intl/date_symbol_data_local.dart';

Step 3: Initialize the localization delegates and supported locales:

void main() {
  initializeDateFormatting().then((_) {
    runApp(MyApp());
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        const Locale('en', 'US'), // English
        const Locale('es', 'ES'), // Spanish
        // Add more supported locales as needed
      ],
      home: MyHomePage(),
    );
  }
}

In this code example, we add the flutter_localizations package to our app’s dependencies. We then import the necessary packages, including flutter_localizations, intl, and intl/date_symbol_data_local.dart. Next, we initialize the localization delegates for Material, Widgets, and Cupertino (for iOS). We also specify the supported locales, such as English (‘en’, ‘US’) and Spanish (‘es’, ‘ES’). Add more supported locales based on your app’s requirements.

Using Localization

Once the localization setup is complete, you can start using it in your app. Here’s an example of how to display localised text using the Intl package:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          DateFormat.yMMMMd().format(DateTime.now()),
        ),
      ),
      body: Center(
        child: Text(
          Intl.message(
            'Hello, World!',
            name: 'helloWorld',
            desc: 'Greeting',
            locale: Locale('en', 'US'),
          ),
        ),
      ),
    );
  }
}

In this code example, we use the DateFormat class from the intl package to format the current date based on the device’s locale. We then use the Intl.message method to display a localized greeting message, which is retrieved based on the specified locale. In this case, the ‘Hello, World!’ greeting is displayed in English (‘en’, ‘US’).

Conclusion 

Congratulations on learning how to implement localization in Flutter! By following the steps outlined in this article, you can create multilingual apps that provide a localised user experience. Flutter’s localization and internationalisation features enable your app to adapt to different languages and cultures seamlessly. Incorporate these techniques into your app to cater to a broader audience and deliver a personalized experience.