top of page

How to implement localization in Flutter mobile apps


How to implement localization in Flutter mobile apps

In today's globalized world, mobile app developers must consider localization to reach a wider audience. Localization refers to the process of adapting an application to a specific language, region, or culture. Flutter, a popular cross-platform framework, provides powerful tools and libraries for implementing localization seamlessly.


In this blog post, we will explore step-by-step how to implement localization in Flutter mobile apps.


1. Why Localization Matters in Mobile Apps


Localization allows you to provide a personalized user experience by adapting your app's content to different languages, regions, and cultures. By catering to users' preferences and expectations, you can increase user engagement, retention, and app downloads. Flutter simplifies the localization process, making it easier for developers to internationalize their apps.


2. Setting Up the Flutter Project for Localization


To enable localization in your Flutter project, follow these steps:


In the pubspec.yaml file, add the flutter_localizations package to the dependencies:


dependencies:
    flutter:
        sdk: flutter
    flutter_localizations:
        sdk: flutter

Run flutter pub get to fetch the required package.


3. Creating Localization Files


In the root of your project, create a new directory called l10n (short for localization). Inside the l10n directory, create a file named app_localizations.dart. This file will contain the logic to load localized strings.


// l10n/app_localizations.dart
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class AppLocalizations {
  final Locale locale;

  AppLocalizations(this.locale);

  static AppLocalizations? of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }

  static const LocalizationsDelegate<AppLocalizations> delegate =
      _AppLocalizationsDelegate();

  // TODO: Define your localized strings here
  String get hello {
    return 'Hello';
  }
}

class _AppLocalizationsDelegate
    extends LocalizationsDelegate<AppLocalizations> {
  const _AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    // TODO: Add supported locales here
    return ['en', 'es'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) async {
    return AppLocalizations(locale);
  }

  @override
  bool shouldReload(_AppLocalizationsDelegate old) => false;
}


4. Defining Supported Locales


In the l10n directory, create a file named l10n.dart. In this file, define a class AppLocalizationsDelegate that extends LocalizationsDelegate<AppLocalizations>. Implement the required methods, including isSupported, load, shouldReload, and initializeMessages.


// l10n/l10n.dart
import 'package:flutter/material.dart';
import 'app_localizations.dart';

class AppLocalizationsDelegate
    extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) {
    // TODO: Add supported locales here
    return ['en', 'es'].contains(locale.languageCode);
  }

  @override
  Future<AppLocalizations> load(Locale locale) {
    return SynchronousFuture<AppLocalizations>(
        AppLocalizations(locale));
  }

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}
 

5. Localizing App Text


Now that you have defined the supported locales and created localization files, it's time to start localizing your app's text.


Here's how you can do it:


Wrap your app with the MaterialApp widget and provide a LocalizationsDelegate instance. Define the app's supported locales, which will determine which language your app displays. Wrap each widget that contains localized text with the Text widget and call the relevant localized string from the AppLocalizations class.


// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:my_app/l10n/l10n.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
      ],
      localizationsDelegates: const [
        AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.hello),
      ),
      body: Center(
        child: Text(AppLocalizations.of(context)!.hello),
      ),
    );
  }
}

6. Handling Pluralization and Gender-Specific Translations


Sometimes, you need to handle pluralization or gender-specific translations in your app. To do this in Flutter, you can use the Intl package, which provides utility classes for formatting dates, numbers, and currencies.


// l10n/app_localizations.dart
import 'package:intl/intl.dart';

class AppLocalizations {
  // ...

  String get itemCount(int count) {
    return Intl.plural(
      count,
      zero: 'No items',
      one: 'One item',
      other: '$count items',
      name: 'itemCount',
      args: [count],
      locale: locale.languageCode,
    );
  }

  String get greeting(String name) {
    return Intl.gender(
      name == 'John' ? 'male' : 'female',
      male: 'Hello, Mr. $name!',
      female: 'Hello, Ms. $name!',
      other: 'Hello, $name!',
      name: 'greeting',
      args: [name],
      locale: locale.languageCode,
    );
  }
}

7. Date and Time Localization


Flutter provides several utility classes to format dates and times based on the user's locale. For example, you can use the DateFormat class to format dates and times in a locale-specific way.


// l10n/app_localizations.dart
import 'package:intl/intl.dart';

class AppLocalizations {
  // ...

  String formatDate(DateTime date) {
    return DateFormat.yMd(locale.languageCode).format(date);
  }

  String formatTime(DateTime time) {
    return DateFormat.Hm(locale.languageCode).format(time);
  }
}

8. Testing and Debugging Localization

To test and debug your app's localization, you can use the LocalizationDebuggWidget, which is part of the flutter_localizations library.


Add this widget to your app's widget tree to display the translated strings and their keys, helping you identify any localization issues.


// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_localizations/localization_debugger.dart';
import 'package:my_app/l10n/l10n.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      supportedLocales: const [
        Locale('en', ''),
        Locale('es', ''),
      ],
      localizationsDelegates: const [
        AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
        LocalizationDebugger.delegate, // Add the LocalizationDebugger delegate
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context)!.hello),
      ),
      body: LocalizationDebugger( // Wrap the body widget with LocalizationDebugger
        child: Center(
          child: Text(AppLocalizations.of(context)!.hello),
        ),
      ),
    );
  }
}

Conclusion


Localization plays a vital role in making your Flutter mobile apps accessible to users around the world. By following the steps outlined in this blog post, you can successfully implement localization in your Flutter app, providing a tailored experience for users in different languages and cultures. With Flutter's powerful localization capabilities, you can take your app global and reach a wider audience.


Happy localizing!



Comments


Blog for Mobile App Developers, Testers and App Owners

 

This blog is from Finotes Team. Finotes is a lightweight mobile APM and bug detection tool for iOS and Android apps.

In this blog we talk about iOS and Android app development technologies, languages and frameworks like Java, Kotlin, Swift, Objective-C, Dart and Flutter that are used to build mobile apps. Read articles from Finotes team about good programming and software engineering practices, testing and QA practices, performance issues and bugs, concepts and techniques. 

Monitor & Improve Performance of your Mobile App

 

Detect memory leaks, abnormal memory usages, crashes, API / Network call issues, frame rate issues, ANR, App Hangs, Exceptions and Errors, and much more.

Explore Finotes

bottom of page