flutter

Flutter Localization

Arkar Min Tun

Dec 18, 2022 • 2 min read

Flutter application မှာ language တခုထက်ပိုပြီး support လုပ်ပေးချင်တဲ့အခါ localization ဆိုတာ လုပ်ရလေ့ရှိပါတယ်။ ခု ဒီ tutorial မှာတော့ localization setup ဘယ်လိုလုပ်ရသလဲဆိုတာတွေကို sharing လုပ်ပေးသွားမှာ ဖြစ်ပါတယ်။ Flutter documentation မှာလဲ အပြည့်အစုံ ရေးထားပေးတာရှိပါတယ်။

အရင်ဆုံး flutter_localizations dependency ကို ထည့်ရပါမယ်။

flutter pub add flutter_localizations --sdk=flutter

အပေါ်က command ကို terminal မှာ run လိုက်ပြီးရင် pubspec.yaml ထဲမှာ flutter_localizations သွင်းပြီးသား ဖြစ်သွားပါလိမ့်မယ်။

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # You'll see this line
    sdk: flutter         # and this line

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

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

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

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

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

flutter:
  uses-material-design: true
  generate: true

အခုဆိုရင်တော့ pubspec.yaml file ထဲမှာ လိုအပ်တာတွေ ပြင်ဆင်လို့ ပြီးပါပြီ။

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

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

ဒါကတော့ ကိုယ် 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 ကိုဖွင့်ပြီး စာကြောင်းတခုလောက်နဲ့ စစမ်းကြည့်ရအောင်ပါ။

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

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

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

ဘယ် language အတွက် ဘယ် keyword ကို suffix ထားသလဲဆိုတာ သိချင်ရင် ဒီ link မှာ သွားကြည့်လို့ရပါတယ်။

ခုလိုတာတွေ ပြင်ဆင်ပြီးပြီဆိုတော့ 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 ဖြစ်ပါတယ်။

ခုလိုပေါ်လာပြီဆိုရင်တော့ 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 လုပ်လိုက်ပါမယ်။

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 ပြအောင် အခုလို ပြုလုပ်လို့ရပါတယ်။

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

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

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