🙆♀️
【Flutter】多言語対応(Flutter Intlプラグイン)
この記事について
今回はFlutter Intlというプラグインを勉強しました。
こちらのプラグインを導入して、単語を登録すると、スマホの言語設定によってテキストを出し分けてくれるプラグインです！
設定が少し長かったので、メモとして残しておきます。
この記事を見られて
・ここ間違ってるよ！
・こうした方がいいよ！
・この説明がわかりにくい！
などありましたらお気軽にコメントください！
使用する環境
- Android Studio Arctic Fox | 2020.3.1 Patch 4
- macOS Monterey version12.1
参考にしたサイト
1. プラグインのインストール
- Android Studioの設定を開く
Android Studio | Preferences | Plugins - 検索窓で
Flutter Intlと検索し、インストール
(上のタブがMarketplaceになっているか確認)
-
Restart IDEと出てくるので押して、Android Studioを再起動する - 再起動後、メニューバーの
Toolsを開き、Flutter Intlがあれば完了
2. Flutter Intlを初期化する
-
Tools | Flutter Intl | Initialize for the Projectを実行
3. flutter_localizationsパッケージをインストール
-
pubspec.yamlファイルにflutter_localizationsを追加
pubspec.yaml
dependencies:
flutter:
sdk: flutter
+ flutter_localizations:
+ sdk: flutter
- ターミナルで
flutter pub getを実行
flutter pub get
- 先ほどまで表示されていた
generatedフォルダのエラーが消えていれば完了
4. main.dartに設定
-
main.dartのMaterialAppに追記
main.dart
// import一部省略
+ import 'generated/l10n.dart';
+ import 'package:flutter_localizations/flutter_localizations.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "ローカライズのやり方",
+ localizationsDelegates: [
+ S.delegate,
+ GlobalMaterialLocalizations.delegate,
+ GlobalWidgetsLocalizations.delegate,
+ GlobalCupertinoLocalizations.delegate
+ ],
+ supportedLocales: S.delegate.supportedLocales,
home: HomeScreen(),
);
}
}
5. 変換したい言語や単語を設定
- 変換したい言語の
arbファイルを作成する
メニューバーのTools | Flutter Intl | Add Localeを開く
Add New Localeにjaと入力しOKをクリック
lib/generated/l10nフォルダにintl_ja.arbが作成される - 作成したファイルに変換したい単語を登録する
intl_ja.arbに日本語
intl_en.arbに英語を登録します。
intl_ja.arb
{
"title": "テストアプリ",
}
intl_en.arb
{
"title": "Test App",
}
- 先ほど設定した
titleを使用してみる
home_screen
// import省略
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
+ child: Text(S.of(context).title),
),
);
}
}
- エミュレーターで表示確認
エミュレーターの言語設定が日本語の場合はテストアプリと表示され、言語設定を英語に変更して再度確認するとTest Appと表示が変わっていれば完了
6. iOSで表示させる設定
- Xcodeを開く
iosフォルダを右クリック
Flutter | Open iOS module in Xcodeをクリック - 左側のタブの
Runner/Runner/Infoをクリック -
Information Property Listにマウスカーソルを合わせると右側に＋が現れるのでクリック -
Localizationsと入力してEnter -
Localizationsの左側にある>をクリック -
Item 0にマウスカーソルを合わせると右側に＋が現れるのでクリック -
Item 1が生成されるので右側のValueにJapaneseと入力
- エミュレーターで確認
- 言語設定を日本語、英語に変更し、変わっていれば完了
おわりに
以上で設定が終わりました！
簡単にAndroidもiOSも多言語対応ができるのがやっぱりFlutterの良いところなのかなと思いました！
冒頭にも書きましたが、何かあればコメントしてやってください🙇🏻♂️
また何か調べたり実装したらアウトプットしていきます！
Discussion
参考になります！この記事を見て多言語対応していたのですが、
現在（2023/02/03、6のステップをやらなくても、iOSシュミレーターでは言語切り替えができていたのですが、実機で見るとならないとかそういうことですかね。。
ありがとうございます！
6のステップやらなくても大丈夫そうですね🤔
実機でも試しましたが問題なく表示できましたのでご安心ください！