【Flutter】多言語対応する

Flutter をAndroid Studioで開発する際、簡単に多言語化対応出来るので、そちらを紹介しようと思います・

プラグインのインスルール

Android Studioのプラグインで、「Flutter Intl」をインストールします。
インストールが終わると「Tools」メニューに「Flutter Intl」の項目が追加されます。

Flutter Intlの導入

「Flutter Intl」の「Initialize for the Project」を選択します。
選択すると、下記が追加されます。

pubspec.yaml

flutter_intl:
  enabled: true

また、lib配下に「generated」と「l10n」が追加されます。
ただし、「generated」にはエラーが表示されています。
下記を追加して、「Pub get」を実施することで、エラーは解消します。

yaml:pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
+  flutter_localizations:
+    sdk: flutter

多言語ファイルを追加

多言語のファイルを追加するために「Tools -> Flutter Intl -> Add Locale」を選択します。
下記のダイアログが表示されるので、「ja」など必要な言語を追加します。

それぞれのファイルで、多言語を記載します。

intl_en.arb

{
  "@@locale": "en",
  "title": "Title"
}

intl_ja.arb

{
  "@@locale": "ja",
  "title": "タイトル"
}

UIに適用する

「MaterialApp」に対して、下記を追加します。

dart:main.dart

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
+      localizationsDelegates: const [
+        S.delegate,
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate,
+        GlobalCupertinoLocalizations.delegate
+      ],
+      supportedLocales: S.delegate.supportedLocales,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

実際にUIに適用する場合、下記の記載をします。

S.of(context).title

これで、多言語対応が完了になります。

Text(S.of(context).title)

他に多言語対応のプラグインがありますが、複雑な多言語対応を行わない場合、標準で手軽に導入出来る本手順を参考にしてみてください。