How to Localize Language in App with Flutter

Rickey
Rickey
Feb 22 · 3 min read

If your app might be deployed for users who speak another language, you’ll need to internationalize it. However, it is hard to rewrite for other languages manually. There is a way to make it possible to localize and arrange the location of text fonts and layouts according to the language. Flutter provides some widgets and classes that help with localization the Flutter libraries themselves are localized.

Goal Examples

English version

Indonesian version

So in an application by flutter, text would be changed into another language!

How to implement

I will show the steps to implement it as the following. Please try it by yourself.

STEP1: Import plugin

add below description in pubspec.yaml

dependencies:
flutter:
sdk: flutter
# Internationalization support.
flutter_localizations:
sdk: flutter
intl: 0.16.1
# the rest of your dependencies
flutter:
# Adds code generation (synthetic package) support
generate: true

STEP2: Create l10n.yaml

Create l10n.yaml” at below root directory

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

“arb-dir” is defined as the position of localization file

“template-arb-file” is defined as the base file of localization. above sample defines English as the base language.

“output-localization-file” is defined as the Dart class file which application import.

STEP3: Create localization file

Create a localization file at below “lib/l10n”. The file type is “.arb”.

For example, create “app_en.arb”

{
“@@locale”: “en”,
“rate”: “Rate”,
@rate”: {
“description”: “rate title label”
},
“player”: “Player”,
@player”: {
“description”: “number of player label”
},
“shake”: “Shake!!”,
@shake”: {
“description”: “start create random number”
},
“allowDuplicateNumber”: “Allow duplicate number”,
@allowDuplicateNumber”: {
“description”: “Allow duplicate number”
},
“noServiceMessage”: “Not compatible with Android.\nPlease wait for a while as it is currently under development.”,
@noServiceMessage”: {
“description”: “Not compatible with Android.Please wait for a while as it is currently under development.”
},
“feedback”: “Feedback”,
@feedback”: {
“description”: “feedback”
},
“privacyPolicy”: “Privacy policy”,
@privacyPolicy”: {
“description”: “Privacy policy”
}
}

Then, create “app_id.arb”.

{
“@@locale”: “id”,
“rate”: “menilai”,
“player”: “Jumlah pemain”,
“shake”: “Generasi acak”,
“allowDuplicateNumber”: “Izinkan duplikasi”,
“noServiceMessage”: “Tidak kompatibel dengan Android.\nHarap tunggu sebentar karena saat ini sedang dalam pengembangan.”,
“feedback”: “Umpan balik”,
“privacyPolicy”: “Rahasia pribadi”
}

After creating the localization file, run “flutter pub get”. Then the file will be automatically generated.

STEP4: Delegate Localization

Add like below inmain.dart”.

import ‘package:flutter/material.dart’;
import ‘package:flutter_gen/gen_l10n/app_localizations.dart’; // Add this line.
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Add the `localizationsDelegate` and `supportedLocales` lines.
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
home: MyHomePage(title: ‘Flutter Demo Home Page’),
);
}
}

STEP5: use defined String in APP

Import plugin

import ‘package:flutter_gen/gen_l10n/app_localizations.dart’;

Use like below

AppLocalizations.of(context).privacyPolic

References

Internationalizing Flutter apps

Flutter Localization

DSF Web Services Engineering

Development Center by PT. Dipo Star Finance

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store