diff --git a/docs/ff-concepts/state-management/generated-code.md b/docs/ff-concepts/state-management/generated-code.md index 8679280e..50d8c4ae 100644 --- a/docs/ff-concepts/state-management/generated-code.md +++ b/docs/ff-concepts/state-management/generated-code.md @@ -4,7 +4,7 @@ title: Generated Code description: Learn about the state management used in FlutterFlow's generated code. tags: [FlutterFlow, Generated Code, Concepts, State Management] toc_max_heading_level: 5 -sidebar_position: 5 +sidebar_position: 2 keywords: [FlutterFlow, Generated Code, State Management, Concepts] --- diff --git a/docs/ff-concepts/state-management/state-management.md b/docs/ff-concepts/state-management/state-variables.md similarity index 96% rename from docs/ff-concepts/state-management/state-management.md rename to docs/ff-concepts/state-management/state-variables.md index 2b95508b..a6487b66 100644 --- a/docs/ff-concepts/state-management/state-management.md +++ b/docs/ff-concepts/state-management/state-variables.md @@ -1,6 +1,7 @@ --- -title: State Management -description: An overview of state management in FlutterFlow +title: State Variables +description: An overview of state management & state variables in FlutterFlow. +sidebar_position: 0 --- # State Management State management is a crucial concept focused on maintaining and controlling the **state** of an application. Simply put, it involves monitoring the changes within your app and updating the user interface to reflect these changes. diff --git a/docs/ff-concepts/state-management/widget-state.md b/docs/ff-concepts/state-management/widget-state.md index 22278033..9746b069 100644 --- a/docs/ff-concepts/state-management/widget-state.md +++ b/docs/ff-concepts/state-management/widget-state.md @@ -1,5 +1,6 @@ --- title: Widget State +sidebar_position: 1 --- # Widget State @@ -31,8 +32,15 @@ In the following example, we find widget state and widget focus state of a TextF ![using-widget-state.png](imgs%2Fusing-widget-state.png) -:::note[Scope] -Widget states are only available for access on the page or component where they were created. +:::tip[Scope] +**Widget states** are mostly available for access on the page or component where they were created. However, when you add a component to a page, the widget states exposed in the component will also be available in its parent page. + +For instance, consider a component with two `TextFields` – one for the username and another for the password. This component could be utilized in both sign-in and sign-up pages. In such cases, you need to be able to retrieve the values from each TextField as if they were added directly to the page. + +You can access the widget state of a component's widgets on your page, just as you would for other widgets. Simply navigate to the **Set Variable menu > Widget State > [component_name] > [your_widget]**. + +
::: FlutterFlow allows you to update the state of these widgets through actions exposed by the platform. For example, if you want to clear a TextField when the Send button is clicked on a form-like page, then in the Actions Flow, you can find relevant actions such as **Clear TextField**. This enables dynamic interaction and state management directly within the visual development environment. @@ -62,3 +70,5 @@ These triggers allow developers to create interactive and responsive application ![action-triggers-widget-state.png](imgs%2Faction-triggers-widget-state.png) + + diff --git a/docs/resources/ui/components/built-in-components/_category_.json b/docs/resources/ui/components/built-in-components/_category_.json index 098407ce..1ff59c81 100644 --- a/docs/resources/ui/components/built-in-components/_category_.json +++ b/docs/resources/ui/components/built-in-components/_category_.json @@ -1,4 +1,4 @@ { "label": "Built-in Components", - "position": 2 + "position": 3 } \ No newline at end of file diff --git a/docs/resources/ui/components/custom-components/_category_.json b/docs/resources/ui/components/custom-components/_category_.json index c98e5921..3369b875 100644 --- a/docs/resources/ui/components/custom-components/_category_.json +++ b/docs/resources/ui/components/custom-components/_category_.json @@ -1,4 +1,4 @@ { - "label": "User Defined Components", - "position": 3 + "label": "Custom Components", + "position": 2 } \ No newline at end of file diff --git a/docs/resources/ui/components/custom-components/getting-started.md b/docs/resources/ui/components/custom-components/getting-started.md index 9aa4c937..22ea55e5 100644 --- a/docs/resources/ui/components/custom-components/getting-started.md +++ b/docs/resources/ui/components/custom-components/getting-started.md @@ -6,9 +6,9 @@ keywords: [Custom Components] tags: [Components] --- -# User Defined Components +# Custom Components -User-defined Components or just Custom Components in FlutterFlow are custom elements you create to meet specific needs in your app. These components can be designed using FlutterFlow's drag-and-drop interface, allowing you to +Custom Components or just user-defined Components in FlutterFlow are custom widgets you create to meet specific needs in your app. These components can be designed using FlutterFlow's drag-and-drop interface, allowing you to create reusable UI elements. This approach ensures consistency, saves time, and simplifies maintenance across your project. diff --git a/docs/resources/ui/components/custom-components/using-components.md b/docs/resources/ui/components/custom-components/using-components.md index 6e776daf..707a7363 100644 --- a/docs/resources/ui/components/custom-components/using-components.md +++ b/docs/resources/ui/components/custom-components/using-components.md @@ -173,7 +173,32 @@ can adapt to different data and behavior. + + +## Set Unique Key +When you have a component in a dynamically generated list, this option becomes available. Imagine you have a dynamic list where items can change frequently – like a to-do list where tasks are added and removed. Think of it as giving each task a unique ID number. This is important for a few reasons: + +- **Tracking Changes:** The 'Unique Key' helps the app recognize which tasks are new, completed, or removed, ensuring accurate updates. + +- **Efficiency:** With unique IDs, the app updates only the tasks that have changed instead of the entire list, improving performance. + +- **Retaining Details:** When you modify a task and move away from it, the 'Unique Key' ensures the changes are remembered and displayed correctly when you return. + +:::tip +If it’s a list of Documents the unique key might be the Document ID. +::: + +
+ + + ## Recursive Components - +You can create a recursive component, meaning the component can include an instance of itself within its own widget tree. Using the recursive component, you can build complex and dynamic user interfaces. + +For example, in social media applications or forums, comments can have replies, and each reply can have further replies. A recursive component can display this nested structure effectively. + +![recursive-comp.png](..%2F..%2Fimgs%2Frecursive-comp.png) + diff --git a/docs/resources/ui/imgs/recursive-comp.png b/docs/resources/ui/imgs/recursive-comp.png new file mode 100644 index 00000000..52f67c29 Binary files /dev/null and b/docs/resources/ui/imgs/recursive-comp.png differ diff --git a/docs/resources/ui/pages/page-lifecycle.md b/docs/resources/ui/pages/page-lifecycle.md index ec734bd8..5f641d2d 100644 --- a/docs/resources/ui/pages/page-lifecycle.md +++ b/docs/resources/ui/pages/page-lifecycle.md @@ -101,7 +101,7 @@ trigger specific actions in response to a phone shake gesture. :::note[State Variables] A state variable holds information or data about your UI at any given moment. To learn more -about **states and state management, [refer here](../../../ff-concepts/state-management/state-management.md)** +about **states and state management, [refer here](../../../ff-concepts/state-management/state-variables)** :::