🐣

FlutterFlow エディターの使い方まとめ

yksmt

2023/04/28に公開

はじめに

この記事では、GoogleのUIフレームワークであるFlutterをベースにした、アプリ開発ツールである「FlutterFlow」のエディターについて英語のドキュメントを参考に日本語でまとめたものです。画面項目のスクリーンショットは、v3.1のものを使用しています。

FlutterFlow について

FlutterFlowはGoogleのUIフレームワークであるFlutterがベースです。Flutterはマルチプラットフォームのための開発環境であるため、1つのコードだけであらゆるプラットフォーム（Windows、MacOS、Android、iOS、Web..etc）に対応したアプリを作ることができるフレームワークです。

そしてFlutterFlowは、さらにこのFlutterをベースにしたGUIのアプリ開発ツールで、直感的なUIエディターによりドラッグアンドドロップでアプリを構築することができます。また加入プランによってはソースコードを丸ごとダウンロードすることができるので、「MVPとして作成したアプリをコードベース開発に移行する」といったことが比較的スムーズに実行できるツールになっています。

FlutterFlowエディター

今回は、そんなFlutterFlowの開発画面となるエディターについてです。エディターを下図のように5つのエリアに分割してまとめました。

1.ナビゲーションメニュー

エディターの一番左側、縦に並んだメニューがナビゲーションメニューと呼ばれる部分です。アイコンをクリックすることで、ウィジェットパネル、キャンバスエリア、プロパティパネル部分の表示が切り替わります。

アイコン	詳細
	プロジェクトを管理するダッシュボードに遷移します。ダッシュボードでは新しいプロジェクトを作成（Create New）したり、既存のプロジェクトをコピー（Duplicate Project）、削除（Delete Project）したりできます。
	UIビルダー。アプリで追加できるウィジェットやコンポーネント、テンプレートなどにアクセスできます。
	ウィジェットツリーを表示します。作成しているアプリのページやコンポーネントを一覧で確認したり、ページに配置されたウィジェットをツリー状で確認することができます。またウィジェットツリーでは、どのウィジェットにアクションやデータがセットされているのかアイコンの表示で確認することができます。
	ページセレクター。v3.1現在はウィジェットツリーに統合されているため、ページセレクターのアイコンはナビゲーションメニューに表示されていません。 AppSettingsの「FolderOrganization」の設定をオンにすることで、ウィジェットツリーでページとコンポーネントを整理して表示することができるようになっています。
	ストーリーボードに遷移します。ストーリーボードとは画面遷移図のようなもので、アプリ全体のデザインとナビゲーションを視覚的に確認することができます。
	Firestoreの設定を行います。Firestoreにデータベースを作成したり、ルールの更新を行うことができます。Firestoreを使用するには、接続するためのFirebaseプロジェクトを別途準備する必要があります。
	AppState。AppStateは、アプリ内で使用する変数を定義する場所です。なお、FlutterFlowではAppStateとは別に、選択中のページ内だけで使用できるローカル変数（PageStateやWidgetStateと呼ばれます）を作成することもできます。
	APIの呼び出しを定義する場所です。加入プランによって定義できるAPIコールの数は制限されます（Freeプランの場合は2つ）。
	アプリで使用する画像アセットをアップロードしたり、削除することができます。
	ここでカスタムファンクションやカスタムウィジェット、カスタムアクションを定義することができます。
	ここでテーマカラーなどのデザイン部分を設定します。NavBarやAppBarの色設定に関しては、次の設定（Settings）に含まれる場合があります。
	設定画面（Settings）。ここでアプリに関する一般的な設定や、プロジェクトの設定などを行います。

2.ウィジェットパネルエリア

ウィジェットパネル部分は、ナビゲーションメニューで選択しているメニューによって表示される内容が異なります。

開発中に使用することが多いのは、ナビゲーションメニューで「UIビルダー」を選択している場合に表示される配置可能なウィジェット/コンポーネントの一覧、もしくは「ウィジェットツリー」を選択している場合に表示される作成したページ/コンポーネントと選択ページのウィジェットツリーです。

2.1.UIビルダー

ウィジェットパネルには、UI要素やコンポーネント、テンプレートが表示されていて、ドラッグアンドドロップで画面の構築が可能です。上部に検索バーがあるので、任意のウィジェットを検索することができます。ウィジェットツリーを表示しながら、ウィジェットパネルを使いたい場合は、キャンバスエリア上部に表示されているウィジェットパネルアイコンで表示させることができます（下図参考）。

2.2.ウィジェットツリー

ウィジェットツリーでは、ページ構成をツリー状で確認することができます。またバックエンドクエリ（データベースに接続するなどして取得しているデータセット）やアクション（OnTapイベントなど）、アニメーションが、どのウィジェットに設定しているのかといったことも、ツリー上に表示されているアイコンで確認することができるようになっています。

ウィジェットツリーは、上下に分割表示させることでページやコンポーネントを簡単に切り替えることができます（下図参考）。

3.キャンバスエリア

キャンバスエリアにウィジェットを配置していくことで画面UIを構築します。

アイコン	詳細
	ダークモードとライトモードの切り替え表示をすることができます。もしアイコンが表示されていない場合は、ナビゲーションメニューのテーマカラー設定（Theme Settings）> Colors > Dark Mode Theme のトグルボタンをオンにすることで表示されるようになります。
	ディスプレイデバイスをオンにすると、ツールバーで選択しているデバイス上のイメージで表示することができます。
	手動で画面サイズを変更したい場合はリサイズハンドルバーを表示させることでレスポンシブの動作確認をすることができます。
	キーボードを画面上で表示させた場合のUIを視覚的に確認することができます。アイコンが表示されなくなった時は、ツールバーで表示させたいデバイスを選択することでキーボードアイコンを再表示させることができます。
	AppBar（アプリ上部に表示されるヘッダー部分）の設定ができます。ページの種類によってAppBarを表示させたくない場合は、AppBarウィジェットを選択した状態でDeleteボタンを押すと削除することができます。
	NavBar（画面下部に表示されるアプリのナビゲーションメニュー）の設定ができます。

4.プロパティパネル

プロパティパネルでは、配置したそれぞれのウィジェットの定義を設定していくことができます。選択するウィジェットによって、プロパティパネルの中身は異なります。またアクションやバックエンドクエリなどもプロパティパネルから設定します。

アイコン	詳細
	ウィジェットのサイズや余白、レイアウト、表示/非表示の切り替えなどのプロパティ設定ができます。
	OnTapなどのイベントや、状態（Conditional）を判断してアクションの設定を行います。
	データベースに接続したりAPIコールなどでデータを取得する定義を作成することができます。
	アニメーションの設定を行うことができます。
	選択中のページ内だけで使用できるローカル変数を作成することができます。AppState（アプリ全体で使用できる変数）と同じように更新や使用をすることができます。
	ColumnやRow、Stackなどの複数の子を持つことができるウィジェットの場合のみに表示されるアイコンで、動的に子を生成する設定をすることができます。

5.ツールバー

ツールバーはエディターの最上部に表示されている部分です。

アイコン	詳細
	プロジェクトのバージョン管理ができます。新しくバージョンを保存したり、問題が発生した場合は古いバージョンに復元（Restore）することができます。
	プロジェクト内に問題がある場合は、WarningsとErrorsの警告が表示されます。Errorsが発生している場合は、ビルドすることができないので必ず解決する必要があります。
	ウィジェットに対してコメントを付与することができます。複数人で開発している場合は特定のユーザーに対してメンションをつけることもできます。
	アプリのソースコードを参照したり、加入プランによってはAPKファイルやソースコードをダウンロードすることができます。
	自分が所有者であるプロジェクトを共有することができます。共有しても、再度プライベートに戻すことはできますが、共有する際は必ず機密情報を削除してから実行する必要があります。また、共有されたプロジェクトは共有相手側でクローンすることもできます。
	プレビューモードでアプリを実行します。アプリのビルドを待たずに実行できますが、Firebaseを使用したりAPIコールを実行することはできません。サポートされない機能については、プレビューモードに表示されている「Knowm Issues」で確認することができます。
	テストモードもしくは実行モードでアプリを実行します。v3.1現在、プロジェクトにアクセスできるユーザーのみURLを閲覧することができます。
	モバイル、タブレット、デスクトップデバイスのキャンバスサイズを指定できます。
	特定のエディタページへのリンクを取得することができます。ブラウザで複数タブを開きたい場合などに便利です。
	ショートカット一覧を表示します。
	コマンドパレットを開きます。キーワード入力でページ移動や設定画面の表示などが実行できます。