# Localizing Your Flutter App with Easy_Localization

![Localizing Your Flutter App with Easy_Localization](https://miro.medium.com/v2/resize:fit:700/1*p3WuNj4EzEFN0YM21Kjtow.jpeg)

Creating an app that caters to a global audience means breaking language barriers and making it accessible to people from different regions. Flutter, a powerful framework for building cross-platform applications, makes this possible through various localization libraries. One such solution is **Easy\_Localization**, which simplifies the process of translating and localizing your Flutter app. This guide will walk you through making your app multilingual and cover how to handle date, time, and number formats.

## Why Localize Your Flutter App?

Localization involves adapting your app to suit different languages and regions. Beyond translating text, it also involves formatting dates, times, numbers, and currencies to match user expectations. This personalization enhances the user experience and helps your app succeed in international markets.

Flutter provides solid support for localization, and using a library like **Easy\_Localization** can make the implementation far less complicated. The **Easy\_Localization** package provides tools to help manage translations and formatting in an intuitive way.

## Setting Up Easy\_Localization

To get started, you will first need to add the **Easy\_Localization** package to your Flutter project. Add the following dependency to your `pubspec.yaml` file:

```plaintext
dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0 # Use the latest version
```

Once added, make sure to run `flutter pub get` to fetch the new dependency.

## Configuring Your Flutter App

The next step involves setting up **Easy\_Localization**. You need to wrap your app widget with `EasyLocalization` to provide localization support to your entire app.

Modify your `main.dart` file as follows:

```plaintext
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', 'US'), Locale('es', 'ES')],
      path: 'assets/translations', // <-- path to the translation files
      fallbackLocale: Locale('en', 'US'),
      child: MyApp(),
    ),
  );
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localization Demo',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: HomePage(),
    );
  }
}
```

## Creating Translation Files

The **Easy\_Localization** package uses JSON files to store translations. These files should be placed in a folder, typically named `assets/translations`. Create files like `en.json` and `es.json` to store translations for different locales. For example:

**en.json**

```plaintext
{
  "hello": "Hello",
  "welcome": "Welcome to our app!"
}
```

**es.json**

```plaintext
{
  "hello": "Hola",
  "welcome": "¡Bienvenido a nuestra aplicación!"
}
```

## Using Translations in Your App

To use these translations, you can use the `tr()` function. Here's an example:

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hello'.tr()),
      ),
      body: Center(
        child: Text('welcome'.tr()),
      ),
    );
  }
}
```

With `tr()`, you can access the translated values based on the current locale.

## Extension for Easy Access to Localization

To make the localization process even more intuitive, you can extend the `BuildContext` using an extension. This can simplify getting localized text throughout your app.

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

extension AppLocalization on BuildContext {
  String get hello => tr('hello');
  String get welcome => tr('welcome');
}
```

Using this extension, you can easily get localized strings like so:

```plaintext
Text(context.hello)
```

This approach helps keep your code clean and readable.

## Handling Asset Loading with Custom AssetLoader

If your translation files are hosted on a network or are dynamically loaded, you can use a custom `AssetLoader`. Here's an example of a custom loader:

```plaintext
import 'package:easy_localization/easy_localization.dart';

class SmartNetworkAssetLoader extends AssetLoader {
  @override
  Future<Map<String, dynamic>> load(String path, Locale locale) async {
    // Implement logic to load translation from network or other source
    return Future.value({});
  }
}
```

You can use this custom loader in the `EasyLocalization` setup:

```plaintext
EasyLocalization(
  assetLoader: SmartNetworkAssetLoader(),
  supportedLocales: [Locale('en', 'US'), Locale('es', 'ES')],
  path: 'assets/translations',
  fallbackLocale: Locale('en', 'US'),
  child: MyApp(),
);
```

This way, you have full control over how your translation assets are loaded, which is useful for more dynamic or scalable applications.

## Formatting Dates, Numbers, and Currencies

Localization isn’t just about translating text; it’s also about properly formatting dates, numbers, and currencies to match user expectations. **Easy\_Localization** offers easy-to-use utilities for formatting.

## Date Formatting

To format dates, you can use the `DateFormat` class from the `intl` package, which is integrated with **Easy\_Localization**:

```plaintext
import 'package:intl/intl.dart';
import 'package:easy_localization/easy_localization.dart';

DateTime now = DateTime.now();
String formattedDate = DateFormat.yMMMd(context.locale.toString()).format(now);
```

## Number and Currency Formatting

Number formatting is also easy. The `NumberFormat` class allows you to localize numbers and currencies:

```plaintext
import 'package:intl/intl.dart';
import 'package:easy_localization/easy_localization.dart';

double amount = 12345.67;
String formattedNumber = NumberFormat.decimalPattern(context.locale.toString()).format(amount);
String formattedCurrency = NumberFormat.currency(locale: context.locale.toString(), symbol: '€').format(amount);
```

These formatting tools allow you to cater to the cultural expectations of different locales, improving user experience.

## Conclusion

Localizing your Flutter app can significantly broaden your user base and make your app more user-friendly for people around the world. With **Easy\_Localization**, you can effortlessly manage translations and handle locale-specific formats for dates, numbers, and currencies.

By leveraging custom loaders, localization extensions, and proper formatting, your Flutter app will not only speak the language of your users but also present information in a way that feels right for them. Start localizing today and reach a global audience!

## Stackademic 🎓

Thank you for reading until the end. Before you go:

- Please consider **clapping** and **following** the writer! 👏
- Follow us [**X**](https://twitter.com/stackademichq) | [**LinkedIn**](https://www.linkedin.com/company/stackademic) | [**YouTube**](https://www.youtube.com/c/stackademic) | [**Discord**](https://discord.gg/in-plain-english-709094664682340443) | [**Newsletter**](https://newsletter.plainenglish.io/) | [**Podcast**](https://open.spotify.com/show/7qxylRWKhvZwMz2WuEoua0)
- [**Create a free AI-powered blog on Differ.**](https://differ.blog/)
- More content at [**Stackademic.com**](https://stackademic.com/)

---
Originally published on [Medium](https://blog.stackademic.com/localizing-your-flutter-app-with-easy-localization-86cea885c72b) on November 29, 2024.