🌐

【Flutter】slangを使って多言語対応をしよう

2023/09/28に公開3件

Android

多言語対応をしよう

モバイルアプリケーションのグローバルな成功には、ユーザーが自分の言語でアプリを利用できることが欠かせません。Flutterは、幸運なことに、ローカリゼーションと多言語対応を容易に実現できるツールを提供しています。

この記事では、Flutterのローカリゼーション機能に焦点を当て、Slangパッケージを駆使して多言語対応アプリを開発する方法を紹介します。Slangパッケージは、Flutter開発者が言語リソースをスムーズに管理し、アプリ全体をローカライズするのに役立つ強力なツールです。本記事を通じて、異なる言語への対応方法やユーザーエクスペリエンス向上のヒントを詳しく探り、Flutter開発における次の一歩に備えましょう。Slangパッケージを駆使して、多言語対応アプリケーションの世界へ足を踏み入れましょう。

多言語対応の設定①

今回は多言語対応については、slangというパッケージを使用します。導入方法は以下のサイトに詳しく丁寧に書かれていますが、ここでは端折って必要な要素だけ書き出します。

https://pub.dev/packages/slang

使用パッケージ

slangを含め、必要なパッケージは以下の通りです。

pubspec.yaml

dependencies:
  flutter_localizations:
    sdk: flutter
  # localization
  slang: <version>
  slang_flutter: <version>
  
dev_dependencies:
  build_runner: <version> # build_runnerを使う場合に必要
  slang_build_runner: <version> # build_runnerを使う場合に必要

多言語のjsonファイルを作成

slangはjson、yaml、csvなど複数のファイル形式に対応しています。今回は、jsonを採用します。

ファイル配置

作成するファイルは以下のとおりです。

strings.i18n.json：英語対応用ファイル
strings_ja.i18n.json：日本語対応用ファイル

strings.i18n.json

{
    "mainScreen": {
        "title": "title",
        "signIn": "sign in",
        "signOut": "sign out"
    },
    "locales(map)": {
        "en": "en",
        "ja": "ja"
    }
}

strings_ja.i18n.json

{
    "mainScreen": {
        "title": "タイトル",
        "signIn": "新規登録",
        "signOut": "ログアウト"
    },
    "locales(map)": {
        "en": "英語",
        "ja": "日本語"
    }
}

ファイル構造は以下のとおりです。

lib
├── i18n
│   ├── strings.g.dart # 自動生成ファイル（後述）
│   ├── strings.i18n.json
│   └── strings_ja.i18n.json
└── main.dart

自動生成ファイル以外が正しく配置されたら、以下のコマンドでファイル生成

flutter pub run slang

iOSのみ`Info.plist`を編集

Info.plistに以下を追加します。

ios/Runner/Info.plist

<key>CFBundleLocalizations</key>
<array>
   <string>ja</string>
   <string>en</string>
</array>

多言語対応の設定②

実際に、dartファイルに設定を実装していきます。

デフォルト言語の設定

main.dartにLocaleSettings.setLocale(AppLocale.ja);を追加し、デフォルトの言語を日本語にします。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_learning/app.dart';

import 'i18n/strings.g.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  LocaleSettings.setLocale(AppLocale.ja);
  runApp(TranslationProvider(child: const App()));
}

サポート言語の設定と言語切り替えの設定

supportedLocalesで、jsonファイルで設定した言語のリストを参照します。

また、localizationsDelegatesでflutter_localizationsを使って、ユーザーが望む言語に合わせて切り替えるための仕組みを設計します。

app.dart

MaterialApp(
  supportedLocales: AppLocaleUtils.supportedLocales,
  localizationsDelegates: GlobalMaterialLocalizations.delegates,
  home: LocalizationsTestScreen(),
)

デバックして確認してみる

localizations_test_screen.dart

import 'package:flutter/material.dart';

import 'i18n/strings.g.dart';

class LocalizationsTestScreen extends StatefulWidget {
  const LocalizationsTestScreen({Key? key}) : super(key: key);

  @override
  State<LocalizationsTestScreen> createState() =>
      _LocalizationsTestScreenState();
}

class _LocalizationsTestScreenState extends State<LocalizationsTestScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(t.mainScreen.title),
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {},
              child: Text(t.mainScreen.signIn),
            ),
            TextButton(
              onPressed: () {},
              child: Text(t.mainScreen.signOut),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: () {
                    LocaleSettings.setLocale(AppLocale.en);
                    setState(() {});
                  },
                  child: const Text("English"),
                ),
                TextButton(
                  onPressed: () {
                    LocaleSettings.setLocale(AppLocale.ja);
                    setState(() {});
                  },
                  child: const Text("日本語"),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}