diff --git a/docs/ff-concepts/layout/building-layout.md b/docs/ff-concepts/layout/building-layout.md index 6b9289c5..b2e5eee1 100644 --- a/docs/ff-concepts/layout/building-layout.md +++ b/docs/ff-concepts/layout/building-layout.md @@ -9,17 +9,17 @@ keywords: [FlutterFlow, Building Layout, Concepts] # Building Layout -In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](#), [Images](#), and [Icons](#), are visible on the screen. Others, like [Containers](#), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page. +In FlutterFlow, you build a page layout using Widgets. **Widgets**, such as [Text](../../resources/ui/widgets/built-in-widgets/text.md), [Buttons](../../resources/ui/widgets/built-in-widgets/button.md), [Images](#), and [Icons](../../resources/ui/widgets/built-in-widgets/icons.md), are visible on the screen. Others, like [Containers](../../resources/ui/widgets/built-in-widgets/container.md), [Rows](#), [Columns](#), and [Stacks](#), are not directly visible but help arrange and position the visible elements on the page. -These widgets are categorized into four main types: [Layout Elements](#), [Base Elements](#), -[Page Elements](#), and [Form Elements](#). To build a page, you combine different widgets from these categories to get the desired look and feel of your app. +These widgets are categorized into four main types: [Layout Elements](/tags/layout-elements), [Base Elements](/tags/base-elements), +[Page Elements](/tags/page-elements), and [Form Elements](/tags/form-elements). To build a page, you combine different widgets from these categories to get the desired look and feel of your app. ## Understanding layout concept One of the most common layout patterns is to arrange widgets either **vertically** or **horizontally**. To display widgets in a vertical layout, use the **Column** widget. For a horizontal layout, use the **Row** widget. If you need to place one widget on top of another, use the **Stack** widget. :::info -**Composing widgets** is a fundamental aspect of creating layouts in FlutterFlow. It involves combining different widgets to form a cohesive and functional user interface. Understanding how to effectively compose widgets allows you to design complex layouts and create intuitive, user-friendly apps. Learn more about composing widgets [**here**](#). +**Composing widgets** is a fundamental aspect of creating layouts in FlutterFlow. It involves combining different widgets to form a cohesive and functional user interface. Understanding how to effectively compose widgets allows you to design complex layouts and create intuitive, user-friendly apps. Learn more about composing widgets [**here**](../../resources/ui/widgets/composing-widgets.md). ::: @@ -155,13 +155,13 @@ The review section consists of multiple different widgets. First, add a Column t Apart from Row, Column, and Stack widgets, there are some other widgets that are widely used for building the page layout. Here are some of them: -- [Container](#) -- [Card](#) -- [ListView](#) -- [GridView](#) -- [TabBar](#) -- [PageView](#) -- [Form](#) +- [Container](../../resources/ui/widgets/built-in-widgets/container.md) +- [Card](../../resources/ui/widgets/built-in-widgets/card.md) +- [ListView](../../resources/ui/widgets/built-in-widgets/list-grid.md) +- [GridView](../../resources/ui/widgets/built-in-widgets/list-grid.md) +- [TabBar](../../ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md) +- [PageView](../../ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md) +- [Form](../../resources/control-flow/user-interactivity/forms/forms.md) ## Video guides diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md b/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md index 11dc7a16..6441bd54 100644 --- a/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/pageview-widget.md @@ -2,7 +2,7 @@ slug: /concepts/navigation/pageview title: PageView description: Learn how to use the PageView widget for creating swipeable pages, perfect for creating onboarding screens or multi-step forms. -tags: [PageView, FlutterFlow, UI, Widgets] +tags: [PageView, FlutterFlow, UI, Widgets, Layout Elements] sidebar_position: 2 keywords: [PageView, FlutterFlow, UI, Widgets] --- diff --git a/docs/ff-concepts/state-management/imgs/action-triggers-widget-state.png b/docs/ff-concepts/state-management/imgs/action-triggers-widget-state.png new file mode 100644 index 00000000..6e53f2d9 Binary files /dev/null and b/docs/ff-concepts/state-management/imgs/action-triggers-widget-state.png differ diff --git a/docs/ff-concepts/state-management/imgs/managing-widget-state.png b/docs/ff-concepts/state-management/imgs/managing-widget-state.png new file mode 100644 index 00000000..bb6b8826 Binary files /dev/null and b/docs/ff-concepts/state-management/imgs/managing-widget-state.png differ diff --git a/docs/ff-concepts/state-management/imgs/using-widget-state.png b/docs/ff-concepts/state-management/imgs/using-widget-state.png new file mode 100644 index 00000000..c64ac211 Binary files /dev/null and b/docs/ff-concepts/state-management/imgs/using-widget-state.png differ diff --git a/docs/ff-concepts/state-management/imgs/widget-state.png b/docs/ff-concepts/state-management/imgs/widget-state.png new file mode 100644 index 00000000..a8fd5806 Binary files /dev/null and b/docs/ff-concepts/state-management/imgs/widget-state.png differ diff --git a/docs/ff-concepts/state-management/widget-state.md b/docs/ff-concepts/state-management/widget-state.md new file mode 100644 index 00000000..22278033 --- /dev/null +++ b/docs/ff-concepts/state-management/widget-state.md @@ -0,0 +1,64 @@ +--- +title: Widget State +--- + +# Widget State + +**Widget state** refers to the data or information that a widget holds, which can change over time and affect the widget's appearance or behavior. In FlutterFlow, the state is particularly important for form widgets, such as text fields, checkboxes, and radio buttons, as it allows these widgets to respond to user interactions. + +Additionally, **Widget Focus State** refers to the state that indicates whether a widget, such as a text field, currently has focus or not. When a widget has focus, it is ready to receive user input, and its appearance typically changes to indicate this (e.g., a text field with a blinking cursor). + +**Key Points:** + +- **Dynamic Data:** Represents values that change over time (e.g., user input in a text field). +- **Automatic Management:** FlutterFlow handles the state, so developers do not need to write explicit state management code. +- **Reactive Updates:** Changes in the state automatically update the widget's display. + +![widget-state.png](imgs%2Fwidget-state.png) + +## Managing Widget States + +FlutterFlow simplifies state management by providing built-in support for handling widget states. This means developers do not need to manually create or manage the state of form widgets. Instead, FlutterFlow automatically manages the state for these widgets, ensuring a seamless and intuitive experience. + +Some examples of widget states exposed by FlutterFlow: + + - **Text Fields:** The state of text fields is automatically managed, including the input text and validation states. + - **Checkboxes:** The state of checkboxes is managed, indicating whether they are checked or unchecked. + - **Radio Buttons:** The state of radio buttons is managed to reflect the selected option. + + +In the following example, we find widget state and widget focus state of a TextField being exposed by FlutterFlow on the page it was created and available as an option in the variable menu. + +![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. +::: + +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. + +![managing-widget-state.png](imgs%2Fmanaging-widget-state.png) + + +## Action Triggers for Form Widgets +FlutterFlow allows you to bind action triggers to widget states, such as calling an API on focus change of a textfield or changing the appearance of a button when a checkbox is checked. + +**Most common Action Triggers exposed by form widgets:** + +- **On Focus Change:** Triggered when a widget, such as a text field, gains or loses focus. +For example, showing additional tips or validation messages when the user starts typing in a text field. + +- **On Submit:** Triggered when a form or text field is submitted. For example, validating input and submitting data when the user presses the enter key or clicks a submit button. + +- **On Change:** Triggered when the value of a widget changes. For example, real-time validation or updating state as the user types in a text field or changes a selection in a dropdown. + +- **On Completed:** Triggered when a specific input is completed, such as entering a pincode. +For example, automatically moving to the next step in a process after a complete and valid pincode is entered. + +- **On Selected:** Triggered when an option is selected in widgets like choice chips, checkboxes, radio buttons, or sliders. For example, updating the UI or performing actions based on the selected option. + +These triggers allow developers to create interactive and responsive applications by defining specific actions that occur in response to user interactions with form widgets. + +![action-triggers-widget-state.png](imgs%2Faction-triggers-widget-state.png) + + diff --git a/docs/resources/control-flow/backend-logic/api/create-test-api-calls.md b/docs/resources/control-flow/backend-logic/api/create-test-api-calls.md new file mode 100644 index 00000000..c79f5b02 --- /dev/null +++ b/docs/resources/control-flow/backend-logic/api/create-test-api-calls.md @@ -0,0 +1,169 @@ +--- +title: Create & Test API Calls +slug: create-test-api +tag: [API Calls] +keywords: [API Calls, FlutterFlow] +sidebar_position: 2 +--- + +# Create & Test API Call + +On this page, you will learn how to [create](#creating-api-calls) and [test](#testing-api-calls) the API call. + +## Creating API calls + +To use an API in your app, first, you have to create the API Call. + +Follow the steps below to create an API Call: + +1. Select **API Calls** from the left [Navigation Menu](../../../../intro/ff-ui/builder.md#navigation-menu). +2. Click on the **+ Add** button and select **Create API Call**. +3. Enter the **API Call Name**. +4. Select the **Method Type**: *GET, POST, DELETE, PUT, or PATCH*. +5. Enter the **API URL** of the service you want to access. + +:::note +If you want to use a dynamic URL, for example, `` where 2 is dynamic and `` where 5 is dynamic: + +1. Replace the hard-coded value with a meaningful name inside the brackets (e.g., from `https://reqres.in/api/users/2`to `https://reqres.in/api/users/[user_id]`). +2. And then, [**create a new variable**](rest-api.md#creating-variables) with the same name you provided inside the brackets. +::: + +The further instructions are based on the **Method Type** you selected. + +### For `GET` & `DELETE` call + +If you selected `GET` or `DELETE` as the method type, follow the steps below: + +1. Optional: If the API call requires request headers such as an authorization token, [add a header](rest-api.md#passing-request-headers). +2. Optional: If the API call requires query parameters such as page number or user id, [add query parameters](rest-api.md#passing-query-parameters). +3. Click **Add Call** to save the API Call. + +:::warning +After making any changes, you must save the API call. +::: + +
+ +

+ + +In the above demo, a `GET` API call is defined to fetch users' data from [REQ | RES](https://reqres.in/) (which provides hosted REST API to try out HTTP requests). + +A demo of using a dynamic URL in a GET request is as follows: + +
+ +

+ +To add such an API call: + +1. Replace the hard-coded value with a meaningful name inside the brackets (e.g., from `https://reqres.in/api/users/2`to `https://reqres.in/api/users/[user_id]`). +2. And then, [create a new variable](rest-api.md#creating-variables) with the same name you provided inside the brackets. + +The DELETE API Call can also be defined similarly; just make sure you select the **Method Type** as ***DELETE***. + +### For `POST`, `PUT` & `PATCH` call + +If you have selected **POST request**, follow the steps below: + +1. Optional: If the API call requires request headers such as an authorization token, [add a header](rest-api.md#passing-request-headers). +2. [Create a request body](rest-api.md#creating-request-body) for the API call. +3. Click **Add Call** to save the API Call. + +:::warning +After making any changes, you must save the API call. +::: + +
+ +

+ +In this demo, a POST API call is defined with two variables, `userName` and `userJob`. The variables are used inside the JSON request body. + +The PUT and PATCH API calls can be defined similarly; make sure you enter a valid API URL endpoint and select the correct Method Type. + +## Grouping API calls + +You can create a group of API calls that share the same base URL. Grouping the API calls helps you add all request headers (e.g., auth token) at once, and they will be automatically added for all the API calls inside the group. + +:::warning +For [**private APIs**](rest-api.md#making-an-api-call-private), headers defined within the group will not be automatically included. You'll need to manually add headers for APIs marked as private. +::: + +To create the API Group: + +1. Click on the **+** button (top left side) and select the **Create API Group**. +2. Enter the **API Group Name**. +3. Enter the **API Base URL**. This should be the portion that is common in all the APIs. **Note**: Do not keep the '/' in the end. +4. You can add request headers by clicking on the **+ Add Header** button. See detailed instructions on how to [add headers](rest-api.md#headers). +5. Click **Add Group**. This will display the group on the left side. +6. Open the newly created API group, and click on the **+ Add API Call**. +7. Add the API call as you would normally do. **Note**: Inside the API endpoint, enter the URL portion that starts after the base URL. + +
+ +

+ +## Import API definitions + +We allow you to add multiple API call definitions by importing them directly from the [Swagger/OpenAPI](https://swagger.io/) in bulk. With just a simple click, you can add a large number of APIs, significantly reducing the time and effort needed to create them manually. + +Furthermore, the ability to import Swagger/OpenAPI definitions directly into FlutterFlow eliminates the risk of errors that may occur when creating API definitions manually, ensuring that applications are reliable and efficient. + +:::info +We also add all settings that are required to run the API, such as [headers](rest-api.md#headers), [query parameters](rest-api.md#query-parameters), [variables](rest-api.md#variables), and body as they are defined in the Swagger file. However, you might need to replace the hard-coded values in [Body](rest-api.md#body) text with the [variables](rest-api.md#variables). +::: + +To import API call definitions: + +1. Click the **Import OpenAPI** icon. This will open a new popup. +2. Click **Upload File**. Here you can upload your swagger file available in `.yml` or `.json` file format. +3. After the import is successful, you will see the list of all APIs created and added as a [group](#grouping-api-calls). + +Here's an example of importing API calls in bulk, taken from [here](https://editor.swagger.io/). + +
+

+ +## Testing API calls + +You should always test your API call before using it inside your app. We make it easy for you to try the API call inside our builder. + +To test the API call along with its response, follow the steps below: + +1. Select an API call you have already created or are currently defining, and go to the **Response & Test** tab. +2. On the left side, you will see the **Variables** section, where you can enter the values for the variables defined for your API call. +3. On the right, the **Preview** section lets you check the API URL, request headers, request body, and response. In the **Test Response** tab, you can view the full API response, including both the JSON format and raw body text, as well as the response header. +4. Click **Test API Call** to trigger the API call. You'll notice that the status of the GET request is displayed, and if it's successful (status code `200`), the result returned from that request will also be displayed below. +5. Any value of the JSON result can be accessed by [defining the JSON path](rest-api.md#json-path). + +
+ +

+ + +The demo below shows the testing of creating a new user using a POST request. The API Call takes two variables: `userName` and `userJob`. The successful POST request returns a status code of `201`. + +:::info +The testing of `PUT` and `PATCH` requests would also be similar to this. +::: + +
+ +

+ +## Trigger API calls + +There are two methods to trigger an API call in your app: + +* Add an **Action** to trigger the API Call based upon a user gesture. +* Add the API Call as a **Backend Query** that gets triggered automatically when the page or widget is loaded on the screen. + diff --git a/docs/resources/control-flow/backend-logic/api/streaming-api.md b/docs/resources/control-flow/backend-logic/api/streaming-api.md index e2ad99ed..67c84ce7 100644 --- a/docs/resources/control-flow/backend-logic/api/streaming-api.md +++ b/docs/resources/control-flow/backend-logic/api/streaming-api.md @@ -3,7 +3,7 @@ slug: /resources/backend-logic/streaming-api title: Streaming APIs description: Learn how to use streaming APIs in your backend logic with FlutterFlow. tags: [Streaming APIs, Backend Logic, Control Flow, FlutterFlow] -sidebar_position: 2 +sidebar_position: 3 keywords: [Streaming APIs, Backend Logic, Control Flow, FlutterFlow] --- diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md index 730142d2..359d35cd 100644 --- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/checkbox-group.md @@ -14,6 +14,10 @@ The CheckboxGroup widget is used to allow a user to select multiple items. The c You can use the CheckboxGroup widget for implementing multiple selections such as repeating days for alarm, languages a user can speak, and allowing users to select pizza toppings. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding CheckboxGroup Here's an example of how you can use the CheckboxGroup widget in your project: diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md index cf846baf..56200ffa 100644 --- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/dropdown.md @@ -13,6 +13,10 @@ The DropDown widget enables users to choose from a list of options. It requires You can use this widget in any situation where you want users to select from a set of options, such as selecting a country, choosing a language, or picking a color. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding DropDown widget Let's see how to add a *DropDown* widget and build an example that shows the selected value on a Text widget. Here's how it looks: diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md index b880fdad..0efebf0d 100644 --- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/radiobutton.md @@ -11,7 +11,11 @@ sidebar_position: 2 The RadioButton widget is used to allow a user to select one option from multiple selections. -You can use the RadioButton widget for implementing a single selection such as gender selection, notification preferences, etc. +You can use the **RadioButton** widget for implementing a single selection such as gender selection, notification preferences, etc. + +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: ## Adding RadioButton to Your Project diff --git a/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md index edf77f52..5f294b36 100644 --- a/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md +++ b/docs/resources/control-flow/user-interactivity/forms/form-widgets/text-field.md @@ -13,6 +13,10 @@ import TabItem from '@theme/TabItem'; The TextField widget allows users to enter text, numbers, and symbols in your app. You can use the TextField widget to build forms, send messages, dialogs, search, etc. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding TextField widget Let's see how to add a TextField widget and see an example of displaying its value in an [Alert Dialog](#). diff --git a/docs/resources/ui/components/built-in-components/badge.md b/docs/resources/ui/components/built-in-components/badge.md index a32146ed..381d2216 100644 --- a/docs/resources/ui/components/built-in-components/badge.md +++ b/docs/resources/ui/components/built-in-components/badge.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # Badge diff --git a/docs/resources/ui/components/built-in-components/barcode.md b/docs/resources/ui/components/built-in-components/barcode.md index abe4a09b..f1317121 100644 --- a/docs/resources/ui/components/built-in-components/barcode.md +++ b/docs/resources/ui/components/built-in-components/barcode.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- diff --git a/docs/resources/ui/components/built-in-components/calendar.md b/docs/resources/ui/components/built-in-components/calendar.md index e204cd4c..13488364 100644 --- a/docs/resources/ui/components/built-in-components/calendar.md +++ b/docs/resources/ui/components/built-in-components/calendar.md @@ -1,7 +1,7 @@ --- slug: calendar title: Calendar -tags: [] +tags: [Base Elements] description: Learn how to add Calendar widget in your FlutterFlow project. --- diff --git a/docs/resources/ui/components/built-in-components/carousel.md b/docs/resources/ui/components/built-in-components/carousel.md index 793cdc8a..9063f189 100644 --- a/docs/resources/ui/components/built-in-components/carousel.md +++ b/docs/resources/ui/components/built-in-components/carousel.md @@ -1,7 +1,7 @@ --- slug: carousel title: Carousel -tags: [] +tags: [Layout Elements] description: Learn how to add Carousel widget in your FlutterFlow project. --- diff --git a/docs/resources/ui/components/built-in-components/chart/chart.md b/docs/resources/ui/components/built-in-components/chart/chart.md index 9a08d2ae..6a059653 100644 --- a/docs/resources/ui/components/built-in-components/chart/chart.md +++ b/docs/resources/ui/components/built-in-components/chart/chart.md @@ -1,7 +1,7 @@ --- -slug: overview +slug: chart title: Chart -tags: [] +tags: [Base Elements] description: Learn how to add Chart widget in your FlutterFlow project. sidebar_position: 1 --- diff --git a/docs/resources/ui/components/built-in-components/choicechips.md b/docs/resources/ui/components/built-in-components/choicechips.md index 680f4121..73da42a2 100644 --- a/docs/resources/ui/components/built-in-components/choicechips.md +++ b/docs/resources/ui/components/built-in-components/choicechips.md @@ -1,7 +1,7 @@ --- slug: choice-chips title: ChoiceChips -tags: [] +tags: [Form Elements] description: Learn how to add ChoiceChips in your FlutterFlow app. --- @@ -11,6 +11,9 @@ The ChoiceChips widget allows users to select a single option from a group of ch You could use this widget to implement a filter feature in an e-commerce app to let users select different product attributes like size, color, or price range. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: ## Adding ChoiceChips widget diff --git a/docs/resources/ui/components/built-in-components/count-controller.md b/docs/resources/ui/components/built-in-components/count-controller.md index f972e562..f5690bbe 100644 --- a/docs/resources/ui/components/built-in-components/count-controller.md +++ b/docs/resources/ui/components/built-in-components/count-controller.md @@ -1,7 +1,7 @@ --- slug: count-controller title: CountController -tags: [] +tags: [Form Elements] description: Learn how to add CountController in your FlutterFlow app. --- @@ -11,6 +11,10 @@ The CountController widget is used to increment and decrement the count or numbe You could use the CountController widget to set the quantity of any product when buying in an e-commerce app. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding CountController to your project Here's an example of how you can use a CountController widget in your project: diff --git a/docs/resources/ui/components/built-in-components/creditcardform.md b/docs/resources/ui/components/built-in-components/creditcardform.md index 881bfcb5..e1e39f74 100644 --- a/docs/resources/ui/components/built-in-components/creditcardform.md +++ b/docs/resources/ui/components/built-in-components/creditcardform.md @@ -1,12 +1,16 @@ --- slug: credit-card-form title: CreditCardForm -tags: [] +tags: [Form Elements] description: Learn how to add CreditCardForm in your FlutterFlow app. --- # CreditCardForm The CreditCardForm widget allows users to enter their credit card details such as card number, expiry date, and CVV. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding CreditCardForm widget Here's an example of how you can add the CreditCardForm widget to your project: diff --git a/docs/resources/ui/components/built-in-components/datatable.md b/docs/resources/ui/components/built-in-components/datatable.md index 555c01d1..00498f62 100644 --- a/docs/resources/ui/components/built-in-components/datatable.md +++ b/docs/resources/ui/components/built-in-components/datatable.md @@ -1,7 +1,7 @@ --- slug: datatable title: DataTable -tags: [] +tags: [Layout Elements] description: Learn how to add DataTable widget in your FlutterFlow project. --- diff --git a/docs/resources/ui/components/built-in-components/draggable.md b/docs/resources/ui/components/built-in-components/draggable.md index 4655f114..531101f6 100644 --- a/docs/resources/ui/components/built-in-components/draggable.md +++ b/docs/resources/ui/components/built-in-components/draggable.md @@ -1,3 +1,7 @@ +--- +tags: [Base Elements] +--- + # Draggable + DragTarget The Draggable widget is used to make a widget that can be dragged and dropped to a different location within the app. It allows users to interact with the app by moving an item using touch gestures or a mouse. The DragTarget widget is used in conjunction with the Draggable widget to specify where a dragged item can be dropped. It creates a region that can accept the data carried by the Draggable widget. diff --git a/docs/resources/ui/components/built-in-components/expandable.md b/docs/resources/ui/components/built-in-components/expandable.md index cb9f6097..e6470869 100644 --- a/docs/resources/ui/components/built-in-components/expandable.md +++ b/docs/resources/ui/components/built-in-components/expandable.md @@ -1,4 +1,6 @@ - +--- +tags: [Layout Elements] +--- # Expandable diff --git a/docs/resources/ui/components/built-in-components/markdown.md b/docs/resources/ui/components/built-in-components/markdown.md index 26326dbb..12cff15b 100644 --- a/docs/resources/ui/components/built-in-components/markdown.md +++ b/docs/resources/ui/components/built-in-components/markdown.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # Markdown diff --git a/docs/resources/ui/components/built-in-components/pincode.md b/docs/resources/ui/components/built-in-components/pincode.md index 460b3c92..6310acfc 100644 --- a/docs/resources/ui/components/built-in-components/pincode.md +++ b/docs/resources/ui/components/built-in-components/pincode.md @@ -1,7 +1,7 @@ --- slug: pincode title: PinCode -tags: [FlutterFlow, PinCode, Form Widget, App Development] +tags: [PinCode, Form Elements] keywords: [FlutterFlow, PinCode, Form Widget, App Development, Input Field, Flutter] description: Learn how to add the PinCode widget in your FlutterFlow app. --- @@ -9,6 +9,10 @@ description: Learn how to add the PinCode widget in your FlutterFlow app. The PinCode widget allows you to enter the PIN or OTP. You could use this widget to verify the user identity or a transaction before making payments in fintech apps. +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: + ## Adding PinCode widget To add a PinCode widget: diff --git a/docs/resources/ui/components/built-in-components/progressbar.md b/docs/resources/ui/components/built-in-components/progressbar.md index 952ab0e9..5d65b23b 100644 --- a/docs/resources/ui/components/built-in-components/progressbar.md +++ b/docs/resources/ui/components/built-in-components/progressbar.md @@ -1,7 +1,7 @@ --- slug: progressbar title: ProgressBar -tags: [] +tags: [Form Elements] description: Learn how to add ProgressBar widget in your FlutterFlow project. --- diff --git a/docs/resources/ui/components/built-in-components/ratingbar.md b/docs/resources/ui/components/built-in-components/ratingbar.md index 2c4160c5..8f925651 100644 --- a/docs/resources/ui/components/built-in-components/ratingbar.md +++ b/docs/resources/ui/components/built-in-components/ratingbar.md @@ -1,7 +1,7 @@ --- slug: ratingbar title: RatingBar -tags: [FlutterFlow, RatingBar, Form Widget, App Development] +tags: [RatingBar, Form Elements] keywords: [FlutterFlow, RatingBar, Form Widget, App Development, Input Field, Flutter] description: Learn how to add RatingBar in your FlutterFlow app. --- diff --git a/docs/resources/ui/components/built-in-components/slider.md b/docs/resources/ui/components/built-in-components/slider.md index b1aaafb4..fa14833d 100644 --- a/docs/resources/ui/components/built-in-components/slider.md +++ b/docs/resources/ui/components/built-in-components/slider.md @@ -1,7 +1,7 @@ --- slug: slider title: Slider -tags: [FlutterFlow, Slider, Form Widget, App Development] +tags: [Slider, Form Elements] keywords: [FlutterFlow, Slider, Form Widget, App Development, Input Field, Flutter] description: Learn how to add Slider in your FlutterFlow app. --- @@ -11,7 +11,11 @@ description: Learn how to add Slider in your FlutterFlow app. The Slider widget is used to select a single value from a range of values. You define the min and max value for the slider, and users can choose the value between the specified range by dragging the slider thumb (sliding circle). -For example, you can use the Slider widget to allow users to set the volume, set the donation amount, etc. +For example, you can use the **Slider** widget to allow users to set the volume, set the donation amount, etc. + +:::tip[Widget State] +Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements. +::: ## Adding Slider diff --git a/docs/resources/ui/components/built-in-components/sticky-header.md b/docs/resources/ui/components/built-in-components/sticky-header.md index 9006ad91..23994764 100644 --- a/docs/resources/ui/components/built-in-components/sticky-header.md +++ b/docs/resources/ui/components/built-in-components/sticky-header.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # StickyHeader diff --git a/docs/resources/ui/components/built-in-components/swipeablestack.md b/docs/resources/ui/components/built-in-components/swipeablestack.md index 1e946304..1efca722 100644 --- a/docs/resources/ui/components/built-in-components/swipeablestack.md +++ b/docs/resources/ui/components/built-in-components/swipeablestack.md @@ -1,7 +1,7 @@ --- slug: swipeable-stack title: SwipeableStack -tags: [] +tags: [Layout Elements] description: Learn how to add SwipeableStack widget in your FlutterFlow project. --- diff --git a/docs/resources/ui/components/overview.md b/docs/resources/ui/components/overview.md index 9ae0c517..ba944e94 100644 --- a/docs/resources/ui/components/overview.md +++ b/docs/resources/ui/components/overview.md @@ -41,7 +41,7 @@ Leveraging components effectively helps you build a consistent, efficient, and m ## Types of Components in FlutterFlow -- **[Build-in Components](built-in-components/getting-started.md):** FlutterFlow +- **Built-in Components:** FlutterFlow includes a variety of built-in pre-defined widgets that serve as ready-made components, such as the `CreditCard` or `Signature` widget. These are out-of-the-box solutions provided by FlutterFlow that can be directly integrated into any project diff --git a/docs/resources/ui/overview.md b/docs/resources/ui/overview.md index 102af65f..ba58f2b1 100644 --- a/docs/resources/ui/overview.md +++ b/docs/resources/ui/overview.md @@ -120,7 +120,7 @@ Common layout elements include: | **Stack** | Layers its child widgets on top of each other, allowing for overlapping elements. | | | **Container** | Provides a box model for a single child widget, with optional padding, margins, borders, box shadow and background color. | | -_Check out the builder for the entire list_ +Find the entire list on this [**index page**](/tags/layout-elements). #### Base Elements @@ -136,7 +136,7 @@ Examples include: | **Icon** | Displays icon. | | | **Button** | A widget meant to trigger actions and take users to another flow in the app. It can be styled with different colors, borders, and text | | -_...and more._ +Find the entire list on this [**index page**](/tags/base-elements). #### Page Elements @@ -162,6 +162,8 @@ Examples include: | **Radio Button** | Allows users to select one option from a set. | Radio Button Example | | **Dropdown** | Provides a menu with multiple options where users can select one. | Dropdown Example | +Find the entire list on this [**index page**](/tags/form-elements). + Each category in FlutterFlow serves distinct purposes, helping you design both the appearance and functionality of your app more efficiently. diff --git a/docs/resources/ui/widgets/built-in-widgets/_category_.json b/docs/resources/ui/widgets/built-in-widgets/_category_.json index 9acdef2d..aab870be 100644 --- a/docs/resources/ui/widgets/built-in-widgets/_category_.json +++ b/docs/resources/ui/widgets/built-in-widgets/_category_.json @@ -1,3 +1,4 @@ { - "label": "Built-in Widgets" + "label": "Built-in Widgets", + "position": 6 } \ No newline at end of file diff --git a/docs/resources/ui/widgets/built-in-widgets/button.md b/docs/resources/ui/widgets/built-in-widgets/button.md index 4d4d3e2d..39e94ec9 100644 --- a/docs/resources/ui/widgets/built-in-widgets/button.md +++ b/docs/resources/ui/widgets/built-in-widgets/button.md @@ -1,3 +1,6 @@ +--- +tags: [Base Elements] +--- # Button The Button widget is a fundamental component in user interface design, utilized extensively across web and mobile applications. It serves as a primary means of user interaction, allowing users to execute actions or commands within an application. Buttons are essential for: diff --git a/docs/resources/ui/widgets/built-in-widgets/card.md b/docs/resources/ui/widgets/built-in-widgets/card.md index 2068a981..5e2086c5 100644 --- a/docs/resources/ui/widgets/built-in-widgets/card.md +++ b/docs/resources/ui/widgets/built-in-widgets/card.md @@ -1,4 +1,7 @@ - +--- +slug: card +tags: [Layout Elements] +--- # Card diff --git a/docs/resources/ui/widgets/built-in-widgets/container.md b/docs/resources/ui/widgets/built-in-widgets/container.md index 86078cad..18303d7c 100644 --- a/docs/resources/ui/widgets/built-in-widgets/container.md +++ b/docs/resources/ui/widgets/built-in-widgets/container.md @@ -1,5 +1,7 @@ --- +slug: container title: Container +tags: [Layout Elements] --- # Container diff --git a/docs/resources/ui/widgets/built-in-widgets/dividers.md b/docs/resources/ui/widgets/built-in-widgets/dividers.md index ebf2c343..600be968 100644 --- a/docs/resources/ui/widgets/built-in-widgets/dividers.md +++ b/docs/resources/ui/widgets/built-in-widgets/dividers.md @@ -1,4 +1,6 @@ - +--- +tags: [Layout Elements] +--- # Dividers Add a thin horizontal or vertical line, with padding on either side. Customize the color, width diff --git a/docs/resources/ui/widgets/built-in-widgets/icons.md b/docs/resources/ui/widgets/built-in-widgets/icons.md index b59454b1..5946a63c 100644 --- a/docs/resources/ui/widgets/built-in-widgets/icons.md +++ b/docs/resources/ui/widgets/built-in-widgets/icons.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # Icons diff --git a/docs/resources/ui/widgets/built-in-widgets/image.md b/docs/resources/ui/widgets/built-in-widgets/image.md index edab3a4b..5d4616af 100644 --- a/docs/resources/ui/widgets/built-in-widgets/image.md +++ b/docs/resources/ui/widgets/built-in-widgets/image.md @@ -1,5 +1,6 @@ --- title: Image +tags: [Base Elements] --- diff --git a/docs/resources/ui/widgets/built-in-widgets/list-grid.md b/docs/resources/ui/widgets/built-in-widgets/list-grid.md index e46b6210..e0265b93 100644 --- a/docs/resources/ui/widgets/built-in-widgets/list-grid.md +++ b/docs/resources/ui/widgets/built-in-widgets/list-grid.md @@ -1,5 +1,6 @@ --- title: Lists & Grids +tags: [Layout Elements] --- In FlutterFlow, `ListView` and `GridView` are versatile widgets designed for displaying lists and grids diff --git a/docs/resources/ui/widgets/built-in-widgets/mouse-region.md b/docs/resources/ui/widgets/built-in-widgets/mouse-region.md index 7f3b4970..34655310 100644 --- a/docs/resources/ui/widgets/built-in-widgets/mouse-region.md +++ b/docs/resources/ui/widgets/built-in-widgets/mouse-region.md @@ -1,4 +1,8 @@ +--- +tags: [Base Elements] +--- + # MouseRegion The `MouseRegion` widget lets you know whenever the mouse pointer enters or exits from a widget. You could use it to build a user experience (UX), such as animating buttons when a user hovers over them and revealing or hiding menu items when a user hovers over the menu icon. diff --git a/docs/resources/ui/widgets/built-in-widgets/spacer.md b/docs/resources/ui/widgets/built-in-widgets/spacer.md index 9f89ee08..4953ef54 100644 --- a/docs/resources/ui/widgets/built-in-widgets/spacer.md +++ b/docs/resources/ui/widgets/built-in-widgets/spacer.md @@ -1,3 +1,7 @@ +--- +tags: [Layout Elements] +--- + # Spacer The [Spacer widget](https://www.youtube.com/watch?v=7FJgd7QN1zI) is used to insert a flexible empty diff --git a/docs/resources/ui/widgets/built-in-widgets/text.md b/docs/resources/ui/widgets/built-in-widgets/text.md index 5fe08e72..81138373 100644 --- a/docs/resources/ui/widgets/built-in-widgets/text.md +++ b/docs/resources/ui/widgets/built-in-widgets/text.md @@ -1,3 +1,6 @@ +--- +tags: [Base Elements] +--- # Text diff --git a/docs/resources/ui/widgets/built-in-widgets/tooltip.md b/docs/resources/ui/widgets/built-in-widgets/tooltip.md index bb550e65..473c71e1 100644 --- a/docs/resources/ui/widgets/built-in-widgets/tooltip.md +++ b/docs/resources/ui/widgets/built-in-widgets/tooltip.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # Tooltip diff --git a/docs/resources/ui/widgets/built-in-widgets/transform.md b/docs/resources/ui/widgets/built-in-widgets/transform.md index bd1514d4..874110d0 100644 --- a/docs/resources/ui/widgets/built-in-widgets/transform.md +++ b/docs/resources/ui/widgets/built-in-widgets/transform.md @@ -1,4 +1,6 @@ - +--- +tags: [Base Elements] +--- # Transform diff --git a/docs/resources/ui/widgets/composing-widgets.md b/docs/resources/ui/widgets/composing-widgets.md index d3f41058..ed84bf7d 100644 --- a/docs/resources/ui/widgets/composing-widgets.md +++ b/docs/resources/ui/widgets/composing-widgets.md @@ -1,6 +1,7 @@ --- title: Composing Widgets sidebar_position: 2 +tags: [Layout Elements] --- # Composing widgets diff --git a/docs/resources/ui/widgets/generate-dynamic-children.md b/docs/resources/ui/widgets/generate-dynamic-children.md index 2c72c40b..d8e42567 100644 --- a/docs/resources/ui/widgets/generate-dynamic-children.md +++ b/docs/resources/ui/widgets/generate-dynamic-children.md @@ -1,4 +1,7 @@ - +--- +title: Generating Dynamic Children +sidebar_position: 3 +--- # Generating Dynamic Children diff --git a/docs/resources/ui/widgets/widget-commonalities.md b/docs/resources/ui/widgets/widget-commonalities.md index 5ecd5bbd..3fefaa01 100644 --- a/docs/resources/ui/widgets/widget-commonalities.md +++ b/docs/resources/ui/widgets/widget-commonalities.md @@ -1,3 +1,7 @@ +--- +title: Common Widget Properties +sidebar_position: 4 +--- # Common Widget Properties