Flutterのローカライズ完全ガイド：未経験者向け入門

はじめに
1. 次の流れで進めます。
pubspec.yaml の設定
言語リソースファイルの作成
1. intl_ja.arb
2. intl_en.arb
ローカライズコードの自動生成
Flutterアプリにローカライズ反映
検証とベストプラクティス
最後に

はじめに

Flutterは多言語対応が容易なフレームワークです。今回は、ローカライズ実装の基本の手順を解説します。日本語と英語を例に、実装例を記事化しました。

次の流れで進めます。

pubspec.yaml の設定
ARBファイルの作成
コード生成の実行
Flutterアプリにのローカライズ反映
検証とベストプラクティス

pubspec.yaml の設定

Flutterでローカライズを実現するために、intl パッケージを使用します。以下の記述を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.

  generate: true # ファイルを自動生成するのに必要

設定後、次のコマンドを実行して依存関係をインストールします。

Bash

flutter pub get

言語リソースファイルの作成

言語リソースのデータを格納するARBファイルを作成します。たとえば、次の2ファイルをlib/l10n/ディレクトリに作成します。

intl_ja.arb

JSON

{
  "@@locale": "ja",
  "hello": "こんにちは",
  "@hello": {
    "description": "挨拶文"
  },
  "welcome": "ようこそ！",
  "@welcome": {
    "description": "ユーザーを歓迎するメッセージ"
  }
}

intl_en.arb

JSON

{
  "@@locale": "en",
  "hello": "Hello",
  "@hello": {
    "description": "Greeting text"
  },
  "welcome": "Welcome!",
  "@welcome": {
    "description": "Message welcoming the user"
  }
}

ローカライズコードの自動生成

ARBファイルを基に、intl_utilsを使ってローカライズ用のコードを生成します。

Bash

flutter pub run intl_utils:generate

実行後、lib/generatedディレクトリに、intl_messages.dartを含むファイルが生成されます。

Flutterアプリにローカライズ反映

ローカライズのため、MaterialAppに次の設定を追加します。

Dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Localization',
      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).welcome),
      ),
      body: Center(
        child: Text(S.of(context).hello),
      ),
    );
  }
}