技術記事

micomia株式会社の畑井です。
今回はFlutterFlowの80ドルプランから提供されているOne Click Localizationを解説していきます。

1.FlutterFlowのプラン

One-Click Localizationという機能を解説していきます。
基本的には39ドルのプランで十分なのでこのプランを契約している人は少ないと思います。

2.Localizationを利用する

SettingのLanguagesに移動して、言語の追加を行います。
Localizationは多言語対応アプリを効率良く作成できる機能となっているため言語を2つ以上設定する必要があります。

今回は英語と日本語をセットしました。
画像ではPrimaryが日本語になっていますが、英語など他の言語がPrimaryになっていても動作には問題ありません。

少しスクロールするとこのようにページに設定しているText Widgetの中身が表示されます。
「Translate Page」ボタンを押すとFlutterFlow側がすべて自動で翻訳してくれます。

ボタンを押すだけで自動翻訳されたテキストがセットされるためとても便利な機能です。
翻訳に違和感がある場合は入力欄から直接変更することができます。
もう一度「Translate Page」ボタンを押すと直接書き換えたものがまた自動翻訳されてしまうため「Fixed」というところにチェックを入れておいてください。

Welcomeというのはこのようなページでした。
これは自前で用意していますので、翻訳対象のテキストなどは読者の方が開発したページに依存します。

あとは言語を切り替える機能をつけるとアプリ内で言語の切り替えを実現することができます。
また、端末のデフォルト言語から自動で言語選択されるため端末の言語に合わせたい場合は言語切り替えページを作る必要はありません。

3.まとめ

今回はLocalizationについて解説しました。
注意点ですがユーザーが作成した投稿などは翻訳されません。
こちらはDeepLのAPIやGoogle翻訳のAPIなどを利用して実装する必要があります。

動画でもっと知りたい方はこちら