Membuat Localization di Flutter
Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi Multi-cross-platform. Salah satu fitur yang menarik dari pembuatan aplikasi adalah kemampuan untuk mendukung berbagai bahasa atau yang biasa dikenal dengan localization. Dengan menggunakan Flutter, kita juga dapat membuat fitur tersebut.
Dalam pembuatan fitur Localization pada Flutter, kita perlu mempersiapkan file yang akan digunakan untuk menyimpan string atau pesan-pesan yang akan ditampilkan pada aplikasi dalam berbagai bahasa. Untuk itu, kita akan menggunakan format file arb atau Application Resource Bundle.
Arb itu kayak format file gitu buat nyimpen kata-kata atau pesan yang bakalan dipake di aplikasi dalam bahasa-bahasa yang berbeda. Jadi kita bisa nambahin kata-kata atau pesan dalam bahasa yang berbeda-beda di file arb ini buat dipake di aplikasi. Selain itu, file arb juga bisa dipake buat nyimpen info lain yang penting buat proses Localization.
Jadi, untuk membuat fitur Localization pada Flutter, kali ini kita akan menggunakan file arb sebagai media untuk menyimpan string atau pesan dalam berbagai bahasa yang akan digunakan pada aplikasi.
Langkah 1: Tambahkan package localization pada pubspec.yaml
Nah, untuk pake fitur localization di Flutter, kita harus menambah package localization di file pubspec.yaml dulu. Ini nih cara menambahkannya, atau kalo mau juga bisa nulis sendiri:
flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:anysehingga pada file pubspec.yml akan menjadi seperti ini :
name: localization_tutorial_flutter
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=2.19.6 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_localizations:
sdk: flutter
intl: any
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
generate: true # Tambahkan ini juga ya
uses-material-design: trueSelanjutnya silahkan jalankan ini pada terminal kamu
flutter pub getLangkah 2: Buat file l10n.yaml pada root project
Setelah selesai menambahkan package localization pada pubspec.yaml, sekarang kita buat file baru dengan nama l10n.yaml pada root project, dengan isi sebagai berikut
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dartsedikit penjelasan untuk arb-dir itu lokasi dimana nanti kita meletakkan file bahasa yang akan kita buat nanti, selanjutnya template-arb-file akan digunakan sebagai template yang akan nanti di generate, hasil dari generate itu akan disimpan pada file dengan nama app_localizations.dart.
file l10n.yaml menggunakan “L” huruf kecil bukan “i” huruf besar oke
Langkah 3: Buat folder untuk localization
Tahap selanjutnya, kita perlu membuat folder untuk menyimpan string yang akan digunakan untuk localization. Buatlah folder baru dengan nama l10n pada direktori lib aplikasi Flutter.
Sekarang kita buat dua buah file baru yang pertama dengan nama app_en.arb dan yang kedua dengan app_id.arb. File pertama akan kita gunakan untuk menyimpan string bahasa Inggris dan yang kedua akan digunakan untuk bahasa Indonesia.
Langkah 4: Isi file Arb
Setelah menyiapkan folder untuk localization, langkah berikutnya adalah mengisi file .arb dengan string atau pesan-pesan yang akan ditampilkan pada aplikasi.
Pada tahap ini, kita akan menambahkan pesan-pesan dalam berbagai bahasa yang akan digunakan pada aplikasi. Misalnya, kita ingin menampilkan pesan “example” dalam bahasa Inggris dan “Contoh” dalam bahasa Indonesia. Kita bisa menambahkan pesan-pesan tersebut pada file .arb yang telah kita buat sebelumnya.
Untuk menambahkan pesan dalam bahasa Inggris, kita bisa membuka file dengan nama app_en.arb pada folder I10n. Selanjutnya, kita bisa mengisinya dengan kode berikut:
{
"example" : "Example"
}Sedangkan untuk pesan dalam bahasa Indonesia, kita bisa silahkan buka file app_id.arb pada folder l10n. Selanjutnya, kita bisa mengisinya dengan kode berikut:
{
"example" : "Contoh"
}Dalam kode di atas, kita menggunakan key-value pair untuk menyimpan pesan-pesan dalam berbagai bahasa. Key pada setiap pesan harus sama antara file .arb yang berbeda, sedangkan value-nya bisa berbeda sesuai dengan bahasa yang digunakan.
JIka semua, string sudah dimasukkan kedalam file .arb, selanjutnya silahkan jalan kan ini pada root project kamu ya
flutter gen-l10nLangkah 5: Implementasi Localization
Setelah semua file .arb sudah terisi semua dengan kata yang akan kita gunakan dan sudah menjalankan flutter gen-l10n, sekarang kita saatnya menerapkan localization pada flutter.
Sebelumnya file main.dart, saya sebagai berikut, hanya berisi function main dan statelessWidget, silahkan kamu sesuaikan dengan project kamu ya.
import 'package:flutter/material.dart';
import 'package:localization_tutorial_flutter/pages/home_example.dart';
void main() {
runApp(const LocalizationApp());
}
class LocalizationApp extends StatelessWidget {
const LocalizationApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Localization Example',
theme: ThemeData(useMaterial3: true),
home: const HomeExample(),
);
}
}dan ini file home_example.dart saya, cukup simple hanya berisi statelessWidget dan sebuah text yang bertuliskan “example”
import 'package:flutter/material.dart';
class HomeExample extends StatelessWidget {
const HomeExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Text("Example"),
),
);
}
}Sebelumnya kita tambahkan dahulu parameter pada MaterialApp untuk localization nya, sehingga file main.dart saya menjadi seperti berikut ini
import 'package:flutter/material.dart';
// Add this line
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
// Add this line
import 'package:localization_tutorial_flutter/pages/home_example.dart';
void main() {
runApp(const LocalizationApp());
}
class LocalizationApp extends StatelessWidget {
const LocalizationApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Localization Example',
// Add this line
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate
],
supportedLocales: const [
Locale('en'),
Locale('id'),
],
locale: const Locale('en'),
// Add this line
theme: ThemeData(useMaterial3: true),
home: const HomeExample(),
);
}
}Perhatikan baris ini: jika kita ingin menggunakan bahasa Inggris sebagai default dari aplikasi kita, kita dapat mengisi dengan en. Sementara jika kita ingin menggunakan bahasa Indonesia sebagai default, kita dapat mengganti dengan id. Namun, jika kita tidak menggunakan baris ini maka aplikasi akan secara otomatis mengikuti bahasa yang digunakan oleh pengguna.
locale: const Locale('en')Langkah 6: Menggunakan Key-Value Localization
Setelah semuanya siap sekarang, saat nya kita menggunakan key-value yang telah kita buat, sekarang silahkan kamu buka file yang ingin menggunakan localization, sebagai contoh saya akan menggunakan file home_example.dart yang sudah saya buat sebelumnya, menjadi seperti berikut ini
import 'package:flutter/material.dart';
// Add this line
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
// Add this line
class HomeExample extends StatelessWidget {
const HomeExample({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// Hapus const nya ya :)
return Scaffold(
body: Center(
// Add this line
child: Text(AppLocalizations.of(context)!.example),
// Add this line
),
);
}
}Sekarang silahkan coba test, dan jalankan aplikasinya, jika semua proses telah dilakukan dengan benar seharusnya kita sekarang akan mendapatkan hasil seperti berikut ini. “Example” dalam bahasa Inggris karena kita meng set locale dengan en silahkan kamu ganti dengan id dan refresh aplikasi maka seharusnya akan menjadi kata “Contoh” .
Perhatikan lagi baris berikut, “example” merupakan key yang kita buat pada tahap sebelumnya
*******!.exampleSelesai
Sekarang kamu sudah berhasil membuat sebuah fitur localization pada flutter, sebagai latihan kamu coba buatkan sebuah button yang akan digunakan oleh user kamu, untuk mengganti bahasa, selamat mengerjakan, dan semangat ya.
berikut githubnya jika https://github.com/celvineadiputra-dev/localization_tutorial_flutter
