From 6a10cd12160dd7806aa3a48d8e3ed9a96a797ebf Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Thu, 25 Jun 2026 11:04:57 +0530 Subject: [PATCH 1/4] Update Component docs to match FF 7 UI --- .../ui/components/creating-components.md | 40 ++++++------------ .../components/imgs/component-unique-id.avif | Bin 0 -> 154466 bytes .../ui/components/using-components.md | 4 +- 3 files changed, 15 insertions(+), 29 deletions(-) create mode 100644 docs/resources/ui/components/imgs/component-unique-id.avif diff --git a/docs/resources/ui/components/creating-components.md b/docs/resources/ui/components/creating-components.md index c10e0907..8f714b67 100644 --- a/docs/resources/ui/components/creating-components.md +++ b/docs/resources/ui/components/creating-components.md @@ -15,7 +15,7 @@ time, and simplifies maintenance across your project. ## Creating a Component from Scratch -To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **New Component.** +To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **Add Component > Create Blank Component.**
-## Create an AI Generated Component +## Generate with Designer -You can quickly create a component 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 component. - -To create and add an AI-generated component, open the **Widget Tree**, click **Generate with AI** (magic wand) button and select the **Component** tab. Next, describe the component 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 component 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 component you want to build. FlutterFlow AI will use it as a reference to generate the layout. -- While the AI is generating your component, you can continue working on other tasks within FlutterFlow, but make sure you don’t close the FlutterFlow app. - -::: +You can quickly create a component 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 component with relevant widgets.
- +![component-unique-id.avif](imgs/component-unique-id.avif) ## Recursive Components From a63fe3a13e13819139c2a5ebd17180791a6e7441 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Thu, 25 Jun 2026 12:12:39 +0530 Subject: [PATCH 2/4] Update docs to enhance clarity --- docs/resources/ui/components/callbacks.md | 28 +++++----- docs/resources/ui/components/child-widget.md | 20 +++---- .../ui/components/component-lifecycle.md | 56 +++++++++---------- .../ui/components/creating-components.md | 26 ++++----- .../ui/components/intro-components.md | 17 +++--- .../ui/components/using-components.md | 21 ++++--- .../components/widget-builder-parameters.md | 21 ++++--- 7 files changed, 92 insertions(+), 97 deletions(-) diff --git a/docs/resources/ui/components/callbacks.md b/docs/resources/ui/components/callbacks.md index a0135af6..c536f833 100644 --- a/docs/resources/ui/components/callbacks.md +++ b/docs/resources/ui/components/callbacks.md @@ -12,7 +12,7 @@ In FlutterFlow, callbacks are a way to pass down actions from parent entities (l components) to child entities (such as custom widgets or components). This allows the parent to define specific behaviors that the child entity should execute when certain events occur. -It enables dynamic and interactive behavior in child components, allowing them to perform actions +Callbacks enable dynamic and interactive behavior in child components, allowing them to perform actions defined by the parent, such as navigation, data updates, or displaying dialogs. For example, if you have an *image upload component*, the parent can define what should happen after an image is successfully uploaded. Using callbacks, the *image upload component* can execute a parent-defined action, such as: @@ -21,14 +21,14 @@ For example, if you have an *image upload component*, the parent can define what - Update the user's database record with the new image URL. - Refresh the UI to display the updated profile picture. -This makes the *image upload component* component reusable, as it doesn't need to know the specifics of what should happen post-upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback. +This makes the *image upload component* reusable, as it doesn't need to know the specifics of what should happen after upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback. ![action-parameters-callbacks](imgs/action-parameters-callbacks.avif) :::tip[Benefits of Using Callbacks in FlutterFlow] - **Modularity:** Separate the logic of what happens when an event occurs from the child component, - making your component widget more modular and reusable. + making your component more modular and reusable. - **Reusability:** Use the same child component in different contexts with different behaviors, simply by passing different callbacks. ::: @@ -36,15 +36,15 @@ This makes the *image upload component* component reusable, as it doesn't need t ## Adding Callbacks -Let’s continue with our previous example (*image upload component*) and see how to add callbacks on it: +Let’s continue with our previous example (*image upload component*) and see how to add callbacks to it: ### Creating a Callback Parameter -In order to create a component that will execute a callback, you must create a component with a parameter of **Type** **Action**. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded. +To create a component that will execute a callback, you must create a component with a parameter with the **Action** type. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded. -When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action that will be executed will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called uploadedURL. +When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called `uploadedURL`. -Now, the page or component that uses this button can utilize this parameter in its own action flow. An example of this is shown below. +Now, the page or component that uses this button can use this parameter in its own action flow. An example of this is shown below.

-### Passing in an Action to a Component +### Passing an Action to a Component When you add a component to the widget tree of a page or another component, you can define values for its parameters, including action parameters. -For instance, when you add an *image upload component*, you can specify the action flows to be executed when the callback is triggered. For this example, we simply update the profile picture. +For instance, when you add an *image upload component*, you can specify the action flows that should run when the callback is triggered. For this example, we simply update the profile picture. :::info @@ -145,26 +145,26 @@ You can access the value passed to the callback by navigating to the **Set Varia

-Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, as it relies on the parent to define the post-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality. +Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, because it relies on the parent to define the after-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality. ![component-action-parameters.avif](imgs/component-action-parameters.avif) ## More Examples -Let's see some more examples of adding action parameters (callbacks) to deepen the understanding and use it in real-world scenarios. +Let's look at a few more examples of action parameters (callbacks) in real-world scenarios. ### Example 1: Dynamic Dialog Component Let’s take another example of a reusable dialog component that uses callbacks to handle context-specific actions like confirming a deletion, logging out, or saving data. In one context, "Yes" deletes an item. In another, it logs out a user. -The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know of what should happen—it simply executes the callback passed to it when users click on the "Yes" button. +The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know what should happen—it simply executes the callback passed to it when users click the "Yes" button. ![dialog-component-action-parameters.avif](imgs/dialog-component-action-parameters.avif) ### Example 2: Custom Navigation Bar in Super App -Using Action Parameters to build a Custom Navigation Bar in a Super App is an excellent way to create a dynamic, reusable, and modular navigation solution. A **Super App** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action Parameters allows you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario. +Using action parameters to build a custom navigation bar in a super app is an excellent way to create a dynamic, reusable, and modular navigation solution. A **super app** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action parameters allow you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario. Here, the navigation bar doesn’t require hardcoded routes. Instead, the navigation logic can be customized for each mini-app, allowing the navigation bar to remain focused solely on its UI role. diff --git a/docs/resources/ui/components/child-widget.md b/docs/resources/ui/components/child-widget.md index c735cfb4..b18a4686 100644 --- a/docs/resources/ui/components/child-widget.md +++ b/docs/resources/ui/components/child-widget.md @@ -11,9 +11,9 @@ keywords: [FlutterFlow, Child Widget, Components, UI, Reusable Components] Child Widget allows you to create reusable components while keeping part of the layout flexible. Instead of building multiple variations of the same component, you define a fixed structure and leave a specific area open for customization. -- The position is fixed within the component layout -- It accepts any widget (text, button, image, custom widget, and components, etc.) -- Each instance of the component can have different content inside it +- Its position is fixed within the component layout. +- It accepts any widget, such as text, buttons, images, custom widgets, and components. +- Each component instance can contain different content. - The overall structure of the component remains consistent This allows you to reuse the same component while adapting its content as needed. @@ -35,7 +35,7 @@ Let’s see how to use the Child Widget by building a simple example of displayi 1. In your Component, add a new parameter and give it a clear name (e.g., `childWidget`). 2. Set the parameter **Type** to **Child Widget**. 3. In the component layout, add a **Child Widget placeholder** where you want dynamic content to appear. -4. Now go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget into it. +4. Go to the component instance (the place where you add this component), locate the Child Widget area, and add any widget to it.
-While creating a Component State, the following properties are included: +When creating Component State, the following properties are included: - **Is List:** This property determines whether the variable can hold multiple values of the same data type (like a list or array) or just a single value. @@ -151,19 +151,19 @@ While creating a Component State, the following properties are included: - **Nullable:** This property determines whether the variable can have a null value. When "**Nullable**" is set to true, it means the variable can be empty or have a null value. This is useful when dealing with optional data or scenarios where the absence of a value is valid. -Now, let's apply these concepts to the `isFavourite` variable in the context of the above example: +Now, apply these concepts to the `isFavourite` variable in the context of the above example: - For the `isFavourite` variable, it is a single value (boolean), so **Is List** would be set to false. -- The **Initial Field Value** would also be set to **false**, indicating that the item is not +- Set the **Initial Field Value** to **false**, indicating that the item is not favorited by default. -- **Nullable** property will be set to false, as the variable should always have a boolean value +- Set the **Nullable** property to false, as the variable should always have a boolean value (true or false) and never be null. :::note -You can set the **Data Type** of your Component State variable to any primitive data types such as **String, Integer, Boolean, Double** or to any other complex built-in data types such as **Enum, Custom Data Type, Document,** etc. To learn more about the available data types, refer the [**Data Representation Section**](../../data-representation/overview.md). +You can set the **Data Type** of your Component State variable to primitive data types such as **String, Integer, Boolean,** or **Double**, or complex built-in data types such as **Enum, Custom Data Type,** or **Document**. To learn more about the available data types, refer to the [**Data Representation section**](../../data-representation/overview.md). ::: ### Get Component State Value @@ -173,7 +173,7 @@ icon based on the `isFavourite` state variable. We introduce a `Conditional Buil allows us to show a widget tree based on **If/Else If/Else** conditions. The goal is to visually indicate whether a product has been favorited by the user. -Follow the steps as below: +Follow these steps:
Create Blank Component.** +To create a component from scratch, click the **Add Button** in the **Page Selector** or **Widget Tree** tab. Then choose **Add Component > Create Blank Component**.
-## Convert into a Component +## Convert to a Component If you have already built a complex widget in your page, you can convert that entire widget into a component and reuse it throughout your app. -To convert a complex widget into a reusable component, right click on the root widget that contains the +To convert a complex widget into a reusable component, right-click on the root widget that contains the entire widget tree you want to convert, then select **Convert to Component.**

- From 3d00e3e1f4b8a0661054a332f9302648e9bb5065 Mon Sep 17 00:00:00 2001 From: John Higgins <77738205+johnbhiggins7@users.noreply.github.com> Date: Mon, 29 Jun 2026 09:50:00 -0500 Subject: [PATCH 3/4] Fix empty iframe title and grammar typo in creating-components - Add descriptive title to the Import from Figma demo embed (was empty) - "Callbacks are often using" -> "used" Co-Authored-By: Claude Opus 4.8 --- docs/resources/ui/components/creating-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/resources/ui/components/creating-components.md b/docs/resources/ui/components/creating-components.md index 82de88ec..7f265be7 100644 --- a/docs/resources/ui/components/creating-components.md +++ b/docs/resources/ui/components/creating-components.md @@ -158,7 +158,7 @@ Currently, FlutterFlow doesn't support importing SVG elements from Figma frames. }}>