10.10. Internationalization and localization in Flutter: Dynamic language change

10.10. Internationalization and Localization in Flutter: Dynamic Language Change

Internationalization and localization are essential parts of app development in Flutter, especially if you want to reach a global audience. Internationalization refers to the process of developing an application that supports multiple languages, while localization refers to the process of translating the application into a specific language.

Why are Internationalization and Localization important?

Imagine that you've built an awesome app that offers a great user experience, but it's only available in one language. This would significantly limit the number of people who can use your app, especially in such a globalized world. By internationalizing and localizing your app, you can reach a much wider audience and provide an even better user experience as users can interact with your app in their native language.

How to implement Internationalization and Localization in Flutter?

The first thing you need to do is add the necessary dependencies to your pubspec.yaml file. These dependencies include flutter_localizations and intl.

dependencies:
  flutter:
    sdk: flutter
  flutter_locations:
    sdk: flutter
  intl: ^0.17.0

Next, you need to import the necessary libraries into your main.dart file and add the location delegates to your application.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: [
        Locale('en', 'US'),
        Locale('es', 'ES'),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      localeResolutionCallback: (locale, supportedLocales) {
        for (var supportedLocale in supportedLocales) {
          if (supportedLocale.languageCode == locale.languageCode &&
              supportedLocale.countryCode == locale.countryCode) {
            return supportedLocale;
          }
        }
        return supportedLocales.first;
      },
      home: MyHomePage(),
    );
  }
}

This code defines which languages ​​your app will support (in this case English and Spanish) and how Flutter should choose the appropriate language based on the user's device settings.

How to create localization files?

The localization files are where you will store all your translated strings. You can create a file for each language your app supports. For example, you might have an en.dart file for English and an es.dart file for Spanish. Each file will contain a string map, where the key is the string identifier and the value is the translation.

// en.dart
const Map enUS = {
  'hello': 'Hello',
};

// es.dart
const Map esES = {
  'hello': 'Hello',
};

You can then use these localization files in your application to display the translated strings.

Text(AppLocalizations.of(context).translate('hello'))

Language Change on the fly

In some cases, you may want to allow users to change the application's language directly from within the application. For this, you can create a function that updates the application's locale.

void changeLanguage(Locale locale) {
  MyApp.setLocale(context, locale);
}

You can then call this function whenever the user selects a new language.

Conclusion

Internationalization and localization are essential parts of app development in Flutter. By supporting multiple languages, you can reach a wider audience and provide a better user experience. Fortunately, Flutter makes it relatively easy to implement internationalization and localization with the help of the flutter_localizations and intl libraries.

Next page of the Free Ebook:

144Internationalization and localization in Flutter: Pluralization support

3 minutes