Flutter Localization
Published: 2021-01-12 07:46:21

Flutter application မှာ language တခုထက်ပိုပြီး support လုပ်ပေးချင်တဲ့အခါ localization ဆိုတာ လုပ်ရလေ့ရှိပါတယ်။ ခု ဒီ tutorial မှာတော့ localization setup ဘယ်လိုလုပ်ရသလဲဆိုတာတွေကို sharing လုပ်ပေးသွားမှာ ဖြစ်ပါတယ်။ [Flutter documentation](https://flutter.dev/docs/development/accessibility-and-localization/internationalization) မှာလဲ အပြည့်အစုံ ရေးထားပေးတာရှိပါတယ်။ 

အရင်ဆုံး `pubspec.yaml` ထဲမှာ `flutter_localizations` dependency ကို သွားထည့်ရပါမယ်။

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

Localization တွေမလုပ်ခင် package တခုကို သွင်းထားဖို့လိုပါမယ်။ ဒါကတော့ internalization အတွက် အသုံးပြုတဲ့ intl ဆိုတဲ့ package ပဲဖြစ်ပါတယ်။ ကျွန်တော်ကတော့ vscode plugin ဖြစ်တဲ့ Pubspec Assist ကို သုံးတာဖြစ်တဲ့အတွက် အဲ့ဒီကနေ `intl` package ကို သွင်းပါမယ်။

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ztzhskslpvzwolhdavwp.png)

`Command+Shift+P` ကိုနှိပ်ပြီး command တွေကျလာပါမယ်။ အဲ့ထဲကမှ `Pubspec Assist: Add/update dependencies` ဆိုတာကို ရွေးပါမယ်။

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0l2inq5km76kcl9elz8r.png)

အဲ့ဒါပြီးရင်တော့ `intl` လို့ရိုက်လိုက်ပါမယ်။

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o6yahouw71aamue4swzi.png)

အဲ့ဒါဆိုရင်တော့ `pubspec.yaml` ရဲ့ dependencies အောက်မှာ `intl` package ထည့်သွင်းပြီး ဖြစ်သွားပါလိမ့်မယ်။ တကယ်လို့ manually လုပ်ချင်တယ်ဆို [pub.dev](https://pub.dev/) ကိုသွားပြီး intl package ကိုရှာလို့လဲရပါတယ်။

နောက်ဆုံးတခုအနေနဲ့ကတော့ dependencies တို့၊ dev-dependencies တို့ရဲ့ အောက်မှာရှိတဲ့ flutter namespace အောက်ထဲမှာ `generate: true` ဆိုတာကို ထည့်ပါမယ်။

```yaml
flutter:
  uses-material-design: true
  generate: true
```
အခုဆိုရင်တော့ `pubspec.yaml` file ထဲမှာ လိုအပ်တာတွေ ပြင်ဆင်လို့ ပြီးပါပြီ။

Project based folder ထဲမှာ `l10n.yaml` ဆိုတဲ့ file တခုကို ဆောက်ပြီး အောက်မှာပြထားတဲ့ configuration တွေထည့်ပါမယ်။

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wo51yom9brdkyx4ro3pb.png)

ဒါကတော့ ကိုယ် translation လုပ်မယ့် file ဘယ်မှာရှိမယ်၊ Generate လုပ်လိုက်တဲ့အခါ ဘယ်နာမည်နဲ့ class ဆောက်မယ်၊ အဲ့ဒါတွေကို သတ်မှတ်ပေးထားတာပဲ ဖြစ်ပါတယ်။ အခု ဒီ configuration အတိုင်းဆိုရင် ကျွန်တော်တို့ app ရဲ့ base language keywords တွေကို `app_en.arb` ဆိုတဲ့ file ထဲမှာ သိမ်းထားမယ်။ အဲ့ file က `lib/l10n` ဆိုတဲ့ ပတ်လမ်းကြောင်းမှာ ရှိမယ်။ Generate လုပ်လိုက်တဲ့ class ကို `app_localizations.dart` ဆိုတဲ့နာမည်နဲ့ သိမ်းမယ်လို့ သတ်မှတ်ပေးလိုက်တာပဲ ဖြစ်ပါတယ်။

ခုဆိုရင် `app_en.arb` ဆိုတဲ့ file ကိုဖွင့်ပြီး စာကြောင်းတခုလောက်နဲ့ စစမ်းကြည့်ရအောင်ပါ။

```json
{
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  }
}
```

ဒါနဲ့အတူ မြန်မာလိုပါ ထည့်ကြည့်လိုက်ရအောင်ပါ။ `app_my.arb` ဆိုတဲ့ file တခုကို `l10n` folder ထဲမှာပဲ ဆောက်လိုက်ပြီး အောက်မှာပြထားတဲ့စာတွေ ထည့်လိုက်ပါ့မယ်။

```json
{
  "helloWorld": "မင်္ဂလာပါ"
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4lejcvkbvz7ntjv77y2s.png)

ဘယ် language အတွက် ဘယ် keyword ကို suffix ထားသလဲဆိုတာ သိချင်ရင် ဒီ [link](https://api.flutter.dev/flutter/flutter_localizations/GlobalMaterialLocalizations-class.html) မှာ သွားကြည့်လို့ရပါတယ်။

ခုလိုတာတွေ ပြင်ဆင်ပြီးပြီဆိုတော့ command run ဖွင့် terminal ဖွင့်ပါမယ်။ vs code ထဲမှာဆိုရင်တော့ Terminal > New Terminal ဆိုတာ ဖွင့်လိုက်ပါမယ်။ Terminal path က project base folder မှာ ရှိနေရမှာဖြစ်ပါတယ်။ အခု terminal ထဲမှာ `flutter gen-l10n` ဆိုတာ ရီုက်လိုက်ပါမယ်။ ဒီ command ကတော့ `l10n.yaml` ကိုကြည့်ပြီး ရှိနေတဲ့ arb files တွေကနေပြီးတော့ app ထဲမှာ ပြန်သုံးလို့ရမယ့် translation files တွေ ထုတ်ပေးဖို့ ရိုက်ရတဲ့ command ဖြစ်ပါတယ်။

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/waqrovs4qb7se07gmaaq.png)

ခုလိုပေါ်လာပြီဆိုရင်တော့ generate လုပ်တာ success ဖြစ်သွားပါပြီ။ project base folder ထဲက `.dart_tool` ဆိုတဲ့ folder ထဲမှာ `flutter_gen/gen_l10n` ဆိုပြီး ထွက်လာမှာဖြစ်ပါတယ်။ အဲ့ထဲမှာတော့ ကိုယ် arb အနေနဲ့သတ်မှတ်ထားတဲ့ files တွေ (app_localizations_en.dart, app_localizations_my.dart) အပြင် application နဲ့ အဓိက ချိတ်ဆက်မယ့် app_localizations.dart file လဲ ထွက်လာမှာဖြစ်ပါတယ်။

ကဲ.. ပြီးခါနီးပါပြီ။ `main.dart` ကိုဖွင့်လိုက်မယ်။ အဲ့ထဲမှာ MaterialApp widget ကို ခုလိုမျိုး update လုပ်လိုက်ပါမယ်။

```dart
import 'package:flutter/material.dart';
// Import generated app_localizations.dart
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      locale: Locale('en'),
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
```

ဒါနဲ့အတူ default Text Widget ကိုလဲ localization အတွက် ပြုလုပ်ထားတဲ့ `helloWorld` ပြအောင် အခုလို ပြုလုပ်လို့ရပါတယ်။

```dart
Text(
  AppLocalizations.of(context).helloWorld,
),
```

ခုလို သတ်မှတ်ပြီးသွားရင် `locale: Locale('en')` ဒါမှမဟုတ် `locale: Locale('my')` စသဖြင့် ပြောင်းပြီးစမ်းကြည့်လို့ရပါပြီ။ တကယ်လို့ ကိုယ့် app setting ထဲကနေ ပြောင်းစေချင်တယ်ဆိုလဲ state management mechanism နဲ့ချိတ်ပြီး locale ကို update လုပ်ပေးပြီး ပြောင်းသွားလို့ရပါတယ်။

iOS အတွက်တော့ xcode ထဲမှာ ခုဖော်ပြမယ့် steps လေးတွေ ဖြည့်ပြီးလုပ်ပေးဖို့ လိုအပ်ပါတယ်။

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/d8o2ewt4mxuzy4yauzt0.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q0w9g8hl5o8bm242kwzh.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4x2cesc3m0m8og6tkv7e.png)