アプリ全体に関わるパッケージ
- build_runner: 自動生成補助
- flutter_gen_runner: リソースの自動生成
- flutter_localizations: 多言語化 (リソース共通化のため、1言語のみでも導入すべき)
- intl: 日付などの多言語対応 （併せて導入)
build_runner
導入
dart pub add build_runner --dev単体で利用するライブラリというよりは、他のライブラリと組み合わせて利用するもの。
生成コマンド
flutter pub run build_runner buildオプション:
–delete-conflicting-outputs
すでに自動生成されたファイルが競合していた場合に、古いファイルを削除する。
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_runnerpubspec.yaml
flutter_gen:
output: lib/gen/assets/
integrations:
flutter_svg: trueoutput: 生成したコードの格納先 （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
導入
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.dartarb-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のコンストラクタ引数である
以上
コメント