Search⌘ K
AI Features

Internationalization in Flutter

Explore how to internationalize a Flutter application by adding support for multiple languages, including configuring localization files and integrating translations. Understand enabling code generation, setting localization delegates, and implementing locale resolution to offer seamless language switching on Android, iOS, and web platforms.

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
...