Flutterでアプリを多言語化する方法：初心者向け完全ガイド

はじめに
多言語化とは？
必要なパッケージ
1. pubspec.yamlに依存関係を追加
MaterialAppに多言語化を有効化
1. main.dart
2. ポイント
intlとarbファイルを使用して翻訳データを管理
1. arbファイルを作成
  1. intl_en.arb
  2. intl_ja.arb
2. intl_utilsでコードを自動生成
コードで翻訳を使用
1. main.dart（更新）
動作確認
技術選定のポイント
まとめ

はじめに

Flutterは、世界中のユーザーを対象とするアプリケーション開発に最適なフレームワークです。多言語化（国際化）は、異なる言語や地域のユーザーに対応するための重要な機能です。この記事では、Flutterアプリを多言語化する方法を初心者にもわかりやすく解説します。

多言語化とは？

多言語化（Internationalization, i18n）は、アプリケーションを複数の言語や地域に対応させるプロセスです。例えば、日本語、英語、フランス語など、ユーザーのデバイスの設定に応じて表示言語を切り替えられるようにします。

必要なパッケージ

Flutterでは、以下のパッケージを使用して多言語化を簡単に実現できます：

flutter_localizations：Flutter SDKに組み込まれた多言語化のための公式ライブラリ。
intl：国際化に必要な日付、数値、テキストフォーマットを提供。
intl_utils：arbファイルを使って多言語化データを効率的に管理。

pubspec.yamlに依存関係を追加

以下をpubspec.yamlに記載してパッケージを追加します

YAML

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.19.0
  intl_utils: ^2.6.2
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  generate: true

その後、以下のコマンドでパッケージをインストールします

Bash

flutter pub get

MaterialAppに多言語化を有効化

FlutterアプリのエントリーポイントであるMaterialAppにローカライゼーションを設定します。

main.dart

Dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 多言語化',
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: [
        Locale('en', ''), // 英語
        Locale('ja', ''), // 日本語
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('多言語化サンプル'),
      ),
      body: Center(
        child: Text('こんにちは！'),
      ),
    );
  }
}

ポイント

localizationsDelegates：Flutterがローカライズされたリソースを取得するためのデリゲートを設定。
supportedLocales：アプリがサポートする言語を定義。

intlとarbファイルを使用して翻訳データを管理

Flutterでは、intlパッケージを利用して翻訳データを管理します。

arbファイルを作成

lib/l10nディレクトリを作成し、以下のようなintl_en.arbとintl_ja.arbファイルを作成します。

intl_en.arb

JSON

{
  "@@locale": "en",
  "appTitle": "Flutter Localization",
  "greeting": "Hello!"
}

intl_ja.arb

JSON

{
  "@@locale": "ja",
  "appTitle": "Flutter 多言語化",
  "greeting": "こんにちは！"
}

intl_utilsでコードを自動生成

以下のコマンドを実行してコードを自動生成します

Bash

flutter pub run intl_utils:generate

これにより、lib/generated/l10n.dartが生成されます。

コードで翻訳を使用

main.dart（更新）

Dart

import 'package:flutter/material.dart';
import 'generated/l10n.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: S.of(context).appTitle,
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(S.of(context).appTitle),
      ),
      body: Center(
        child: Text(S.of(context).greeting),
      ),
    );
  }
}