Mobile Apps

• January 3, 2025 • 3 mins read

Creating Multi-Language Flutter Apps with Localisation

Building an app that cater to diverse audiences is crucial when a business expands globally. One key way to deploy an app that speaks multi-language is through localisation in Flutter.

In this article, we will guide you through creating a multi-language Flutter app using localisation.

How Flutter helps to create a multi-language app through localisation

Why You Should Implement Localisation?

Localisation is the process of adapting your app to different languages and cultural norms. This increases user experience and are likely to increase the number of users too. 

It covers aspects beyond translation:

  • Formatting: Dates, numbers, and currencies vary across regions.
  • Right-to-Left (RTL) Support: Languages like Arabic and Hebrew require specific layout adjustments.
  • Cultural Sensitivity: Ensuring images, colours, and text resonate with the target audience.

Key Concepts In Flutter Localisation

Internationalisation (i18n)

Preparing your app’s codebase to support multiple languages.

Localisation (i10n)

Adapting the content and layout to specific language and region.

Locales

Identifiers for language and regional settings (e.g., en_my for English in Malaysia or en_ph for English in Philippines).

How To Localise A Flutter App?

Step 1: Create A New Flutter Project

Start by creating a new Flutter project. Open your terminal and run:

  1. flutter create multi_language_app

Step 2: Add Dependencies

To simplify localization, add the flutter_localizations package and optionally the intl package for date and number formatting. Modify your pubspec.yaml file:

  1. dependencies:
  2.   flutter:
  3.     sdk: flutter
  4.   flutter_localizations:
  5.     sdk: flutter
  6.   intl: ^0.18.0

Run flutter pub get to fetch the packages.

Step 3: Configure Supported Locales

In your main.dart, import the necessary localization packages and configure your app to support multiple locales:

  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_localizations/flutter_localizations.dart';
  4. void main() => runApp(MyApp());
  6. class MyApp extends StatelessWidget {
  7.   @override
  8.   Widget build(BuildContext context) {
  9.     return MaterialApp(
  10.       title: 'Multi-Language App',
  11.       supportedLocales: [
  12.         Locale('en', 'US'),
  13.         Locale('es', 'ES'),
  14.         Locale('fr', 'FR'),
  15.       ],
  16.       localizationsDelegates: [
  17.         GlobalMaterialLocalizations.delegate,
  18.         GlobalWidgetsLocalizations.delegate,
  19.         GlobalCupertinoLocalizations.delegate,
  20.       ],
  21.       home: HomeScreen(),
  22.     );
  23.   }
  24. }
  26. class HomeScreen extends StatelessWidget {
  27.   @override
  28.   Widget build(BuildContext context) {
  29.     return Scaffold(
  30.       appBar: AppBar(title: Text('Multi-Language App')),
  31.       body: Center(child: Text('Hello, World!')),
  32.     );
  33.   }
  34. }

Step 4: Create Translation Files

Use the intl package to manage translations. Create an l10n folder in your project and add JSON files for each supported language:

  • l10n/en.json:
  1. {
  2.   "title": "Multi-Language App",
  3.   "greeting": "Hello, World!"
  4. }
  • l10n/es.json
  1. {
  2.   "title": "Aplicación Multi-Idioma",
  3.   "greeting": "¡Hola, Mundo!"
  4. }
  • l10n/fr.json
  1. {
  2.   "title": "Application Multi-Langues",
  3.   "greeting": "Bonjour le Monde!"
  4. }

Step 5: Create A Localisation Class

Build a localisation class to load and access translations. Create a new file app_localizations.dart:

  1. import 'dart:convert';
  2. import 'package:flutter/material.dart';
  3. import 'package:flutter/services.dart';
  5. class AppLocalizations {
  6.   final Locale locale;
  8.   AppLocalizations(this.locale);
  10.   static AppLocalizations? of(BuildContext context) {
  11.     return Localizations.of<AppLocalizations>(context, AppLocalizations);
  12.   }
  14.   late Map<String, String> _localizedStrings;
  16.   Future<void> load() async {
  17.     String jsonString = await rootBundle.loadString('l10n/${locale.languageCode}.json');
  18.     Map<String, dynamic> jsonMap = json.decode(jsonString);
  20.     _localizedStrings = jsonMap.map((key, value) => MapEntry(key, value.toString()));
  21.   }
  23.   String translate(String key) {
  24.     return _localizedStrings[key] ?? key;
  25.   }
  27.   static const LocalizationsDelegate<AppLocalizations> delegate = _AppLocalizationsDelegate();
  28. }
  30. class _AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  31.   const _AppLocalizationsDelegate();
  33.   @override
  34.   bool isSupported(Locale locale) => ['en', 'es', 'fr'].contains(locale.languageCode);
  36.   @override
  37.   Future<AppLocalizations> load(Locale locale) async {
  38.     AppLocalizations localizations = AppLocalizations(locale);
  39.     await localizations.load();
  40.     return localizations;
  41.   }
  43.   @override
  44.   bool shouldReload(covariant LocalizationsDelegate<AppLocalizations> old) => false;
  45. }

Step 6: Update main.dart

Update your main.dart to use the custom localisation class:

  1. import 'app_localizations.dart';
  3. class MyApp extends StatelessWidget {
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return MaterialApp(
  7.       title: 'Multi-Language App',
  8.       supportedLocales: [
  9.         Locale('en', 'US'),
  10.         Locale('es', 'ES'),
  11.         Locale('fr', 'FR'),
  12.       ],
  13.       localizationsDelegates: [
  14.         AppLocalizations.delegate,
  15.         GlobalMaterialLocalizations.delegate,
  16.         GlobalWidgetsLocalizations.delegate,
  17.         GlobalCupertinoLocalizations.delegate,
  18.       ],
  19.       home: HomeScreen(),
  20.     );
  21.   }
  22. }
  24. class HomeScreen extends StatelessWidget {
  25.   @override
  26.   Widget build(BuildContext context) {
  27.     final localizations = AppLocalizations.of(context);
  29.     return Scaffold(
  30.       appBar: AppBar(title: Text(localizations?.translate('title') ?? '')),
  31.       body: Center(child: Text(localizations?.translate('greeting') ?? '')),
  32.     );
  33.   }
  34. }

This helps ensure that unused Java/Kotlin code doesn’t bloat your final APK.

Step 7: Test Your App

Run your app and switch the device language to test localization. The text should automatically adapt to the selected language.

Additional Tips for Flutter Localisation

1. Use intl to format dates, currencies, and numbers based on locale.

  1. import 'package:intl/intl.dart';
  3. String formattedDate = DateFormat.yMMMd('en_US').format(DateTime.now());

2. Add Directionality widgets to handle right-to-left layouts.

3. Use tools like Flutter Intl or third-party services for managing translations.

Conclusion

Creating a multi-language Flutter app is a straightforward process when you understand the localisation workflow. Flutter’s rich localisation features and the step-by-step guide outlined above make the process accessible and efficient.

With these guide, you can confidently create apps that resonate with users worldwide, driving engagement and expanding your market presence.

Don’t forget to read the Flutter documentation if you need more help in implementing localisation.

Flower Abstract

If you are struggling on reducing your Flutter app size, don’t miss this comprehensive guide.

Build An App That Speaks Every Language!

Partner with us to build a multilingual app that fits your project goals!

Contact Us Button