技術記事

micomia株式会社の畑井です。
今回はFlutterFlowを触ったことない方に向けて料金プランから使い方を少しだけ紹介するチュートリアル記事を用意しました。
FlutterFlowってどんな感じなの？と気になっている方がいればぜひ一度本記事を見ながらFlutterFlowを使ってみてください。

1.FlutterFlowのサイトにアクセス

https://www.flutterflow.io/

「Start for Free」を押してアカウントを作成しましょう。
どんな感じなのか試したり、少しアプリを作る勉強くらいでしたらそのまま無料プランのままでお使いいただけます。
FlutterFlowではWEB版だけではなく、デスクトップアプリ版もあったりアカウントさえ覚えておけば他のパソコンでも開けるのでメールアドレスとパスワードで作成しておくと便利です。

2.プロジェクトを作成する

アカウント作成とアンケートが完了するとこのような画面が表示されます。テンプレートから始めたり、何もない状態から始めるなど選ぶことができます。
テンプレートを使ってアプリを量産すれば儲けられてるのではないかと安直に考えがちですが、このテンプレートを使ってiOS/Androidのアプリストアへ審査を出すとこのデザインはオリジナルではないのでストアでリリースできませんと表示されます。
ストアへのリリースを考えられている方はテンプレートをあまり使わずに何もない状態からの開発を選ぶ方が良いと思います。

プロジェクト名を決めて、「Start Building」を押しましょう。

3.開発スタート

使い方のガイダンスなどがありますが、それが全て完了するとこのような画面に移動します。
ここから作り始めるわけですが初めての方には随分と難しい話なので少しだけ使い方を紹介できればと思います。

左側メニューからPage Selectorというものをクリックします。
このページでは作成しているページをリストで確認することができます。
初期状態ではHomePageというものができていますが、これを利用せず、画面左側にある緑色のボタンのプラスマークを押してページを新規追加してみましょう。

テンプレートも選べますが白の枠線で囲われている部分の「Create Blank」を押してください。
次にページの名前を入力してください。

このようにページが一つ追加されていれば成功です。
次にどうやってボタンやテキストを置いていくのかの話に移ります。

Widget Paletteに移動します。
左側にTextやColumnなどパーツがたくさん並んでいると思います。
これらを総称してWidgetと呼びます。

Text Widgetを置いてみました。
マウスでTextをドラッグして、白の画面に置いてみてください。
画面上にTextを置くことができました。

簡単にWidgetを置くためのルールを説明しますと画面上に2個以上Widgetを置きたい場合はColumnやRow、StackというWidgetを使わなければいけません。

Widget Treeに移動してください。
Widget TreeではそのページにどんなWidgetが配置されているのかを一覧でみることができます。

先ほど配置したText Widgetの上にColumnというWidgetが入っていることが確認できると思います。
これはもともとページを作成した際に自動的に入っているWidgetなのですがこれがあることにより、一つの画面の中にWidgetを複数個置くことができます。

しかし、注意点として複数個自由に置くことができるわけではないので下記の点を意識してください。

Column・・・複数個のWidgetを縦に並べることができる
Row・・・複数個のWidgetを横に並べることができる
Stack・・・複数個のWidgetを重ねて置くことができる

FlutterFlow公式でも英語で詳細に解説されています
https://docs.flutterflow.io/resources/ui/widgets/composing-widgets/rows-column-stack/

4.テストしてみる

実際に作った画面をテストしたい時は画面右上の雷マークを押してください。テストモードを起動できますのでそこから実際の動きに近い形で動作を確認することができます。

5.設定画面の紹介

画面左下の設定マークを押すとこのような画面が表示されます。

ここでは簡単に説明します。

「Collaboration」はこのプロジェクトに他のユーザーを招待するときに利用する機能です。有料機能となっています。(2025年9月現在)

「Firebase」はデータ保存などデータベースとの接続をするための機能を提供する画面です。FlutterFlowはFirebaseととても相性がいいので簡単に接続することができます。
細かな違いなどはあるのですが初めての方はまずFirebaseと接続してみてください。

「Languages」はアプリ内言語を定義できるページです。日本語に設定してあげないと英語のアプリができあがります。

「Mobile Deployment」はiOS/Androidでリリースするためにビルドするページです。簡単にビルドできないのでつまずくことが多いとは思いますが、別のところでビルドのやり方を記事にできればと思います。

「Web Deployment」はWEBアプリとしてリリースするための機能です。このページから簡単にアプリをURLにパブリッシュできます。

6.最後に

今回は簡単にFlutterFlowの概要を解説してみました。
他の記事ではさらに踏み込んだ細かい内容を紹介していますのでぜひご覧ください。

YouTubeでは初心者の方が45分ほどでFlutterFlowの使い方を簡単にマスターできる動画をアップしていますのでさらに勉強してみたい方や記事ではわかりにくいところがあった方は視聴してみてください。

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