【Flutter】多言語に対応する【flutter_localization】

Flutterでflutter_localizationを使って多言語に対応したい！

概要

今回の記事では、Flutterでflutter_localizationを使って多言語に対応する手順を掲載する。

仕様書

環境

Android Studio Giraffe | 2023.2.1 Patch 2
Flutter 3.19.6

手順書

インストール編とコード編の2部構成です。

インストール編

flutter_localizationは他のパッケージとは違っていろいろ下準備が必要になる。

pubspec.yamlのdependencies:に下記のような感じで追加する。flutter_localizationsの他に特定のバージョンのパッケージも必要になる。

...

dependencies:
  flutter_localizations:
    sdk: flutter

  ...

  intl: ^0.18.1

...

同じくpubspec.yamlのflutter:にgenerate: trueを追加する。

...

flutter:
  generate: true

...

プロジェクトのフォルダの直下にl10n.yamlを作成して、中身を下記のような感じにする。

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

arb-dirの値は言語ファイルの保管場所となる。ので、libの中にフォルダl10nを作る。

今回は英語（en）と日本語の（ja）の言語ファイルを作ってみる。

まず英語の言語ファイルを作る。lib/l10n/app_en.arbを作って、中身を下記のようにする。

{
  "@@locale":"en",
  "hello": "Hello"
}

次に日本語の言語ファイルを作る。lib/l10n/app_ja.arbを作って、中身を下記のようにする。

{
  "@@locale":"ja",
  "hello": "こんにちは"
}

enやjaの言語コードについては「ISO 639-1」を参照。

ISO 639-1コード一覧 - Wikipedia

言語ファイルを作るにあたって気をつけてほしいのが、他の言語でのJSONの取り扱い時には許容される事が多いんだけども、flutter_localizationsでは最後の要素の,があるとエラーになるので注意。例えば下記ではエラーになった。

{
  "@@locale":"ja",
  "hello": "こんにちは",
}

ここまで来たらターミナルでコマンドを実行するとflutter_localizationsのインストールとl10n.yamlのoutput-localization-fileで指定したファイルの作成される。

flutter pub get

言語ファイルを修正したり、追加したりしたら、都度flutter pub getする必要がある。

コード編

初期の言語設定を英語する例。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'),
        Locale('ja'),
      ],
      locale: const Locale('en'),
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyWidget(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: Text(AppLocalizations.of(context)!.hello,
          style: const TextStyle(
          color: Color(0xFF000000)
          ),
        ),
      )
    );
  }
}

app_localizations.dartがimportできない場合は、必要なファイルが自動生成されてない可能性が高いので、ターミナルでflutter pub getを実行する。

MaterialAppのプロパティに言語関連の設定に関するものが追加されてるのでそれぞれ設定する。
localizationsDelegatesには多言語化する範囲を設定する。
supportedLocalesには対応する言語を設定する。
localeには初期設定の言語を設定する。この値を変更すると言語を切り替えれる。

まとめ（感想文）

言語を動的に切り替えるにはriverpodを使ったり、いろいろやり方はあるんだけどもそれはまた別の記事で。