From 81f32e84a0454933c8068ebbba16c31f36679710 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Tue, 23 Jun 2026 12:29:09 +0530 Subject: [PATCH 1/2] Update Pages docs to reflect the FF 7 UI --- .../adding-customization/cloud-functions.md | 2 +- .../supabase-auth/email-supabase.md | 2 +- docs/intro/ff-ui/canvas.md | 2 +- .../ui/pages/imgs/create-new-page.avif | Bin 0 -> 25144 bytes docs/resources/ui/pages/intro-pages.md | 75 ++++++----- docs/resources/ui/pages/page-elements.md | 125 ++++++------------ docs/resources/ui/pages/page-lifecycle.md | 63 +++++---- docs/resources/ui/pages/pages-properties.md | 24 ++-- 8 files changed, 128 insertions(+), 165 deletions(-) create mode 100644 docs/resources/ui/pages/imgs/create-new-page.avif diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/docs/ff-concepts/adding-customization/cloud-functions.md index 8f7560faa..2cbf87acf 100644 --- a/docs/ff-concepts/adding-customization/cloud-functions.md +++ b/docs/ff-concepts/adding-customization/cloud-functions.md @@ -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. diff --git a/docs/ff-integrations/authentication/supabase-auth/email-supabase.md b/docs/ff-integrations/authentication/supabase-auth/email-supabase.md index cb3734504..f726abbe0 100644 --- a/docs/ff-integrations/authentication/supabase-auth/email-supabase.md +++ b/docs/ff-integrations/authentication/supabase-auth/email-supabase.md @@ -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. diff --git a/docs/intro/ff-ui/canvas.md b/docs/intro/ff-ui/canvas.md index b7d171e50..ef52f58ca 100644 --- a/docs/intro/ff-ui/canvas.md +++ b/docs/intro/ff-ui/canvas.md @@ -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 diff --git a/docs/resources/ui/pages/imgs/create-new-page.avif b/docs/resources/ui/pages/imgs/create-new-page.avif new file mode 100644 index 0000000000000000000000000000000000000000..c4c0165970815bfc799a1f8f4fd7d9c7448a3fee GIT binary patch literal 25144 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 +![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: - +
+ +
+

-### 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 @@ -63,7 +85,7 @@ To utilize a template from FlutterFlow, follow these steps: width: '100%' }}> -#### 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. ::: @@ -144,8 +155,8 @@ Currently, we don't support importing SVG elements from Figma frames. However, y width: '100%' }}> - -

+Using this action, you can open and close the drawers with a tap of a button. For example, opening the drawer from a widget placed outside the Appbar and closing it from the widget placed inside the drawer. - -#### Types of drawer action +#### Types of drawer actions There are three types of actions you can add to the drawer. @@ -217,43 +190,6 @@ There are three types of actions you can add to the drawer. - **Open End Drawer**: Opens the end drawer. - **Close Drawers**: Closes all the open drawers. - -Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget. - -1. Select the **Widget** (e.g. IconButton, Button) on which you want to define the action. -2. Select **Actions** from the Properties panel (the right menu), and click **Open**. This will open an **Action flow Editor** in a new popup window. - 1. Click on the **+ Add Action**. - 2. On the right side, search and select the **Drawer** action. - 3. Select the **Drawer Action Type** among the **Open Drawer**, **Open End Drawer**, and **Close Drawers.** - 4. Click **Close**. - -
- -
-

- - ## Nav Bar The NavBar (or Navigation Bar) allows you to quickly navigate between pages of @@ -329,7 +265,7 @@ bar and then add them. Here's how you can do it: choose its **size**. :::info -Please note that the NavBar will only appear on the canvas if you have added at +The NavBar will only appear on the canvas if you have added at least two pages to it. ::: @@ -339,17 +275,38 @@ To reorder the Nav Bar items: - Navigate to the **Setting and Integrations > General > NavBar & AppBar > Nav Bar**. -- Under the **Re-Order Page Icons**, identify the page that you want to reorder, click on the - hamburger - icon (icon with three lines ) beside it and drag it in an upward or downward direction. +- Under the **Re-Order Page Icons**, identify the page that you want to reorder, click on the hamburger icon (icon with three lines ) beside it and drag it in an upward or downward direction. - +
+ +
+

### Modifying NavBar Style When you enable the NavBar, it initially adopts the Flutter Default Nav Bar -style. However, if you seek more customization options, you can set the Nav Bar +style. However, if you need more customization options, you can set the Nav Bar Style dropdown to one of the following: #### Flutter Default Nav Bar @@ -389,9 +346,7 @@ but only displays the label for the selected item. - **Border Color:** Alters the color of the borders around NavBar item buttons. - **Nav Button Padding:** Adjusts the padding inside each nav button. - **Nav Button Margin:** Controls the margin around each nav button. -- **Nav Button Alignment:** Allows customization of how nav buttons align within the NavBar. Options - like - center, space-between, etc., are given. +- **Nav Button Alignment:** Allows customization of how nav buttons align within the NavBar. Options include center, space-between, etc., are given. - **Gap Between Icon and Text:** Specifies the spacing between the icon and text within nav buttons. - **Animation Duration (ms):** Defines how long animations take when switching between items. - **Haptic Feedback:** A toggle that enables or disables haptic feedback when interacting with @@ -427,9 +382,9 @@ present in the NavBar. **SnackBar** is a temporary, lightweight notification that briefly appears at the bottom of the screen to provide feedback about an operation. -### When to use Snackbar? +### When to Use Snackbar? -Here are some common usages of a SnackBar in an app: +Here are some common uses of a SnackBar in an app: - **User Feedback:** Notifies users about the success or failure of actions like submitting a form or uploading a file. @@ -503,7 +458,7 @@ a more dynamic user interaction model where feedback and actions are closely lin ### Hide SnackBar [Action] Managing multiple SnackBar instances efficiently is crucial because showing them all at once can -overwhelm the user interface and confuse the user. To address this, Flutter apps uses a queuing +overwhelm the user interface and confuse the user. To address this, Flutter apps use a queuing system for `SnackBars`: **Snackbar Queue:** When multiple SnackBars are triggered in succession, they are queued to be diff --git a/docs/resources/ui/pages/page-lifecycle.md b/docs/resources/ui/pages/page-lifecycle.md index ec68090b9..4d3ab145b 100644 --- a/docs/resources/ui/pages/page-lifecycle.md +++ b/docs/resources/ui/pages/page-lifecycle.md @@ -7,12 +7,12 @@ toc_max_heading_level: 5 # Page Lifecycle -In FlutterFlow and Flutter, understanding the page lifecycle or simply the stages a page goes -through from creation to disposal is essential for managing resources and data effectively. +In FlutterFlow and Flutter, understanding the page lifecycle, or the stages a page goes +through from creation to disposal, is essential for managing resources and data effectively. Let's delve into the key moments in the lifecycle of a **Page**: -- **Initialization**: This is the first phase where the page is set up. Here the initial data is +- **Initialization**: This is the first phase where the page is set up. Here, the initial data is loaded. This might involve setting up the necessary state or defaults for the page. - **Rendering**: Here, the page is actually drawn or rendered on the screen. This includes @@ -20,26 +20,25 @@ Let's delve into the key moments in the lifecycle of a **Page**: initial [state](#page-state). - **Updating:** After rendering, the page becomes interactive and can respond to user inputs such as clicks, typing, or other gestures. It may re-render parts of the page or the entire page to - reflect the changes due to interaction or new data. + reflect changes from user interaction or new data. - **Disposal**: When the page is no longer needed, or the user navigates away, this phase is - triggered. This is where resources related to the page are released from memory and are no longer - accessible. + triggered. This is where resources related to the page are released from memory. In FlutterFlow, most of these lifecycle phases are handled internally by FlutterFlow's architecture. -However, we expose some of the methods so that you, as a developer, can decide what additional +However, FlutterFlow exposes some lifecycle methods so that you, as a developer, can decide what additional configurations to load upon initialization and when to re-render the UI based on interactions. ## Page-Level Action Triggers -There are several **[Action Triggers](../../control-flow/functions/action-flow-editor.md#action-triggers)** that are accessible at the root-level of a page. +There are several **[Action Triggers](../../control-flow/functions/action-flow-editor.md#action-triggers)** that are accessible at the root level of a page. :::info[What are Action Triggers?] **Action Triggers** serve as event listeners or handlers that respond to specific events or user interactions within an application. FlutterFlow provides developers with a way to define logic that responds to various events, such as button clicks, page loads, form submissions, or data changes. -To learn more, head over to **[Action Flow Editor](../../../resources/control-flow/functions/action-flow-editor.md)** section. +To learn more, see the **[Action Flow Editor](../../../resources/control-flow/functions/action-flow-editor.md)** section. ::: As you open the [Action Flow Editor](../../../resources/control-flow/functions/action-flow-editor.md) for your Page, you can see the following Action @@ -52,9 +51,9 @@ Triggers exposed for your Page. This allows you to set actions when the page loads or initializes. It enables developers to perform tasks or execute logic at specific points in the page lifecycle, such as fetching data from an API, initializing -variables or updating UI elements. +variables, or updating UI elements. -:::tip[Possible usecases] +:::tip[Possible use cases] - **Initializing Data:** You can use the **On Page Load** action trigger to initiate API calls, database queries, or read from local storage, setting up the data that the page @@ -80,11 +79,11 @@ When you add actions to the **on Page Load** action trigger, they are executed w ### On Phone Shake [Action Trigger] -Actions added under this trigger are triggered when the +Actions added under this trigger run when the user shakes their phone. This is useful when you want to perform certain tasks or trigger specific actions in response to a phone shake gesture. -:::tip[Possible usecases] +:::tip[Possible use cases] - **Randomizing content:** Shake the phone to generate a random number, display a random quote, or change the background image. @@ -98,7 +97,7 @@ trigger specific actions in response to a phone shake gesture. ### On Shortcut Press [Action Trigger] -This action trigger allows you to bind keyboard shortcuts to actions. This is incredibly helpful for improving accessibility and enhancing user experience, especially in web and desktop apps. +This action trigger lets you bind keyboard shortcuts to actions. This is incredibly helpful for improving accessibility and enhancing user experience, especially in web and desktop apps. :::tip[Possible usecases] @@ -110,7 +109,7 @@ This action trigger allows you to bind keyboard shortcuts to actions. This is in :::info[important] - When a keyboard shortcut is created at the page level, it won't trigger if a TextField is in focus, and you also won't be able to type the shortcut key into the TextField. - When a keyboard shortcut is created at the component level, it also won't trigger if a TextField is in focus, but you'll still be able to type the shortcut key into the TextField. -- **To avoid conflicts, it's recommended to use shortcuts that users are unlikely to type, such as Command + S, instead of a single key like 'S'.** +- **To avoid conflicts, use shortcuts that users are unlikely to type, such as Command + S, instead of a single key like 'S'.** - There's currently a known issue with Flutter's autofocus functionality. If a TextField inside a component has autofocus enabled, and the component has a keyboard shortcut, the TextField will not autofocus as expected. ::: @@ -118,7 +117,7 @@ This action trigger allows you to bind keyboard shortcuts to actions. This is in Implementing keyboard shortcuts is a straightforward process in FlutterFlow. You can define as many shortcuts as you want, each mapped to specific actions that will trigger when the corresponding key combination is pressed. Let's see an example of an eCommerce web app where users can quickly access the cart page by pressing the `C` key. -To create a shortcut, use the **On Shortcut Press** action trigger, then type the keys that you want your app to listen for. +To create a shortcut, use the **On Shortcut Press** action trigger, then enter the keys your app should listen for.
Date: Tue, 23 Jun 2026 13:21:52 +0530 Subject: [PATCH 2/2] fix link issue --- docs/resources/ui/pages/page-elements.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/resources/ui/pages/page-elements.md b/docs/resources/ui/pages/page-elements.md index ee1f1d06a..c27cb3883 100644 --- a/docs/resources/ui/pages/page-elements.md +++ b/docs/resources/ui/pages/page-elements.md @@ -86,7 +86,7 @@ The "Show Default Button" toggle in the **AppBar** Properties Panel controls whe However, it's important to note that this default icon won't appear in the FlutterFlow canvas during the design stage. It only becomes visible when the app is running, and the conditions for showing the button are met. -If you wish to replace the default icon with another icon in the leading space, follow the [guide on adding an AppBar](#add-an-appbar-to-your-page). +If you wish to replace the default icon with another icon in the leading space, follow the [guide on adding an AppBar](#add-an-appbar). :::tip[Generated Code] In the generated code, when this toggle is enabled, [`automaticallyImplyLeading`](https://api.flutter.dev/flutter/material/AppBar/automaticallyImplyLeading.html) property in the **AppBar** widget is set to `true`. This means that the appropriate default button will be displayed if back navigation is enabled or Drawer is detected when you run the app. @@ -484,4 +484,3 @@ overwhelming. -