DEV Community

Cover image for Localizing Your Flutter App with Easy_Localization
مصعب يوسف
مصعب يوسف

Posted on Originally published at blog.stackademic.com on

Localizing Your Flutter App with Easy_Localization

#localization #easylocalization #flutter #development

Localizing Your Flutter App with Easy_Localization

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:

dependencies:
  flutter:
    sdk: flutter
  easy_localization: ^3.0.0 # Use the latest version
Enter fullscreen mode Exit fullscreen mode

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:

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(),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

{
  "hello": "Hello",
  "welcome": "Welcome to our app!"
}
Enter fullscreen mode Exit fullscreen mode

es.json

{
  "hello": "Hola",
  "welcome": "¡Bienvenido a nuestra aplicación!"
}
Enter fullscreen mode Exit fullscreen mode

Using Translations in Your App

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

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()),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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.

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');
}
Enter fullscreen mode Exit fullscreen mode

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

Text(context.hello)
Enter fullscreen mode Exit fullscreen mode

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:

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({});
  }
}
Enter fullscreen mode Exit fullscreen mode

You can use this custom loader in the EasyLocalization setup:

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

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:

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);
Enter fullscreen mode Exit fullscreen mode

Number and Currency Formatting

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

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);
Enter fullscreen mode Exit fullscreen mode

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:

Top comments (0)