技術記事

micomia株式会社の井上です。今回はAI Gen Pageについて解説していきます。

初心者にもわかりやすく解説していくのでぜひご一読ください。

1. AI Gen Pageとは

AI Gen PageはAIで画面を自動生成する機能です。以前AI Gen Componentについて解説しましたがそちらの画面バージョンになっています。

AI Gen Componentの記事は以下からご覧ください。

AI Gen Componentとは？｜初心者向けのFlutterFlow徹底解説

2. AI Gen Pageの使い方

今回は例として住所入力用の5つのText Fieldを縦並びに表示させます。プロンプトは以下で指示を出します。

すると以下のような画面が生成されました。このUIを見た感じ少し修正すれば使えそうです。ページとして追加したければInsert Pageを押して画面名を決めると追加できます。

追加できたのでWidgetを詳しく見ていくと、入力欄もしっかりText Fieldで実装されているので問題なさそうですが、1点気になるのはHint Textのカラーです。現状だとPrimary Textのカラーで実装されているのですがHint Textはもう少し薄くするのが適切です。

今回は修正して以下のようなカラーにしてみました。

これで、言語は英語のままでActionはついていないですがUIとして違和感のないようになったのではないかなと思います。

3. さいごに

今回はAI Gen Pageについて解説していきました。AI Gen Componentと同様、精度的にまだそのまま使うことは難しいですが上手く使用すると実装を効率化できると思うのでぜひ本記事を参考にしながら使用してみてください。

本記事の内容を動画で観たい方は以下をご覧ください。

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