大家好，今天我們要做的是多語言的部分，Internationalization可以讓這個App，呈現不同的語言
今天主要參考這個文件的內容

開始，先在pubspec.yaml裡面新增如下flutter_localizations以及intl

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: 0.16.1

以及flutter下加入generate: true

flutter:
  # Adds code generation (synthetic package) support 
  generate: true

新建一個l10n.yaml在根目錄(跟pubspec.yaml同一層)，這個檔案內容如下

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

arb-dir: lib/l10n 意指會把l10n檔案夾下的arb檔案作為輸入去生成代碼
template-arb-file: app_en.arb 意指會以app_en.arb為範本
output-localization-file: app_localizations.dart 會生成app_localizations.dart

新建前述的ARB檔案, lib/l10n/app_en.arb

建立l10n資料夾以及app_en.arb要自己新建，app_en.arb檔案裡面的內容如下，

{
  "@@locale": "en",

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

@@locale是地區，en是英語，zh是中文
helloWorld是方法名稱，在生成的dart文件裡面，會變成String get helloWorld;以及String get helloWorld => 'Hello World!';這樣的方法
@helloWorld裡面還可以包含描述，變數

運行程式，它就會新建出前述的app_localizations.dart

這個檔案你可以在下方位置找到
flutter_neflix_cover/.dart_tool/flutter_gen/gen_l10n/app_localizations.dart
在Android Studio裡面，可以在下方位置看到
ExExternal Libraries/Dart Packages/flutter_gen/gen_l10n/

使用方法

在檔案中import

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

先在MaterialApp下設定支持什麼語言

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Add the `localizationsDelegate` and `supportedLocales` lines.
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      title: 'Flutter Demo',
      home: SplashScreenPage(),
    );
  }

隨便選一個有Text的地方測試，原本是直接給它文字

Text(
    "Hello word",
    );

改為AppLocalizations.of(context).helloWorld

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

可以把你的Text用Localizations.override包起來，測試看看是否正常顯示指定地區的語言

 Localizations.override(
            context: context,
            locale: const Locale('zh'), //改為zh或en
            child: Builder(builder: (BuildContext context) {
              return Text(
                AppLocalizations.of(context).helloWorld,
                style: titleStyle,
              );
            }),
          ),

新增一個中文語言，新建l10n/app_zh.arb

在同個資料夾下面新增一個app_zh.arb檔案，內容如下
可以注意到，這邊不需要再寫一次description

{
  "@@locale": "zh",
  "helloWorld": "你好!",
}

假如是繁體中文的話，檔案名為app_zh_TW.arb，內容為

{
  "@@locale": "zh_TW",
  "helloWorld": "繁體你好啊啊啊!"
}

新增其他字串

直接新增其他字串的資訊到這個JSON裡面，我的app_en.arb就長像這樣

{
  "@@locale": "en",
  "helloWorld": "Hello World!",
  "@helloWorld": {
    "description": "The conventional newborn programmer greeting"
  },
  "greeting": "{hello} {world}",
  "@greeting": {
    "description": "A message with a two parameters",
    "placeholders": {
      "hello": {},
      "world": {}
    }
  },
  "manageUser": "Manage User",
  "@manageUser": {
    "description" : "管理使用者"
  },
}

新增帶變數的字串

如果有變數的時候就使用大括號將{變數}框起來,
@greeting底下還要加上placeholders

  "greeting": "{hello} {world}",
  "@greeting": {
    "description": "A message with a two parameters",
    "placeholders": {
      "hello": {},
      "world": {}
    }
  },

它還可以對一些數字、單位做處理
在變數之下，可以設定type等，詳情可以參考原文件

 "placeholders": {
    "value": {
      "type": "int",
      "format": "compactLong"
    }
  }

今天的效果圖，可以看到切換語言之後，就自動變更文字

GitHub連結： flutter-netflix-clone