Corporate Training
Request Demo
Click me

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

VIEW ALL LEADERSHIP PROGRAMS
 
 
 
Digital Marketing Courses
 
 
Corporate Training
Request Demo
Click me

100+ Popular IT Courses to Learn.

15+ Categories. 500+ IT Courses to Learn.

Leadership Program

VIEW ALL LEADERSHIP PROGRAMS
 
 
 
Digital Marketing Courses
 
 
Menu
Let's Talk
Request Demo

Tutorials

Internationalization and Localization

20. Internationalization and Localization

Internationalization (often abbreviated as i18n) and localization (l10n) are essential for making your Flutter app accessible to users from different regions who speak various languages. In this tutorial, you'll learn how to internationalize and localize a Flutter app, allowing it to adapt to different languages and cultures.

Prerequisites

Before you start, make sure you have Flutter and your development environment set up.

1. Internationalization Setup

Step 1: Add the 'flutter_localizations' Package

In your 'pubspec.yaml' file, add the 'flutter_localizations' package as a dependency:
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
 

Run 'flutter pub get' to fetch the package. 

Step 2: Import the Required Libraries

In your Dart code, import the necessary libraries:
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'package:easy_localization/easy_localization.dart'; // Optional but recommended for easier localization management
 

Step 3: Configure Your App for Internationalization

In your 'main.dart' or main entry file, configure your app to use internationalization:
void main() {
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('es', 'ES')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: MyApp(),
    ),
  );
}
 

In this example, we use the 'easy_localization' package to manage translations easily. Make sure to replace the supported locales and the path to your translation files accordingly.

2. Creating Translation Files

Create translation files for each supported language and place them in the specified path (e.g.,'assets/translations'). These files should be named according to the locale they represent, like 'en_US.json' and 'es_ES.json'.

Here's an example of a translation file ('en_US.json'):
{
  "welcome": "Welcome to My App",
  "greeting": "Hello, {name}!",
  "buttonLabel": "Press Me"
}
 
And the Spanish translation file ('es_ES.json'):
{
  "welcome": "Bienvenido a Mi Aplicación",
  "greeting": "¡Hola, {name}!",
  "buttonLabel": "Presióname"
}
 

3. Using Translations in Your Flutter App

Step 1: Load Translations

In your main app widget, load translations using 'EasyLocalization':
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Localization Tutorial',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: HomeScreen(),
    );
  }
}
 

This ensures that the app uses the selected locale for translations.

Step 2: Display Translated Text

To display translated text, use the 'tr' function provided by the 'easy_localization' package:
Text('welcome'.tr())
 
You can also interpolate variables into translated strings:
Text('greeting'.tr(namedArgs: {'name': 'Alice'}))
 

Step 3: Change the App Language

To change the app's language dynamically, you can use a button or a settings screen. Here's an example of changing the language when a button is pressed:
FlatButton(
  onPressed: () {
    context.setLocale(Locale('es', 'ES'));
  },
  child: Text('Switch to Spanish'),
)
 

This code changes the app's locale to Spanish when the button is pressed, which will update the UI with Spanish translations.

4. Testing and Verification

Run your app on a device or emulator. Ensure that:

  • Translations are displayed correctly when you change the app's locale.
  • Variables are interpolated correctly into translated strings.
  • The app gracefully falls back to the default language if a translation is missing.

Conclusion:

Internationalization and localization are essential for making your Flutter app accessible to a global audience. By following the steps in this tutorial, you can easily set up internationalization, create translation files, and display translated content in your app. This approach ensures a more inclusive and user-friendly experience for users from different linguistic backgrounds.