Search⌘ K
Home/
Courses/
The Complete Guide to Flutter

Internationalization in Flutter

Learn to internationalize your Flutter application.

We'll cover the following...

Overview

If our application is accessed and used by people speaking different languages, we’ll need to internationalize it.

The application below is in English only; we’ll internationalize it to add Spanish translations.

Note: The code in the code widget below will not successfully compile until you’ve completed step 3 given below.

// TODO-9: Import Dart UI library

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

// TODO-5: Import your app localization class

import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Internationalization Demo',
      // TODO-6: Set your localization delegates and supported locales here
      theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: false),
      home: const HomePage(),
      // TODO-10: Set localeResolutionCallback to support web
      debugShowCheckedModeBanner: false,
    );
  }
}
Internationalizaton lesson example starter code

Preparing to internationalize the application

  1. Go to the pubspec.yaml file and replace # TODO-1: Add flutter_localizations and intl packages (line 13) with the following lines under the dependencies key:
    flutter_localizations:
        sdk: flutter
    intl: ^0.18.0

The lines above will add flutter_localizations and intl packages as your application’s dependencies.

  1. Still in pubspec.yaml, replace # TODO-2: Enable code generation with the line below. The key should be under the flutter key in the YAML file.
generate: true

Enabling the generate flag ...