この記事はこんな人におすすめ!
- FlutterFlowのキャンバスエリアの機能と名称が知りたい
今回はFlutterFlowのキャンバスエリアの機能と名称について解説していきます。
目次
キャンバスエリア(Canvas Area)
FlutterFlowプロジェクトを開くと次のようなエディターが表示されます。
キャンバスエリアはエディターの中央上部に横並びに配置されます。

機能と名称
アイコン | 名称 | 詳細 |
---|---|---|
![]() | ナビゲーションメニュー の表示切り替え | ナビゲーションメニューの表示切り替えをします。 |
![]() | ズーム (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ページ以上必要) |
参考サイト
- https://docs.flutterflow.io/getting-started/ui-builder/canvas-area#4.-add-page-component-or-widget
- https://docs.flutterflow.io/getting-started/ui-builder/canvas-area