【Flutter】多言語化,Internationalization

flutter

1. 概要

今回はアプリ内での多言語化についてです。

対象としては開発を1年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. プロジェクトの準備

2-1. プロジェクトを作成

3. pubspec.yaml

3-1. Dependenciesの追加

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line
  intl: ^0.17.0 # Add this line

3-2. ファイルの自動生成設定

flutter:
  uses-material-design: true
  generate: true # Add this line
  • generate: true
    • ファイル自動生成の設定

4. 多言語設定ファイルの作成

4-1. l10n.yaml

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

5. ARBの作成

5-1. lib/l10n/app_en.arb

{
  "@@locale":"en",
  "language": "Language"
}

5-2. lib/l10n/app_ja.arb

{
  "@@locale":"ja",
  "language": "言語"
}

5-3. lib/l10n/app_ko.arb

{
  "@@locale":"ko",
  "language": "언어"
}

ARB stands for Application Resource Bundle. It is actually a JSON file on steroids intended for localization, with .arb extension. Since it is based on JSON, it just defines standardized ways how to add more information around key-value pairs.

https://localizely.com/flutter-arb/

5-4. 自動生成

flutter pub get

5-5. 自動生成先

  • .dart_tool/flutter_gen/gen_l10n
    • app_localizations.dart
    • app_localizations_en.dart
    • app_localizations_ja.dart
    • app_localizations_ko.dart

6. ソースコード

6-1. lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Locale locale = AppLocalizations.supportedLocales.first;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'),
        Locale('ja'),
        Locale('ko'),
      ],
      locale: locale,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Internationalization'),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              AppLocalizations.of(context)!.language,
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
              createButton('en'),
              SizedBox(width: 20, child: Container()),
              createButton('ja'),
              SizedBox(width: 20, child: Container()),
              createButton('ko'),
            ]),
          ],
        ),
      ),
    );
  }

  Widget createButton(String btnName) {
    return ElevatedButton(
        onPressed: () => changeLanguage(btnName), child: Text(btnName));
  }

  void changeLanguage(String btnName) {
    context.findAncestorStateOfType<_MyAppState>()!
      ..locale = Locale(btnName)
      ..setState(() {});
  }
}

7. 結果

8. 参考

関連記事

  1. flutter

    【Flutter】GoogleMapを使用したアプリの開発について P…

  2. flutter

    【Flutter】APIからデータを取得し画面に表示(Flutter,…

  3. 【Widget of the Week】#2 Expanded

  4. flutter

    【Flutter】Demoプロジェクトの値の状態を管理(Flutter…

  5. flutter

    【Flutter】Android画面に小さなポップアップ(Toast,…

  6. 【Widget of the Week】#6 FutureBuilde…

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS
  8. AWS

制作実績一覧

  1. Checkeys