【Flutter開発】 導入メモ ~全体構成~

アプリ全体に関わるパッケージ

• build_runner: 自動生成補助
• flutter_gen_runner: リソースの自動生成
• flutter_localizations: 多言語化 (リソース共通化のため、1言語のみでも導入すべき)
  • intl: 日付などの多言語対応　（併せて導入)

---

build_runner

https://pub.dev/packages/build_runner

導入

dart pub add build_runner --dev

単体で利用するライブラリというよりは、他のライブラリと組み合わせて利用するもの。

生成コマンド

flutter pub run build_runner build

オプション: --delete-conflicting-outputs すでに自動生成されたファイルが競合していた場合に、古いファイルを削除する。

---

flutter_gen_runner

https://pub.dev/packages/flutter_gen_runner

事前準備

プロジェクトを横断して利用する場合は、以下のどちらで、グローバル利用として導入する。

1. brewコマンド

   brew install FlutterGen/tap/fluttergen
   

2. dart コマンド

   dart pub global activate flutter_gen
   

   環境変数変数に下記を追加する。

   $HOME/.pub-cache/bin
   

   参考

導入

上記で紹介した build_runnner の一部として利用する場合は、以下のコマンドで追加する。

flutter pub add --dev flutter_gen_runner

pubspec.yaml

flutter_gen:
  output: lib/gen/assets/
  integrations:
    flutter_svg: true

output: 生成したコードの格納先　（defaultは、lib/gen/) flutter_svg: svgを利用する場合有効にしておく。

生成コマンド

flutter pub run build_runner build --delete-conflicting-outputs

利用

指定した outputフォルダに、assets.gen.dartというファイルが生成される。

利用したい箇所で、Assets.images.xxxx のように、リソースファイル名を変数名として呼び出して利用できる。

---

flutter_localizations, intl

https://docs.flutter.dev/development/accessibility-and-localization/internationalization#setting-up

https://pub.dev/packages/intl

導入

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl

プロジェクト直下に下記ファイルを作成

l10n.yaml

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

arb-dir: 多言語ファイルの格納場所 template-arb-file: 基準となる言語ファイル名 (後述の手順で作成) output-class: ソース内で多言語ライブラリを利用する際のクラス名 (デフォルト名は長いので推奨) output-localization-file: 自動生成される多言語ライブラリクラス名 (importで指定)

上記で指定した、arb-dir に以下を作成する。

app_en.arb

{
  "@@locale": "en",
  "title": "title"
}

app_ja.arb

{
  "@@locale": "ja",
  "title": "タイトル"
}

arbのポイント：

• app_xx.arb の xx と、"@@locale":"xx" は、一致させる。
• arbの中身は json形式。
  • dartのように、最後の要素にカンマがあっても許される、ということはない。
• 同一のキーに設定した値で多言語化される。同一のキーがない場合は、template-arb-fileで指定した値になる。

生成

pub get で生成される。

flutter pub get

生成場所

プロジェクトルート
L.dart_tools
  Lflutter_gen
    Lgen_l10n
     Lxxxx.dart  # 利用時に import するファイル
     Lxxxx_en.dart # 英語用クラス
     Lxxxx_ja.dart # 日本語用クラス

利用

Material ウィジェットのコンストラクタ引数で下記を指定する。

    return MaterialApp(
      localizationsDelegates: L10n.localizationsDelegates,
      supportedLocales: L10n.supportedLocales,

locale: を設定すると、端末の言語設定によらず、言語を切り替えることができる。(アプリ内で言語設定を用意して切り替えるなど。)

arbに記載した、キー名で下記のように対応する文言を取得する。

L10n.of(context)!.title

ポイント

• L10nは、　l10n.yaml に記載した、output-class となる。デフォルトは、AppLocalizationsとなっている。

• VSCodeでは、自動生成されたパッケージが自動インポートされなかったので、importに以下を追記する。

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

• 多言語のキー名は、nullableとなっているが、利用シーンの大半は、non-null だと思うので、非null宣言(!)が必要。

  • 当然、該当のキーがなければ、違反で例外を吐く。

• arbの値に、{value}で、変数を埋め込むことができる。(value)は、なんでも良い。

  "title": "タイトル {value}"
  

  利用側

  L10n.of(context)!.title('サブタイトル')
  

• MaterialApp のコンストラクタ内では、まだ利用できない。

  • そのため、MaterialAppのコンストラクタ引数である titleには利用できない。