【Flutter】easy_localizationを使ったシンプルな言語変換アプリの作成方法

image

今回はFlutter製アプリでの言語変換の方法をご紹介します。
ボタン一つで言語が変換できるようになります。
この記事では、以下のような日本語と英語の変換を行うアプリの作り方を説明していきます。

言語変換アプリ

環境

  • Flutter version 2.2.2
  • Dart version 2.13.3
  • easy_localization: ^3.0.0

使用パッケージ(easy_localization)

使用するパッケージはeasy_localizationです。
アプリの多言語化を行う場合には、このパッケージを使用することが多いと思います。
以下でパッケージインストールから、ソースコード以外の設定部分の説明をしていきます。

easy_localizationのインストール

pubspec.yamldependenciesに以下を追加

dependencies:
  easy_localization: ^3.0.0 #最新のものを使用してください

そしてflutter pub getでOKです。 詳細は公式のインストールページを参照してください。

言語のjsonファイルの準備

使用するテキストはjsonファイルで管理します。

1.プロジェクトのディレクトリにassets/langsフォルダを追加

テキストを管理するためのフォルダを用意します。

2.langsフォルダ内にテキストを管理するjsonファイルを用意

日本語のテキストを管理するja-JP.jsonと英語を管理するen-US.jsonを用意します。
jsonファイルを追加後の構造は以下のようになります。

assets
└── langs
    ├── en-US.json
    └── ja-JP.json

3.pubspec.yamlファイルassetの場所を宣言する

pubspec.yamlファイルのassetsの部分に、上記で追加したフォルダ(langs)のパスを追加します。

assets:
    - assets/langs/

easy_localizationを用いたFlutter製の言語変換アプリの作成手順

以下ではFlutter製言語変換アプリのソースコード部分を説明していきます。

コード全文

とりあえずソースコード全文を記載します。 詳細やポイントに関しては、以下で説明していきます。

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:easy_localization/easy_localization.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(EasyLocalization(
    child: MyApp(),
    supportedLocales: [Locale('ja', 'JP'), Locale('en', 'US')],
    path: 'assets/langs',
    fallbackLocale: Locale('ja', 'JP'),
    saveLocale: false,
  ));
}

class MyApp extends StatelessWidget {
  
  Widget build(BuildContext context) {
    final _ezContext = EasyLocalization.of(context)!;
    return MaterialApp(
      title: 'Change Lang App',
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        _ezContext.delegate,
      ],
      supportedLocales: _ezContext.supportedLocales,
      locale: _ezContext.locale,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage();

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(tr('title'), style: TextStyle(fontSize: 20))),
      body: _body(context),
    );
  }

  Widget _body(BuildContext context) {
    final supportLocales = context.supportedLocales;
    final currentLocale = context.locale;
    return Center(
      child: Column(
        children: [
          Row(
              mainAxisSize: MainAxisSize.min,
              children: supportLocales
                  .map((locale) => _btn(context, locale, currentLocale))
                  .toList()),
          const SizedBox(height: 20),
          Text(tr('lang_name'), style: TextStyle(fontSize: 16)),
          const SizedBox(height: 4),
          //context.localeで現在のlocaleが取得できる
          Text(context.locale.toString(), style: TextStyle(fontSize: 16))
        ],
      ),
    );
  }

  Widget _btn(BuildContext context, Locale locale, Locale currentLocale) {
    final isActive = locale.languageCode == currentLocale.languageCode;
    return Padding(
      padding: const EdgeInsets.all(8),
      child: ElevatedButton(
          style: ElevatedButton.styleFrom(
              primary: isActive
                  ? Theme.of(context).accentColor
                  : Theme.of(context).disabledColor),
          onPressed: () => context.setLocale(locale),
          child: Text(locale.languageCode)),
    );
  }
}

コードの詳細部分に関して、説明を加えていきます。

初期化処理

main関数の中は以下の通りです。
runAppの前でEasyLocalization.ensureInitialized()を呼び出します。

void main() async {
 //公式ドキュメントより↓   
 // Needs to be called so that we can await for EasyLocalization.ensureInitialized();
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

  runApp(...);
}

言語に関する詳細設定

以下で言語に関する詳細設定を行っています。

  • サポート言語(supportedLocales)
  • 言語ファイル(jsonファイル)のパス
  • 言語が取得できなかった場合のデフォルト言語
  • 端末ストレージに言語情報を保存するかどうか
  runApp(EasyLocalization(
    child: MyApp(),
    supportedLocales: [Locale('ja', 'JP'), Locale('en', 'US')],
    path: 'assets/langs',
    fallbackLocale: Locale('ja', 'JP'),
    saveLocale: false,
  ));

他にも詳細設定できるので、必要であればカスタマイズしてみてください。

MaterialApp内の言語設定

final _ezContext = EasyLocalization.of(context)!;
_ezContextに上記で設定した言語情報が入っています。

Widget build(BuildContext context) {
    final _ezContext = EasyLocalization.of(context)!;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        _ezContext.delegate,
      ],
      supportedLocales: _ezContext.supportedLocales,
      locale: _ezContext.locale,
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }

言語情報の取得

MyHomePageクラス内で、以下のように言語情報が取得できます。

final supportLocales = context.supportedLocales; //サポート言語リスト
final currentLocale = context.locale; //現在の言語

言語変換方法

context.setLocale(locale)で言語が変換できます。
localeの中に適用したい言語を入れます。

このアプリでは、ボタンで言語情報が変更できるようになっているので、ボタンのonPressedcontext.setLocale(locale)を呼んでいます。

    ElevatedButton(
          style: ElevatedButton.styleFrom(
              primary: isActive
                  ? Theme.of(context).accentColor
                  : Theme.of(context).disabledColor),
          onPressed: () => context.setLocale(locale), //ここ
          child: Text(locale.languageCode))

言語ごとのjsonファイルの中身

AppBarのタイトルと言語名の2つのみ用意してあります。
ja-JP.json

{
  "lang_name": "日本語",
  "title": "言語変換アプリ"
}

en-US.json

{
  "lang_name": "English",
  "title": "Change Lang App"
}

これで簡単なFlutter製の言語変換アプリの完成です。

まとめ

いかがでしたでしょうか。 上で説明したように、意外とシンプルに言語をスイッチングできます。 言語変換機能の組み込みの際に参考にしていただけると幸いです。

Githubのリポジトリこちら

参考

easy_localizationの基本的な使用方法は公式ページを参考にしています。

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (99)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (4)新卒 (4)就活 (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)デザイン (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)画像 (2)Figma (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)flutter (1)Image (1)File (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More