Multi-Language support in Flutter

Multi-language support is an important feature to globalize the application and increase the user audience. Language is a factor that connects people and the same principle is applied to app development also. When a customer sees their native language, it creates an emotional bond with the app.

FACT

English continues to represent the most common language on the Internet, almost 75% of app users do not speak English, which leaves a considerable big market available for multilingual apps.

Transform your app idea into a reality with our Flutter app development services.

Flutter by default only provides the US English localization. For supporting other languages, the application must specify additional properties and include the package called flutter_localizations. As of November 2020, this package supports 78 languages.

Check the below code for practical implementation.

Add the below package as a dependency to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:   #Add this line
    sdk: flutter   #Add this line

dependencies:

flutter:

sdk: flutter

flutter_localizations: #Add this line

sdk: flutter #Add this line

In the next step, import the flutter_localizations library and specify localizationsDelegates and supportedLocales for MaterialApp:

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(
 localizationsDelegates: [
   // ... app-specific localization delegate[s] here
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate,
   GlobalCupertinoLocalizations.delegate,
 ],
 supportedLocales: [
    const Locale('en', ''), // English, no country code
    const Locale('es', ''), // Spanish, no country code
    // ... other locales the app supports
  ],
)

import 'package:flutter_localizations/flutter_localizations.dart';

MaterialApp(

localizationsDelegates: [

// ... app-specific localization delegate[s] here

GlobalMaterialLocalizations.delegate,

GlobalWidgetsLocalizations.delegate,

GlobalCupertinoLocalizations.delegate,

supportedLocales: [

const Locale('en', ''), // English, no country code

const Locale('es', ''), // Spanish, no country code

// ... other locales the app supports

)

Adding the localized messages for multi-language support

Once the flutter_localizations package is added, use the following instructions to add localized text to your application.

Add the intl package to the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.16.1   #Add this line

dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

intl: ^0.16.1 #Add this line

Enable the generate flag in the pubspec.yaml file:

flutter:
  generate: true    #Add this line

1 2	flutter: generate: true #Add this line

Add the new yaml file to the root directory of the Flutter project called l10n.yaml with the following content:

arb-dir: lib/l10n
template-arb-file: app_es.arb
output-localization-file: app_localizations.dart

arb-dir: lib/l10n

template-arb-file: app_es.arb

output-localization-file: app_localizations.dart

In ${FLUTTER_PROJECT}/lib/l10n, add the app_es.arb template file.

{
  "hello": "Hola!!"
}

{

"hello": "Hola!!"

}

Now after running the app. A file will be generated in ${FLUTTER_PROJECT}/flutter_gen/gen_l10n after which we will start using the localization in the app.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Add this line

Widget build(BuildContext context) {
  return Text(AppLocalizations.of(context).hello);
}

import 'package:flutter_localizations/flutter_localizations.dart';

import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Add this line

Widget build(BuildContext context) {

return Text(AppLocalizations.of(context).hello);

}

In this way, we can support multi-languages in flutter apps.

Refernece

https://flutter.dev/docs/development/accessibility-and-localization/internationalization

rishabh sharma 2 May 2023

. . .

Discuss on Helpdesk

Multi-Language support in Flutter

Adding the localized messages for multi-language support

Refernece

Leave a Comment Cancel Reply

Message Sent!