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 000000000..c4c016597 Binary files /dev/null and b/docs/resources/ui/pages/imgs/create-new-page.avif differ diff --git a/docs/resources/ui/pages/intro-pages.md b/docs/resources/ui/pages/intro-pages.md index b63f569db..4250bc5a5 100644 --- a/docs/resources/ui/pages/intro-pages.md +++ b/docs/resources/ui/pages/intro-pages.md @@ -23,7 +23,7 @@ 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. @@ -31,24 +31,46 @@ there are several pathways to achieve the desired functionality and aesthetic of 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**. - +![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 @@ -529,4 +484,3 @@ overwhelming. - 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.