Flutter: Localization step by step

สำหรับบทความนี้จะลองใช้งาน easy translations สำหรับภาษาต่างๆ ซึ่งเราสามารถโหลด translations เป็น JSON, CSV, Yaml, Xml โดยใช้ Easy Localization Loader ได้ด้วย

https://pub.dev/packages/easy_localization

นี่คือ lib ที่เราจะใช้สำหรับการเปลี่ยนภาษาใน Flutter นะคับ มาเริ่มกันเลย

ติดตั้งกันอย่างไว แหะๆ

1. ติดตั้ง lib ใน pubspec.yaml

dependencies:
  easy_localization: ^2.3.3

2. สร้าง folder เพื่อเพิ่ม translation files เข้าไปเป็น JSON แบบนี้ (โดย folder assets ให้อยุ่นอกสุดที่เดียกับ folder android เลยคับ)

assets
└── locales
    ├── en-US.json                 
    └── th-TH.json 

3. ทำการ declare assets ที่เราสร้างขึ้นมาใหม่ใน pubspec.yaml

flutter:
  assets:
    - assets/locales/

4. สำหรับ iOS ให้ทำการเพิ่ม supported locales ไปที่ ios/Runner/Info.plist ด้วย

<key>CFBundleLocalizations</key>
<array>
    <string>en</string>
    <string>th</string>
</array>

5. เพิ่ม EasyLocalization() เข้าไปในภายใน runApp() พร้อมกับ import easy_localization เข้าไปใน main.dart

EasyLocalization(
    startLocale: Locale('th', TH');  // When need to set default
    path: 'assets/locales',
    fallbackLocale: Locale('th', 'TH'),
    supportedLocales: [Locale('en', 'US'), Locale('th', 'TH')],
    saveLocale: true,
    child: MyApp())

จะได้แบบนี้

6. เพิ่ม config ในส่วนของ locale เพิ่มเติมใน MaterialApp()

localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,

ในขั้นตอนนี้ ถ้า run debug อยู่อาจจะมี error ให้เห็นก่อนนะคับ

7. สร้างข้อความที่จะแสดงทั้งหมด ให้เป็นระบบ 2 ภาษาใน json ไฟล์

เวลาจะใช้งานให้เรียกที่ “key”.tr()

8. ให้สร้าง UI ขึ้นมาเพื่อให้แสดงรายละเอียดพร้อมกับมีปุ่มเปลี่ยนภาษาคือ TH, EN ตาม code ด้านล่างนี้

ในการใช้งานจากตัวอย่างด้านล่าง เมื่อเรียก ‘title’.tr() นั่นคือ จำทำการเรียกคีย์ “title” ในหน้า en-US.json หรือ th-TH.json นั่นเอง และจะได้ value ออกมา

homepage.dart

code ของหน้าแรก main.dart ที่ import easy_localization เข้ามาใช้

main.dart

สำหรับปุ่มที่ใช้ในการเปลี่ยนภาษาคือ DropdownButton widget ทำงานเมื่อมีการเปลี่ยนค่า จะได้ค่าใหม่เข้ามาใน property onChanged: และนำค่าใหม่ไปเช็คว่าคือ ภาษาอะไร จากนั้นจะทำการเปลี่ยนภาษาด้วยคำสั่ง

context.locale = Locale('en', 'US');
หรือ
context.locale = Locale('th', 'TH');

พร้อมกับ setState() เพื่อให้มีการ refresh UI

UI ที่สร้างขึ้นมา พร้อมปุ่มเปลี่ยนภาษา

เราสามารถดัดแปลงมาใช้เพียง RaisedButton() ธรรมดาก็ทำได้เช่นกันคับ โดยนำมาแทน DropdownButton.

ใช้ RaisedButton() แทนได้เช่นกัน

แล้วพบกันใหม่คับ