多言語対応の手順
アプリ名の多言語対応については、新規リリースページにて
◎flutter_localizationsをインストールする
・flutter pub add からでは機能しない。
・pubspec.yamlを編集する。
(一部抜粋)
dependencies:
flutter_localizations:
sdk: flutter
flutter:
sdk: flutter
(一部抜粋)
# The following section is specific to Flutter packages.
flutter:
generate: true
すなわち、
flutter_localizations:
sdk: flutter
および
generate: true
を追記する。
◎intl をインストールする
flutter pub add intl
flutter pub get
◎l10n.yamlを作成する
・プロジェクト直下のフォルダ(pubspec.yaml等がある)にl10n.yamlファイルを作成する。
・libフォルダに、l10nフォルダを作成する。
(l10n.yamlの例)
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
lib/l10nフォルダに、app_en.arb(英語の言語ファイル)があるよ、ということ。
◎言語ファイルを作成する
・lib/l10nフォルダに言語ファイル(app_en.arb、app_ja.arb等)を作成する。
・左の""内は小文字から始める。
・}の前には ,(カンマ)を付けない。
(app_en.arbの例)
{
"@@locale": "en",
"okstring": "OK",
"cancelstring": "Cancel",
"settingstring": "Setting",
"dateformatstring": "yMMMMd"
}
(app_ja.arbの例)
{
"@@locale": "ja",
"okstring": "OK",
"cancelstring": "キャンセル",
"settingstring": "設定",
"dateformatstring": "yyyy/MM/dd"
}
◎ファイル作成、インポート
・ターミナルからflutter pub get
・main.dart に、作成されたファイル(app_localizations.dart)をimportする。
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
◎locatizaionsをdelegateする
・MaterialApp 中に、localizationDelegates と supportedLocalesを記載する
(MyAppから一部抜粋)
// This widget is the root of your application.
class MyApp extends ConsumerWidget {
const MyApp ({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return
MaterialApp(
// 多言語対応
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('ja', ''),
// ... 他のlocaleを追加
],
◎flutter_localizations.dart をインポートする
import 'package:flutter_localizations/flutter_localizations.dart';
◎使用する
・プラグインをimportする。
import 'package:flutter_localizations/flutter_localizations.dart';
・Stringとして扱うことができる。(以下の例ではsettingstringに対応する文字が得られる)
AppLocalizations.of(context)!.settingstring
・MyApp内など、content使用時にエラーが出ると使えない。
・正しい記載なのに、エラーが出るときは一度デバッグ実行してみる。
(例)
IconButton(
icon: const Icon(Icons.settings),
tooltip: AppLocalizations.of(context)!.settingstring, // 英語ではSetting,日本語では設定が表示される
onPressed:() => _pageControlProvider.pages = Pages.ConfigurePage, // 設定ページへ
),