多言語対応・文字列リソースの定義と利用方法


①Flutterアプリ内では、文字列リソースは直打ちせず共通のファイルに定義した上で利用する
②多言語対応も可能になる

1. 多言語用のライブラリのインストール

// pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # 多言語ライブラリの本体
    sdk: flutter  
  intl: "^0.17.0" # 多言語やフォーマッタなどの関連ライブラリ

flutter:
  generate: true #自動生成フラグの有効化

flutter pub getを実行

2. 多言語対応設定ファイルの作成

// {プロジェクトのルート}/l10n.yaml

arb-dir: lib/views/l10n
template-arb-file: app_ja.arb
output-localization-file: app_localizations.dart

3. 言語ファイル作成

// lib/views/l10n/app_ja.arb

{
  "@@locale": "ja",
  "home": "ホーム",
  "homeDetail": "ホーム詳細"
}

多言語対応をする場合は、言語ごとのファイルを作成する
英語の場合:app_en.arb

4. 自動ファイル生成

flutter pub getを実行

.dart_tool/flutter_gen/gen_l10n配下に下記ファイルが自動生成される
・app_localizations.dart
・app_localizations_ja.dart

5. アプリでの設定

+ import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
+     localizationsDelegates: AppLocalizations.localizationsDelegates,
+     supportedLocales: AppLocalizations.supportedLocales,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

6. アプリでの利用

import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(
        // lib/views/l10n/app_ja.arbにて定義した文字列リソースの利用
        title: AppLocalizations.of(context)!.home,
      ),
      body: const _Body(),
    );
  }
}

文字列リソースを利用する際はファイル先頭にimportを忘れずに!
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

7. 参考記事


この記事が気に入ったらサポートをしてみませんか?