【FlutterFlow】エディターの使い方｜機能と名称まとめ

2023年11月27日2023年11月28日

この記事はこんな人におすすめ！

FlutterFlowのエディターの機能と名称が知りたい

今回はFlutterFlowのエディターの機能と名称について解説していきます。

FlutterFlowのエディター機能

FlutterFlowプロジェクトを開くと次のようなエディターが表示されます。

エディターは①ナビゲーションメニュー、②ツールバー、③キャンバスエリア、④プロパティパネルの4つのエリアで構成されます。

①ナビゲーションメニュー（Navigation Menu）

エディターの左端に縦並びに並んでいるメニューがナビゲーションメニューです。

アイコン	名称	詳細
	ダッシュボード (Dashboard）	ダッシュボードに遷移します。ダッシュボードではプロジェクトの新規作成、コピー、削除などプロジェクトの管理が行えます。
	UIビルダー (UI Builder)	アプリで使用できるWidget、コンポーネント、テンプレートにアクセスできます。
	ウィジェットツリー (Widget Tree)	ビルダーで表示しているページのウィジェットツリーを表示します。キャンバスの代わりにウィジェットツリーでWidgetを追加、削除することも可能です。
	ページセレクター (Page Selector)	アプリで使用している全ページとページごとのコンポーネントを確認できます。(現在v4.0はウィジェットツリーに統合されています)
	ストーリーボード (Storyboard)	アプリの画面遷移図が表示され全てのスクリーンとナビゲーションを視覚的に確認できます。
	Firestore	Firebaseを使用したデータベースの作成・管理が行えます。
	Data Types	関連した複数のデータを1つのデータとしてまとめらて定義できます。(クラスとプロパティのような関係)
	App State	アプリで使用する変数や定数を定義できます。
	API Calls	APIの呼び出しを定義できます。
	アセット (Project Media/Assets)	アプリで使用する画像やビデオなどアセットをアップロードしたり削除できます。
	Custom Code	自作の関数、Widget、アクションを定義できます。
	Cloud Functions	Firebaseからのイベントに応答するコードの記述やデプロイができます。。
	テスト (Auto Tests)	アプリが円滑に機能するか自動テストを行います。(無料版ではサービスの利用不可)
	テーマ設定 (Theme settings)	テーマカラーやフォントデザインなどアプリの外観に関する設定います。
	設定 (Settings and Integrations)	アプリやプロジェクトに関する一般的な設定を行います。

②ツールバー（Toolbar）

エディターの上部に横並びに並んでいるメニューがツールバーです。

アイコン	名称	詳細
	インフォメーション (Project info）	ホバーすることでプロジェクト名、FlutterFlowのバージョン、リリース日などを確認できます。
	ヘルプ (Help)	アプリ開発に役立つリンクやチュートリアルなどを確認できます。
	ショートカット (Keyboard shortcuts)	FlutterFlowで使用できるキーボードショートカットを確認できます。
	コマンドパレット (Command palette)	コマンドパレットを表示します。
	キャンバスサイズ (Canvas size)	UIを反映するキャンバスを選択できます。横幅と縦幅をピクセル値で指定してカスタマイズ可能です。
	6.Project history	バージョンを管理できます。プロジェクトを保存しておくことでいつでも保存しておいたバージョンに戻せます。
	コメント (Project comments)	アプリで使用しているWidgetにコメントを残せます。
	最適化 (Optimizations & Enhancements)	機能の最適化案を指示してくれます。
	Project issues	プロジェクト内で発生しているWarningとErrorが表示されます。
	10.デベロッパーメニュー (Developer menu)	アプリのソースコードを参照・ダウンロードしたり、GitHubと連携したりできます。
	11.共有 (Share project)	プロジェクトを共有できます。共有する際はプロジェクト内の機密情報を全て削除する必要があります。
	12.プレビュー (Preview)	ビルドを待たずにアプリを実行します。プレビューモードではFirebaseとAPIコールは使用できません。
	13.テスト (Testing)	実際にビルドしてアプリを実行します。

③キャンバスエリア（Canvas Area）

エディターの中央上部に横並びに並んでいるメニューがキャンバスエリアです。

アイコン	名称	詳細
	ナビゲーションメニューの表示切り替え	ナビゲーションメニューの表示切り替えをします。
	ズーム (Zoom Controls)	キャンバスのサイズを調整します。
	追加 (Add page, component, or widget)	新しいページ、コンポーネント、Widgetを追加します。
	AI Generated Page	作成したいページの特徴を指定することでAIによるページを生成できます。詳細はこちらの動画で確認
	ダークモード切り替え(Dark/Light Mode)	ダークモードとライトモードに切り替えします。
	Display Device	ツールモードで指定したデバイスのスクリーン内でアプリを視覚的に確認できます。
	Display Resize Handle Bars	手動でデバイスのサイズを調整できます。
	Display Keyboard	キーボードがどのように表示されるか視覚的に確認できます。
	Text Scale	アプリで使用されるTextのスケールを調整します。
	Add AppBar	アプリのスクリーン上部にAppBar(ヘッダー)を表示できます。既存レイアウトが複数ありカスタマイズできます。
	Add NavBar	アプリのスクリーン下部にナビゲーションメニューを表示できます。(表示するには2ページ以上必要)

④プロパティパネル（Properties Panel）

エディターの右端に縦に並んでいるパネルがプロパティパネルです。

アイコン	名称	詳細
	Widget name	Widgetの名前を変更します。
	Create a component	ウィジェットツリーから選択したWidgetをコンポーネントとして登録します。
	Save as a template	ウィジェットツリーから選択したWidgetをテンプレートウィジェットとして登録します。
	Save as a theme widget	ウィジェットツリーから選択したWidgetをテーマジェットとして登録します。
	プロパティ (Properties)	選択したウィジェットのサイズ、余白、カラーなどのプロパティを設定できます。
	アクション (Actions)	選択したウィジェットでタッチイベントなどのアクションを設定できます。
	Backend Query	データベースに接続してデータを取得したりできます。
	Generate Dynamic Children	ColumnやRowなど複数の子ウィジェット(children)を持つウィジェットで表示され、複数の要素をまとめて管理できます。
	アニメーション (Animations)	選択したウィジェットでアニメーションの設定をできます。
	Documentation and Semantic Labels	選択したウィジェットでドキュメントを生成できます。