技術記事

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

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

1. AI Gen Componentとは

AI Gen ComponentとはFlutterFlow内でAIを用いてComponentを自動生成する機能です。プロンプトを書くとAIがそれに合ったUIを作成してくれるのでUI作成の時間を大幅に短縮することができます。

2. AI Gen Componentの使い方

まず、Componentを追加するのと同じ手順でNew Componentのページを開いてCreate with AIを選択します。

すると、以下のようにプロンプトを入力する画面になるので今回は例としてToDoリストとして使えるコンポーネントを生成してみます。

プロンプトは英語である必要があるので難しい方は翻訳などを使用して入力してみてください。出来上がったコンポーネントがこちらでした。

タイトル入力欄と詳細入力欄があり、その横にはチェックボックスがある状態で、まずまずの仕上がりかなと思います。これを使用したい場合は右下のInsert Componentを押して名前をつけることでプロジェクトに追加できます。

出来上がったものの詳細を見てみると、Hint Textのカラーが濃すぎたり、チェックボックスがIconとContainerで作られているなど、実際にこのまま使用するのはあまり適切ではないので自分で微調整をしながら使用することをお勧めします。

3. さいごに

今回はAI Gen Componentについて解説していきました。精度は少しずつ向上しているものの、まだそのまま使うのは難しいことが多いので手作業での実装も交えながら上手く活用していきましょう。

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