【Flutter】確実に楽な多言語対応(i18n

Flutter

備忘録です。

多言語対応準備

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というフォルダを作ります。

多言語ファイルを作る

最初に、参考になるサイトを貼っておきます。

【Flutter】fast_i18nをインストールする【i18n】

先ほど作った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

日本語設定時:カテゴリ

最後に

参考になりました記事です。

gpt-3.5-turboとslang(旧fast_i18n)でFlutter Webを多言語化する
【Flutter】fast_i18nをインストールする【i18n】

Buy me a coffee!

Flutterアプリ開発
シェアする
sogaをフォローする
タイトルとURLをコピーしました