Internationalizing Your Flutter App with easy localization

Introduction

Internationalizing your Flutter app ensures it reaches a wider audience by supporting multiple languages and regions. Flutter localization can be streamlined with the easy_localization package, which handles loading and switching translation files, locale resolution, and text direction. In this guide, you’ll learn how to set up easy_localization, add translation JSON files, configure your Flutter project, and render localized strings in widgets—all within minutes.

Installing easy_localization

Start by adding easy_localization to your pubspec.yaml under dependencies:

dependencies:
  flutter:
    sdk: flutter
  easy_localization

Also include your translations directory under assets:

flutter:
  assets

Run flutter pub get to fetch packages and make assets visible to Flutter.

Adding Translation Files

Create a folder at assets/translations. Inside, add JSON files for each locale:

• assets/translations/en.json

• assets/translations/es.json

Example en.json:

{
  "hello": "Hello",
  "welcome": "Welcome to Flutter localization!"
}

Example es.json:

{
  "hello": "¡Hola",
  "welcome": "¡Bienvenido a la localización de Flutter!"
}

Ensure file names match the locale code (languageCode[_countryCode]).

Configuring main.dart

Wrap your root widget with EasyLocalization and specify supported locales, path, and fallback:

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en'), Locale('es')],
      path: 'assets/translations',
      fallbackLocale: Locale('en'),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      locale: context.locale,
      supportedLocales: context.supportedLocales,
      localizationsDelegates: context.localizationDelegates,
      home: HomePage(),
    );
  }
}

This configuration handles locale resolution automatically and falls back to English if a key is missing.

Localizing Widgets

Replace hard-coded strings with tr() calls:

• Import easy_localization: import 'package:easy_localization/easy_localization.dart';

• Use "key".tr() in Text widgets: Text('hello'.tr()), Text('welcome'.tr()),

To change locale on the fly, call:

ElevatedButton(
  onPressed: () => context.setLocale(Locale('es')),
  child: Text('Switch to Spanish'),
)

easy_localization will reload the translations and update your UI immediately.

Handling Plurals, Parameters, and Nested Keys

easy_localization supports advanced features: • Plurals:

// en.json
"items": "{count, plural, =0{No items} =1{1 item} other{{count} items}}"

Text('items'.tr(args: [], namedArgs: {'count': 3})),

• Parameters:

// en.json
"greet": "Hello, {name}!"

Text('greet'.tr(namedArgs: {'name': 'Steve'})),

• Nested keys:

// en.json
"user": {
  "profile": {
    "title": "Profile Settings"
  }
}

Text('user.profile.title'.tr()),

Testing and Hot Reload

With your app configured, leverage Flutter’s hot reload:

• Modify translation files, save changes, and trigger hot reload—your strings update instantly.

• Test locale fallbacks by temporarily renaming or removing a translation key.

• Verify text direction for RTL languages (e.g., add ar.json with "hello": "مرحبا" and include Locale('ar') in supportedLocales).

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

You’ve now implemented a full Flutter localization workflow using easy_localization: installed the package, added JSON resources, configured your MaterialApp, localized widgets, and handled plurals and parameters. This approach scales cleanly as your app grows to support dozens of languages.

With easy_localization, Flutter localization becomes straightforward and maintainable—allowing you to focus on UX and features rather than boilerplate. Start internationalizing your Flutter apps today, and reach users around the globe with minimal effort.