備忘録です。
多言語対応準備
pubspec.yamlに追記
公式サイトで「flutter pub get ライブラリ名」で導入する方法は信じない方がいいです。
dependencies:
flutter:
sdk: flutter
intl: ^0.18.0
slang: ^3.15.0
slang_flutter: ^3.15.0
flutter_localizations:
sdk: flutter一旦pub get
当たり前ですが、pub getしてくださいね。
多言語ファイルを作成
多言語ファイルをまとめて入れておくフォルダを作る
lib>translationsというフォルダを作ります。
多言語ファイルを作る
最初に、参考になるサイトを貼っておきます。
先ほど作ったtranslationsフォルダにファイルを作ります。
基本的なファイル名は「translations_ロケール.i18n.json」です。
japaneseの場合は「translations_ja.i18n.json」となりますね。
正し、englishの場合のみ「translations.i18n.json」のようにロケールは省略する必要があります。
多言語の中身を書く
以下を参考にしてください。
translations.i18n.json
"home_page": {
"appbar_title": "HomePage",
"body": {
"category": "Category",
}
}translations_ja.i18n.json
"home_page": {
"appbar_title": "ホームページ",
"body": {
"category": "カテゴリ",
}
}こんな感じに階層で作ることが可能です。
⚠️「予約語」はkeyにしないでください。この後の工程でエラーが出ます。
多言語ファイル作成トピック
正規表現でシングルクォートに囲まれた文字だけ取り出す
ファイル内のコードをコピーし、VSCode等に貼り付けて正規表現でシングルクォートに囲まれた文字以外を消しましょう。
^(?!.*'([^']*)').*$作成した多言語を使えるようにする
ターミナルで以下のコマンドを実行してください
flutter pub run slang
lib>translationsに「strings.g.dart」が生成されます。
一度開いてエラーが出ていないか確認してください。
ここでエラーが出る場合、おそらく多言語ファイルのkeyに予約語が使われているか、多言語ファイルの中に足りないkeyがある可能性があります。
実際にコードで呼び出す
下準備
まずmain.dartのrunApp前を修正します。
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_widget/translations/strings.g.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
// 端末の言語を取得する
LocaleSettings.useDeviceLocale();
runApp(
TranslationProvider(
child: const MyApp(),
),
);
}
次にMaterialAppの中を修正します。
return MaterialApp(
locale: TranslationProvider.of(context).flutterLocale,
supportedLocales: AppLocaleUtils.supportedLocales,
localizationsDelegates: GlobalMaterialLocalizations.delegates,
child: YourProject()
);iOSのみ、info.plistに以下を追記してください。
<key>CFBundleLocalizations</key>
<array>
<string>ja</string>
<string>en</string>
</array>実際に使う方法
各階層を辿っていく方法で呼び出せます。
import '../translations/strings.g.dart';
print(t.home_page.body.category)
英語設定時：Category
日本語設定時：カテゴリ
最後に
参考になりました記事です。
