【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
事前準備
プロジェクトを横断して利用する場合は、以下のどちらで、グローバル利用として導入する。
-
brewコマンド
brew install FlutterGen/tap/fluttergen
-
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
導入
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
には利用できない。
- そのため、MaterialAppのコンストラクタ引数である
Discussion