概要
少々大袈裟なタイトルですが・・・
どうせアプリをリリースするなら、日本だけでなく世界中の方に使ってもらいたいですよね！
Flutterは、多言語対応を容易に行うことができます！
ユーザーの言語設定に応じた表示が可能になるということです。
本記事では、Flutterアプリを日本語、英語、中国語
に対応させるための具体的な手順を解説します！
サンプル(日本語)
サンプル(英語)
多言語化の説明
Flutterには、flutter_localizationsパッケージが標準で用意されており、
多言語対応を行います。
またintlパッケージを利用することで、ローカライズされた文字列を管理しやすくします。
パッケージをインストールしよう
Flutterで多言語化を実現するために、以下のパッケージを使用します。
・flutter_localizations: Flutterの標準ローカライゼーションサポート。
・intl: 国際化とローカライゼーションをサポートするパッケージ。
これらのパッケージを使って、アプリに多言語対応を追加します！
参考URL
pubspec.yaml
pubspec.yamlに記載でもOKです。
dependencies:
flutter:
sdk: flutter
flutter_localizations: # 上記記載の多言語ライブラリ
sdk: flutter
intl: "^0.17.0" # format等関連ライブラリ
flutter:
generate: true #自動生成フラグの有効化
その後以下コマンドで依存関係をインストールします。
flutter pub get
多言語対応の設定
次にFlutterアプリで多言語対応を有効にするため、MaterialAppの設定を行います。
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'l10n/l10n.dart'; // l10nファイルをインポート
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 多言語化設定
// ==============================================
locale: Locale('en'), // デフォルト言語を英語に設定
supportedLocales: L10n.all, // 対応する言語を設定
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
// ==============================================
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context)!.title),
),
body: Center(
child: Text(AppLocalizations.of(context)!.welcome),
),
);
}
}
l10nのファイル作成
Flutterでは、l10n（localization）ファイルを使って、
各言語に対応するテキストを管理します。
そもそもl10nって？
アプリケーションの多言語対応のために使われるリソースファイルです。
各言語に対応するテキストがJSON形式で定義され、
「.arb」ファイルとして管理されています。
arb (Application Resource Bundle)
l10nファイルを作成してみよう！
lib/l10nディレクトリを作成し、
その中にintl_<言語コード>.arbファイルを用意します。
arbファイルは、言語によってコードが変わります！
・日本語：intl_ja
・英語：intl_en
・中国語：intl_zh
では日本語・英語・中国語のファイルを作成してみましょう！
lib/l10n/intl_en.arb
{
"title": "Welcome",
"welcome": "Welcome to our app!"
}
lib/l10n/intl_ja.arb
{
"title": "ようこそ",
"welcome": "アプリへようこそ！"
}
lib/l10n/intl_zh.arb
{
"title": "欢迎",
"welcome": "欢迎使用我们的应用！"
}
これらのファイルは、それぞれの言語に対応するテキストを定義します。
使用できる表現とそうでない表現もありそうです。
arbファイルを作成してビルドする
arbファイルを作成後にビルドをすると、自動でファイルが生成されます。
前章で作成したarbファイルの場合、英語版では下記のようなファイルが
自動で生成されます。
import 'package:intl/intl.dart' as intl;
import 'app_localizations.dart';
// ignore_for_file: type=lint
/// The translations for English (`en`).
class AppLocalizationsEn extends AppLocalizations {
AppLocalizationsEn([String locale = 'en']) : super(locale);
@override
String get title => 'Welcome';
}
アプリに実装しよう！
これらの設定を反映させることで、言語切り替えが可能になります!
Flutterはデバイスの言語設定に基づいて、適切な言語リソースを自動的に選択します。
では実際に実装して動作確認してみましょう！
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';
import 'l10n/l10n.dart'; // l10nファイルをインポート
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// 多言語化設定
// ==============================================
locale: Locale('en'), // デフォルト言語を英語に設定
supportedLocales: L10n.all, // 対応する言語を設定
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
// ==============================================
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppLocalizations.of(context)!.title),
),
body: Center(
// ここにTextで設定したファイルの内容を表示する
child: Text(AppLocalizations.of(context)!.title),
),
);
}
}
動作結果(中国語)
動作結果(英語)
冒頭に貼りましたが一応！
動作結果(日本語)
まとめ
設定やライブラリのインストールはもちろん必要にはなりますが、
意外と簡単ではないでしょうか？
端末の設定によって表示する内容を簡単に変えられます。
日本語ユーザーのみならず、世界中の方が対象になるアプリを作っちゃいましょう！
この記事が参考になれば幸いです！
参考文献