【Flutter】gen_langを使ってみる

前置き

チュートリアルの国際化を読んで、そのとおりやればいいのかもしれないけど、pluginで良さげなのを見つけたので、それを使ってみます。
pub.devに記載しているまま、実施して書いてます。
一箇所だけ、記載が間違っている(わかりにくい)ので、違いはそこくらい。

プラグイン

今回使うのはこれ。
gen_lang
https://pub.dev/packages/gen_lang

ざっくり説明

指定のディレクトリにjson形式で、文字列を定義しておいて、generateするといい感じに使えるようになる。
言語はスマホの設定を元に切り替えてくれる。(らしい)
ファイルはこんな感じの名前で準備する。
string_en.json
string_ja.json

実装

1. プロジェクトを作成
2. pubspec.yamlに追記
3. ファイルを準備
4. generateコマンド実施
5. ソースを修正

プロジェクトを作成

Android StudioでFlutterのプロジェクトを作成してください。

pubspec.yamlに追記

dependenciesとdev_dependenciesに以下のように追記してください。

dependencies: 
    flutter_localizations: 
        sdk: flutter 
dev_dependencies:
    gen_lang: 0.1.3

追記して、保存したら右上の「Pub get」をクリックして、取得します。
バージョンは新しいものが出ているかもしれませんので、確認してください。

ファイルを準備

言語ファイルを準備します。今回は日本語のみ。

|--- lib 
|--- res 
     |--- string 
         |--- string_ja.json 

string_ja.jsonを以下の内容で作成します。

{
  "message": "あなたがボタンを押した回数"
}

generateコマンド実施

ここがPub.dev見てて、そのまま実行したらエラーになった。Flutterやってる人ならすぐ気づくと思うけど・・・
Android StudioのTerminalタブを開いて、以下を実行します。

flutter pub run gen_lang:generate

実行するとlib/generateが作成されて、中に２ファイル作成されているはず。
messages_all.dart
i18n.dart

ソースを修正

main.dart

import 'package:gen_lang_sample/generated/i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

gen_lang_sampleは、自分で作成したプロジェクト名に置き換えてください。

13行目の次の行に以下を追記 (return MaterialAppの次の行)

main.dart

      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,

109行目のテキストの内容を変更します。
変更前

main.dart

              'You have pushed the button this many times:',

変更後

main.dart

              S.of(context).message,

main.dartを保存します。

エミュレータで確認

実行するとこんな感じになっていると思います。

main.dartの全量

コメント行消してます。

main.dart

import 'package:flutter/material.dart';
import 'package:gen_lang_sample/generated/i18n.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
      ],
      supportedLocales: S.delegate.supportedLocales,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              S.of(context).message,
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

最後に

閲覧ありがとうございました。
Flutterはまだまだ勉強中なので、間違っていたり、もっといい方法があるかもしれませんので、お気づきの点があればコメントください。