Skip to content

Update Pages docs to reflect the FF 7 UI #529

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pinkeshmars wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update Pages docs to reflect the FF 7 UI #529

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
81f32e8
Update Pages docs to reflect the FF 7 UI
pinkeshmars Jun 23, 2026
a66e21c
fix link issue
pinkeshmars Jun 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/ff-concepts/adding-customization/cloud-functions.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ loading indicator during the logo creation process. Its value is set to *True* b

**2. Build a page**

Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/intro-pages.md#create-an-ai-generated-page). Here is the page added using AI Page Gen, and after some modification, it looks the below:
Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/intro-pages.md#generate-with-designer). Here is the page added using AI Page Gen, and after some modification, it looks the below:

Also, see how to [build a page layout](../../ff-concepts/layout/building-layout.md) if you want to build a page from scratch.

Expand Down
2 changes: 1 addition & 1 deletion docs/ff-integrations/authentication/supabase-auth/email-supabase.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Here's how you disable email verification on the Supabase side:

### Building pages

Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](../../../resources/ui/pages/intro-pages.md#create-a-page-from-a-popular-template). Here is the page added from the templates, and after some modification, it looks the below:
Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](../../../resources/ui/pages/intro-pages.md#create-page-from-template). Here is the page added from the templates, and after some modification, it looks the below:

Also, see how to build a page layout in case you want to build a page from scratch.

Expand Down
2 changes: 1 addition & 1 deletion docs/intro/ff-ui/canvas.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ There's a zoom in ( + ) and a zoom out ( - ) button to control the zoom level of

## AI Generated Page

From here, you can [create a page using AI](../../resources/ui/pages/intro-pages.md#create-an-ai-generated-page).
From here, you can [create a page using AI](../../resources/ui/pages/intro-pages.md#generate-with-designer).

## Add App Bar

Expand Down
Binary file added docs/resources/ui/pages/imgs/create-new-page.avif
View file
Open in desktop
Binary file not shown.
75 changes: 43 additions & 32 deletions docs/resources/ui/pages/intro-pages.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,32 +23,54 @@ For more details on how to use Scaffold and the various Page Elements in Flutter

## Creating a Page

In FlutterFlow, you can seamlessly craft a page tailored to your needs and design preferences.
In FlutterFlow, you can craft a page tailored to your needs and design preferences.
Whether you're starting from scratch, using a template, or leveraging AI tools,
there are several pathways to achieve the desired functionality and aesthetic of your desired Page.

:::tip[Generated Code]
When you create a page in FlutterFlow, a `Widget` class and a corresponding `Model` class are automatically generated. You can view these in the Code Viewer. To explore the details of the generated `Model` class, take a closer [**look at the code**](../../../generated-code/pages-generated-code.md).
:::

FlutterFlow allows you to easily create new pages using the **Add Page, Component, or Flow** button,
which is available from the **Page Selector** tab in the **Navigation Menu**. This will help you
quickly start and add new pages to your app.
FlutterFlow allows you to easily create new pages from the **Page Selector** tab in the **Navigation Menu**.

<img src="/img/page-selector.png" width="50%" />
![create-new-page.avif](imgs/create-new-page.avif)

### Create an Empty Page
### Create Empty Page

When creating your page in FlutterFlow, one option is to start with an empty page, providing you
with a blank canvas. This approach allows you to build your UI from the ground up by composing
widgets and components together according to your specific design vision and functional
requirements.

To create an empty FlutterFlow Page from scratch, follow the steps:
To create an empty FlutterFlow Page from scratch, follow these steps:

<iframe src="https://demo.arcade.software/rtOPRXVUByUAXxUynd8T?embed&show_copy_link=true" title="app.flutterflow.io/authentication" frameborder="0" loading="lazy" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="clipboard-write" width="100%" height="600"></iframe>
<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/ocBbnPspp26FKv75YggO?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Create a Page from a Popular Template
### Create Page from Template

FlutterFlow simplifies the process of page creation by offering a variety of
popular template use cases. These templates provide a basic structure for your
Expand All @@ -63,7 +85,7 @@ To utilize a template from FlutterFlow, follow these steps:
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/bkaz68ipgi497Pf4v8EB?embed&show_copy_link=true"
src="https://demo.arcade.software/JBhxcBBPb7r1Yk6YwehS?embed&show_copy_link=true"
title="Create a page from a popular template"
style={{
position: 'absolute',
Expand All @@ -82,20 +104,9 @@ To utilize a template from FlutterFlow, follow these steps:
</iframe>
</div>

### Create an AI Generated Page
### Generate with Designer

You can quickly create a page using FlutterFlow AI by describing what you want in natural language. The AI uses your description or visual reference, along with your project context, to build the page with relevant widgets. This is especially helpful when you're starting from scratch or prototyping ideas rapidly.

To create and add an AI-generated page, open the **Widget Tree**, click **Generate with AI** (magic wand) button, and select the **Page** tab. Next, describe the page you want to build, and hit the **Send** (up arrow) button.

FlutterFlow will process your request and display progress in the **AI Generation History** panel in the toolbar. Once the page is ready, you can preview it in both light and dark themes and apply various color schemes. If you're happy with the result, give it a name and add it to your project.

:::tip

- You can also upload a screenshot or image of the page you want to build. FlutterFlow AI will use it as a reference to generate the layout.
- While the AI is generating your page, you can continue working on other tasks within FlutterFlow, but make sure you don’t close the FlutterFlow app.

:::
You can quickly create a page with [FlutterFlow Designer](https://designer.flutterflow.io/) by describing what you want in natural language. Designer uses your description along with your project context, to build the page with relevant widgets. This is especially helpful when you're starting from scratch or prototyping ideas rapidly.

<div style={{
position: 'relative',
Expand All @@ -104,8 +115,8 @@ FlutterFlow will process your request and display progress in the **AI Generatio
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/DScLZeZG1NbGxO3Dufr3?embed&show_copy_link=true"
title="Create an AI generated page"
src="https://demo.arcade.software/oRmGZOkvdnM844VZfHLq?embed&show_copy_link=true"
title="Generate with Designer"
style={{
position: 'absolute',
top: 0,
Expand All @@ -123,17 +134,17 @@ FlutterFlow will process your request and display progress in the **AI Generatio
</iframe>
</div>

#### Import from Figma Frame
### Import from Figma Frame

You can also quickly turn your Figma designs into functional pages in FlutterFlow. By providing a Figma Frame URL, FlutterFlow AI will analyze the design and automatically generate UI layouts that closely match your mockup.
You can quickly turn your Figma designs into functional FlutterFlow pages using **Import from Figma**. Simply provide a Figma Frame URL, and FlutterFlow AI will analyze the design and generate a UI layout that closely matches your mockup.

To import from a Figma Frame, first, connect your Figma account, [import the Figma theme](../../../ff-concepts/design-system/design-system.md#import-figma-theme), and map your colors and typography accordingly. Next, open the **Generate with AI** dialog and click the **Plus (+)** button. Select **Import from Figma**, enter your **Figma frame URL**, and press **Send**.
To get started, first [connect your Figma account](../../../ff-concepts/design-system/design-system.md#import-figma-theme). Then, when creating a new page, select **Import from Figma** from the available options. Paste the Figma Frame URL and click **Import**.

A preview of the frame you are importing will appear. To finalize the import, click **Send** again. Once completed, the page will appear in the AI Generation History, where you can preview and add it to your project.
FlutterFlow will display a preview of the selected frame. Review the preview, then click **Generate** to create the page. Once completed, the page will appear in the **AI Generation History**, where you can preview and add it to your project.

:::warning

Currently, we don't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project [**assets**](../../../generated-code/directory-structure.md#assets) after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.
Currently, FlutterFlow doesn't support importing SVG elements from Figma frames. However, you can manually add the SVGs directly to your project [**assets**](../../../generated-code/directory-structure.md#assets) after generation is complete, or replace them in Figma with supported image formats like PNG or JPEG.

:::

Expand All @@ -144,8 +155,8 @@ Currently, we don't support importing SVG elements from Figma frames. However, y
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/fPKzHNv7avhcUJ7IZ5hm?embed&show_copy_link=true"
title="Create an AI generated page"
src="https://demo.arcade.software/3JLrZYc1ZgRp6upm087m?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
Expand Down
Loading
Loading