Flutter & i18n in a nutshell

During my first steps in develop some Flutter apps I came across - as always - the requirement for adding internationalization. In Flutter it's a three steps way to go to have i18n in your widgets. First of all you have to create a class to present your strings to the widget, then you have to run a command on the command line to generate a file which contains the basis of the translation which you then can translate yourself and finally you need to run another command to have a class generate which basically resolve the right translation for the requested string ... and don't forget to add some dependencies to the pubspec.yaml :).

    sdk: flutter
    sdk: flutter
  flutter_cupertino_localizations: ^1.0.1
  intl: ^0.15.8

    sdk: flutter
  intl_translation: ^0.17.1

Here it is in a nutshell:

  1. Create your app localization class
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'i18n/messages_all.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) {
    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);

  String get title {
    return Intl.message(
      'Hello World',
      name: 'title',
      desc: 'Title for the Demo application',

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  bool isSupported(Locale locale) => ['en', 'de'].contains(locale.languageCode);

  Future<AppLocalizations> load(Locale locale) => AppLocalizations.load(locale);

  bool shouldReload(AppLocalizationsDelegate old) => false;

** Sample code taken from https://proandroiddev.com/flutter-localization-step-by-step-30f95d06018d

Change the MaterialApp creation

class MyApp extends StatefulWidget {
  State<MyApp> createState() => MyAppState();

class MyAppState extends State<MyApp> {
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        const AppLocalizationsDelegate(),
      supportedLocales: [
        const Locale('en', ''),
        const Locale('de', ''),
      title: 'MyApp',
      home: MyWidget()


class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).title()),
      body: Center(
        child: Text('Hello World'),


2. Run the command on the command line

flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/i18n lib/localizations.dart

As you can see I've put my above localization class code to a file called localizations.dart and I want to have the generated stuff in the i18n dir.

3. Run the command the generates the the dart class to retrieve the translated elements

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/i18n --no-use-deferred-loading lib/localizations.dart lib/i18n/intl_*.arb

See the part with intl_*, which are files with names like intl_en.arb and intl_de.arb which contain the same content als the in step 2 generated file intl_messages.arb

That's it, now you're good to go and you can use these translations in your code like


Some usefule links: