App Localizations (Multiple Language Support) in Flutter

Pada artikel kali ini, saya akan membahas tentang Multi Language Support khususnya pada Flutter yang akan otomatis merubah bahasa pada aplikasi kita menjadi bahasa default yang sedang dipakai pada handphone.

1. Tambahkan dependencies yang dibutuhkan pada pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.0
  build_runner:

dev_dependencies:
  flutter_test:
    sdk: flutter
  gen_lang: 0.1.3

Kemudian jalankan di Terminal dengan command flutter packages get untuk mengunduh dependencies yang baru saja ditambahkan :

2. Buat directory untuk menyimpan resource string

Buat directory baru pada root folder aplikasi dengan nama res :

Lalu buar directory didalam res dengan nama string dan buat file–file resource string dengan type json :

Didalam masing-masing file tersebut berisi resource dengan format JSON seperti dibawah ini :

• string_en.json :

• string_id_ID.json :

Jangan lupa untuk menambahkan konfigurasi ini saat aplikasi load up pertama kali yaitu di root atau biasanya main.dart :

Setelah semuanya siap, silahkan buka terminal lagi dan build ulang untuk meng-generate code dari kedua resource ini :

3. Memanggil resource string hasil generate

Cara pemanggilan atau penggunaanya sendiri sangat mudah yaitu cukup dengan :

S.of(BuildContext context).nama_resource

Ada yang menarik sebenarnya disini yaitu dependency ini sudah mendukung plural message menggunakan parameter. Contoh resource-nya ada pada baris terakhir file .json yang telah saya lampirkan diatas :

{
  "msg_error_length" : "${field} need at least ${length} chars. or more"
}

Cara pemanggilan plural message dengan parameter :

validator: (it) {
                    if(it.startsWith('0')){
                      return S.of(context).msg_error_start_with_0;
                    }
                    if (it.length < 9) {
                      return S.of(context).msg_error_length("Phone numbers", "9");
                    }

                    return null;
                  }

Lalu untuk penggunaan standard nya berikut full code dari Widget HomeScreen :

class HomeScreen extends StatelessWidget {
  final Function onClickLogin;
  final Function onClickRegister;
  final Widget widget;

  const HomeScreen(
      {Key key,
      @required this.onClickLogin,
      @required this.onClickRegister,
      this.widget})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Positioned.fill(
              child: const Image(
                  fit: BoxFit.fitWidth,
                  image: const AssetImage(
                      'res/assets/images/login_illustration.png'),
                  alignment: Alignment.bottomCenter)),
          Positioned.fill(
              child: Padding(
            padding: EdgeInsets.fromLTRB(SizeConfig.h(12), SizeConfig.h(25),
                SizeConfig.h(12), SizeConfig.h(50)),
            child: Column(
              children: <Widget>[
                const Image(
                    image: const AssetImage('res/assets/images/logo.png')),
                Padding(
                  padding: EdgeInsets.only(top: SizeConfig.v(5)),
                  child: AccentButton(
                    text: S.of(context).login.toUpperCase(),
                    block: onClickLogin,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(top: SizeConfig.v()),
                  child: LinkButton(
                    text: S.of(context).register,
                    block: onClickRegister,
                  ),
                ),
              ],
            ),
          )),
          Positioned(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: Padding(
                padding: EdgeInsets.only(bottom: SizeConfig.v(5)),
                child: AutoSizeText(S.of(context).copyright,
                    style: subHeader(Colors.white54, 16)),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Dan berikut adalah hasilnya :

Sekian dari saya, CMIIW 🙂