📝

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

2023/02/21に公開

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

  • 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には利用できない。
GitHubで編集を提案

Discussion