diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/docs/ff-concepts/adding-customization/cloud-functions.md index 9424b0f1..246dbb4c 100644 --- a/docs/ff-concepts/adding-customization/cloud-functions.md +++ b/docs/ff-concepts/adding-customization/cloud-functions.md @@ -2,19 +2,20 @@ slug: /concepts/custom-code/cloud-functions title: Cloud Functions description: Learn how to use Cloud Functions in your FlutterFlow app for serverless backend functionality. -tags: [FlutterFlow, Cloud Functions, Serverless, Integration] +tags: [Cloud Functions, Serverless, Integration] sidebar_position: 6 keywords: [FlutterFlow, Cloud Functions, Serverless, Integration] --- # Cloud Functions -[Cloud Functions](https://firebase.google.com/docs/functions) allows you to run backend code in response to events triggered by Firebase features and HTTPS requests. For example, you want to automatically send a welcome email to users when they sign up for your app. You can do this using a Cloud Function that triggers on Firebase Authentication's user creation event. +[**Cloud Functions**](https://firebase.google.com/docs/functions) allows you to run backend code in response to events triggered by Firebase features and HTTPS requests. For example, you want to automatically send a welcome email to users when they sign up for your app. You can do this using a Cloud Function that triggers on Firebase Authentication's user creation event. We allow you to write and deploy Firebase Cloud Functions directly within the platform. With an integrated code editor, writing JavaScript cloud functions is quick and user-friendly. Each function has customizable boilerplate settings, including pre-configured essentials like memory, region, and timeout. :::note -You can find some interesting use cases [*here*](https://firebase.google.com/docs/functions/use-cases). +Read up on some interesting use cases of +[**Cloud Functions**](https://firebase.google.com/docs/functions/use-cases). ::: ## Adding Cloud Functions @@ -40,7 +41,8 @@ Here are the step-by-step instructions to build such an example: :::info[Before you Begin] * Make sure the project is on Blaze plan on Firebase. -* Completed all steps in the [Firebase Setup](/data-and-backend/firebase/firebase-setup). +* Completed all steps in the +[**Firebase Setup**](../../ff-integrations/firebase/connect-to-firebase-setup.md). ::: ### 1. Add page state variables @@ -50,6 +52,8 @@ For this example, you'll need to set up two [page state variables](/data-and-bac 1. **generatingImage (*****Type: Boolean*****)**: This is used to control the visibility of a loading indicator during the logo creation process. Its value is set to *True* before initiating the API call and switched to *False* once the logo generation is complete. 5. **logoImage (*****Type: ImagePath*****)**: This is used to hold the generated logo image. After a successful API call, the retrieved image URL is stored here, allowing the logo to be displayed in the Image widget. + +

![img_6.png](imgs%2Fimg_6.png) ### 2. Build a page @@ -69,9 +73,10 @@ Few things to note here: To create and deploy a *Cloud Function* : -1. Click on the **Cloud Functions** from the [*Navigation Menu*] -(/getting-started/ui-builder/navigation-menu) (left side of your screen). -5. Click **+ Add**. This will add the default newCloudFunction*.* +1. Click on the **Cloud Functions** from the +[**Navigation Menu**](../../../docs/intro/ff-ui/builder.md#navigation-menu) (left side of your + screen). +5. Click **+ Add**. This will add the default `newCloudFunction`. 8. Set the **Cloud Function Name**. #### Boilerplate Settings @@ -79,6 +84,7 @@ To create and deploy a *Cloud Function* : On the right side, you can configure the following Boilerplate Settings: 1. **Memory Allocation**: You can specify the amount of memory your function should have when it's executed based on its complexity and needs. This setting is crucial as it influences the function's performance and the cost of running it. More memory can enhance performance for intensive tasks but also increase costs. + 5. **Timeout (s)**: This refers to the maximum amount of time, in seconds, that a function is allowed to run before it is automatically terminated. If your function takes longer to execute, increasing the timeout setting may be necessary. However, be aware that longer timeouts can incur higher costs since billing is based on execution time. 8. **Require Authentication**: Turn on this setting if you want users to be authenticated to execute this cloud function. 11. **Cloud Function Region**: This determines the geographical location of the servers where your functions are hosted and executed. Ideally, you should keep this same as your *Default GCP resource location* and the Cloud Function Region specified in the Firebase Advanced Settings. @@ -92,6 +98,7 @@ by configuring the input and output. 1. To receive output from a Cloud Function, enable the **Return Value** and choose an appropriate Type for the output, like 'String' for text. For this example, set it to *ImagePath* to get the URL of the generated logo. + 5. To input data: Click **+ Add parameters**. **Name** the parameter, select its **Type**, choose single or multiple items (**Is List** option), and uncheck **Nullable** if the value can be null. For this example, add a parameter 'prompt' with *Type* set to *String*. 8. When using [Custom Data Types](/data-and-backend/custom-data-types), Cloud Function expects JSON, matching each field in the Data Type to a key-value pair in the JSON. If the Data Type is a list, the function expects a list of JSONs. For example, for a custom data type named 'Person' with fields 'Name' and 'Age,' the function should return: @@ -125,6 +132,7 @@ For a list, the function should return: #### To deploy 1. Click the `[]` icon to view the boilerplate code; a popup will open with the updated code, and then click **` Copy to Editor`**. **Tip**: To see if you are able to deploy the cloud function (before adding your own code), proceed directly with steps 8 and 9. + 2. Inside the code editor, add the cloud function code. **Tip**: You can copy the boilerplate code to [ChatGPT](https://chat.openai.com/) and ask it to write the desired code based on that. 3. Click **Save Cloud Function**. diff --git a/docs/ff-concepts/adding-customization/custom-files.md b/docs/ff-concepts/adding-customization/custom-files.md index b6173d1d..6263c37b 100644 --- a/docs/ff-concepts/adding-customization/custom-files.md +++ b/docs/ff-concepts/adding-customization/custom-files.md @@ -66,7 +66,8 @@ Future setStatusbarColor() async { } ``` -2. Now click on **Custom Functions** from the [*Navigation Menu*](/getting-started/ui-builder/navigation-menu) (left side of your screen) and open the **Custom Files > main.dart**. +2. Now click on **Custom Functions** from the +[**Navigation Menu**](../../../docs/intro/ff-ui/builder.md#navigation-menu) and open the **Custom Files > main.dart**. 5. Determine where to place the code (i.e., **Initial Action** or **Final Action**), click the **+** button, and select the custom action. 8. Click **Save**. diff --git a/docs/ff-concepts/state-management/state-management.md b/docs/ff-concepts/state-management/state-management.md index 301cc166..965194e1 100644 --- a/docs/ff-concepts/state-management/state-management.md +++ b/docs/ff-concepts/state-management/state-management.md @@ -3,7 +3,7 @@ title: State Management description: An overview of state management in FlutterFlow --- -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. +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. You can think of the UI as a function of your state variables, where changes in these variables directly influence what the UI displays. @@ -28,8 +28,10 @@ You can learn more about state management from this video:

:::tip -To learn more about state management in FlutterFlow, read up on [**Variables**](#) and how [**Page -State**](#), or +To learn more about state management in FlutterFlow, read up on +[**Variables**](../../resources/data-representation/overview.md#variable) and how +[**Page +State**](../../resources/ui-building-blocks/pages/page-lifecycle.md#page-state), or [**Component State**](#) or [**App State variables**](#) are modified in FlutterFlow. ::: diff --git a/docs/ff-integrations/authentication/types/firebase-auth/anonymous-login.md b/docs/ff-integrations/authentication/types/firebase-auth/anonymous-login.md index 5b1aad97..037ac934 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/anonymous-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/anonymous-login.md @@ -13,11 +13,10 @@ keywords: [FlutterFlow, Anonymous Login, Authentication, Firebase] Before getting started with this section: -- Complete [**Firebase Setup**](#) -- Complete [**Initial Setup**](initial-setup.md) required for authentication. - +- Complete [**Firebase Setup**](.././../../firebase/connect-to-firebase-setup.md) +- Complete [**Initial Setup**](auth-initial-setup) required for authentication. - Learn more about the concepts -of [**Anonymous Authentication**](docs/Integrations/Authentication/Concepts/authentication-approaches.md) +of [**Anonymous Authentication**](authentication-approaches.md) ::: ## Enable Anonymous Authentication in Firebase diff --git a/docs/ff-integrations/authentication/types/firebase-auth/apple-login.md b/docs/ff-integrations/authentication/types/firebase-auth/apple-login.md index a904738d..a1519a8e 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/apple-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/apple-login.md @@ -12,7 +12,7 @@ keywords: [FlutterFlow, Apple Login, Authentication, Firebase] Apple Sign-In allows users to authenticate using their Apple Accounts. -:::warning +:::warning[Support] Apple sign-in functionality is only supported for iOS. @@ -49,11 +49,13 @@ Apple sign-in functionality is only supported for iOS. Before getting started with this section: -1. Complete [**Firebase Setup**](#). -2. Complete [**Initial setup**](initial-setup.md) required for authentication. +1. Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md). +2. Complete [**Initial setup**](auth-initial-setup) required for authentication. 3. Created an [**Apple account**](https://appleid.apple.com/account?appId=632&returnUrl=https%3A%2F%2Fdeveloper.apple.com%2Faccount%2F). -4. [**Purchased an Apple Developer membership**](https://developer.apple.com/programs/enroll/). Please see [**this link**](https://developer.apple.com/programs/) for more details on the Apple Developer program and how to sign up. -5. Apple sign-In can not be tested in Run Mode. You will need to test it on a real device or emulator. +4. [**Purchased an Apple Developer membership**](https://developer.apple.com/programs/enroll/). + Read more about the [**Apple Developer Program**](https://developer.apple.com/programs/) and how to sign up. +5. Apple sign-In can not be tested in Run Mode. You will need to test it on a real device or + emulator. Try with Local Run! ::: ## Adding Apple sign-in diff --git a/docs/ff-integrations/authentication/types/firebase-auth/initial-setup.md b/docs/ff-integrations/authentication/types/firebase-auth/auth-initial-setup.md similarity index 95% rename from docs/ff-integrations/authentication/types/firebase-auth/initial-setup.md rename to docs/ff-integrations/authentication/types/firebase-auth/auth-initial-setup.md index 80f9367a..d23be075 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/initial-setup.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/auth-initial-setup.md @@ -2,7 +2,7 @@ slug: /integrations/authentication/firebase/initial-setup title: Initial Setup description: Learn how to perform the initial setup for Firebase authentication in your FlutterFlow app. -tags: [FlutterFlow, Initial Setup, Authentication, Firebase] +tags: [Initial Setup, Authentication, Firebase] sidebar_position: 0 keywords: [FlutterFlow, Initial Setup, Authentication, Firebase] --- @@ -49,12 +49,11 @@ The 'users' collection stores the information for authenticated users. :::tip[Skip if...] You have already enabled 'Create User Collection' while creating a new -project with a Firebase setup. - +project with [Firebase Setup](../../../firebase/connect-to-firebase-setup.md). ::: -1. Click on the Firestore tab from the Navigation Menu (left side of your - screen). +1. Click on the Firestore tab from the +[**Navigation Menu**](../../../../../docs/intro/ff-ui/builder.md#navigation-menu). 2. Click on the **+ Create Collection** button. If you have any other collection already added, you can click on the Plus button. 3. Enter a collection_name (this can be anything, but we recommend 'users') and @@ -127,7 +126,7 @@ this [link](https://developers.google.com/android/guides/client-auth). :::warning[Release Guidelines] While releasing the app, make sure -to [**get the key from Play Console**](https://docs.flutterflow.io/data-and-backend/firebase/authentication/phone-sign-in#release-mode). +to [**get the key from Play Console**](#). ::: 1. Open a terminal window: diff --git a/docs/ff-integrations/authentication/types/firebase-auth/email-sign-in.md b/docs/ff-integrations/authentication/types/firebase-auth/email-sign-in.md index 5238f4d1..aeac925c 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/email-sign-in.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/email-sign-in.md @@ -13,8 +13,8 @@ keywords: [FlutterFlow, Email Login, Authentication, Firebase] Before getting started with this section: -- Complete [**Firebase Setup**](#) -- Complete [**Initial Setup**](initial-setup.md) +- Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md) +- Complete [**Initial Setup**](auth-initial-setup) ::: ## Enable Email Login Provider in Firebase diff --git a/docs/ff-integrations/authentication/types/firebase-auth/facebook-login.md b/docs/ff-integrations/authentication/types/firebase-auth/facebook-login.md index 0af23bb1..e1a39d7f 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/facebook-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/facebook-login.md @@ -19,8 +19,8 @@ Facebook login allows users to authenticate using their Facebook Accounts. Before getting started with this section: -- Complete [**Firebase Setup**](#) -- Complete [**Initial Setup**](initial-setup.md) +- Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md) +- Complete [**Initial Setup**](auth-initial-setup) ::: ## Adding Facebook sign-in diff --git a/docs/ff-integrations/authentication/types/firebase-auth/github-login.md b/docs/ff-integrations/authentication/types/firebase-auth/github-login.md index be106372..4918e4a7 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/github-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/github-login.md @@ -16,8 +16,8 @@ The GitHub auth provides a convenient way for users to authenticate and log in t Before getting started with this section: -- Complete [**Firebase Setup**](#). -- Complete [**Initial setup**](initial-setup.md) required for authentication. +- Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md). +- Complete [**Initial setup**](auth-initial-setup.md) required for authentication. ::: diff --git a/docs/ff-integrations/authentication/types/firebase-auth/google-login.md b/docs/ff-integrations/authentication/types/firebase-auth/google-login.md index d4b302be..9ebc29f4 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/google-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/google-login.md @@ -15,8 +15,8 @@ Google Sign-In allows users to authenticate using their Google Accounts. Before getting started with this section: -- Complete [**Firebase Setup**](#) -- Complete [**Initial Setup**](initial-setup.md) +- Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md) +- Complete [**Initial Setup**](auth-initial-setup) - Added **SHA-1 key** and regenerated **Config Keys**. ::: diff --git a/docs/ff-integrations/authentication/types/firebase-auth/jwt-token-login.md b/docs/ff-integrations/authentication/types/firebase-auth/jwt-token-login.md index ccb9c6dc..5656dd5f 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/jwt-token-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/jwt-token-login.md @@ -29,8 +29,8 @@ Let's build an example that uses a JWT token to log into the app. Here's how it Before getting started with this section: -- Complete [**Firebase Setup**](#). -- Complete [**Initial setup**](initial-setup.md) required for authentication. +- Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md). +- Complete [**Initial setup**](auth-initial-setup) required for authentication. ::: diff --git a/docs/ff-integrations/authentication/types/firebase-auth/phone-login.md b/docs/ff-integrations/authentication/types/firebase-auth/phone-login.md index 4d0a3bcf..07390a90 100644 --- a/docs/ff-integrations/authentication/types/firebase-auth/phone-login.md +++ b/docs/ff-integrations/authentication/types/firebase-auth/phone-login.md @@ -41,8 +41,8 @@ Phone login allows a user to sign in by sending an SMS message to the user's pho Before getting started with this section: -1. Complete [**Firebase Setup**](#). -2. Complete [**Initial setup**](initial-setup.md) required for authentication. +1. Complete [**Firebase Setup**](../../../firebase/connect-to-firebase-setup.md). +2. Complete [**Initial setup**](auth-initial-setup) required for authentication. ::: diff --git a/docs/ff-integrations/database/cloud-firestore/creating-collections.md b/docs/ff-integrations/database/cloud-firestore/creating-collections.md index bafa9e56..1cc97876 100644 --- a/docs/ff-integrations/database/cloud-firestore/creating-collections.md +++ b/docs/ff-integrations/database/cloud-firestore/creating-collections.md @@ -19,7 +19,8 @@ A collection is a group of documents. For example, you could have a 'users*'* co :::info[Getting Started: Things to Know First] - Get to know how to [**structure the Firebase Database**](getting-started.md#structuring-the-database). -- Ensure you've gone through and completed every step in the [**Firebase Setup**](../../firebase/connect-to-firebase-setup.md) +- Ensure you've gone through and completed every step in the +[**Firebase Setup**](../../firebase/connect-to-firebase-setup.md) for your project. ::: diff --git a/docs/ff-integrations/database/cloud-firestore/creating-subcollections.md b/docs/ff-integrations/database/cloud-firestore/creating-subcollections.md index 53eb8076..3d202fbe 100644 --- a/docs/ff-integrations/database/cloud-firestore/creating-subcollections.md +++ b/docs/ff-integrations/database/cloud-firestore/creating-subcollections.md @@ -54,7 +54,9 @@ Building the chat room example comprises the following steps: ### 1. Creating a collection -[Create the collection](/data-and-backend/firebase/firestore-database-cloud-firestore/creating-collections#creating-a-collection) called *chat\_rooms*. This will be used to hold the chat room details. While defining the schema for *chat\_rooms* collection, add the fields to display its name, i.e., *chat\_room\_name.* +[**Create the collection**](creating-collections.md) called *chat\_rooms*. This will be used to hold the chat room +details. +While defining the schema for *chat\_rooms* collection, add the fields to display its name, i.e., *chat\_room\_name.* ![img_23.png](img_23.png) @@ -63,12 +65,15 @@ Building the chat room example comprises the following steps: To create the subcollection: 1. Click on the **Firestore** from the Navigation Menu (left side of your screen). + 5. Click on the **(+)** Plus sign button. 8. A popup will appear; enter the collection name as '*messages.'* 11. **Turn on** the **Is Subcollection** toggle. 14. The dropdown list with existing collections will appear. Click on the **Unset** and select the parent collection, *chat\_rooms* in this case. 17. Click **Create** Button. -20. Next, [define the document schema](/data-and-backend/firebase/firestore-database-cloud-firestore/creating-collections#define-schema-creating-fields). While defining the schema for the 'messages' subcollection, add the fields such as *message* (to store the message body) and *from* (to store the sender name). +20. Next, [define the document schema](creating-collections.md#define-schema-creating-fields). While defining the schema for + the 'messages' + subcollection, add the fields such as *message* (to store the message body) and *from* (to store the sender name).
@@ -92,9 +97,13 @@ The first page shows the chat room listing, and when you tap, it opens the new p The steps to build the chat room page are as follows: -1. Query the *chat\_rooms* collection and display the chat room names in a ListTile (inside -ListView) using the instructions [here](/data-and-backend/firebase/firestore-database-cloud-firestore/retrieving-data#querying-a-collection). -5. Add the **Navigate To** action **on Tap** of the **ListTile** and open the messages page using the instructions [here](/actions/actions/navigation/navigate#navigate-to-action). **Note**: While navigating, pass the chat room record to the next page. Learn how to pass data to the next page [here](/data-and-backend/passing-data#passing-a-record-from-a-listview-to-a-details-page). +1. Query the **chat_rooms** collection and display the chat room names in a ListTile (inside +ListView). + +5. Add the **[Navigate To](../../../ff-concepts/navigation-routing/nav-overview.md#navigation-actions)** action **on + Tap** of the **ListTile** and open the messages page. **Note**: While navigating, pass the + chat room record to the next page. Learn how to +[pass data to the next page](../../../ff-concepts/navigation-routing/passing-data.md). .
@@ -113,8 +122,9 @@ The steps to build the chat room page are as follows: ![img_24.png](img_24.png) -2. On the ListView, [query](/data-and-backend/firebase/firestore-database-cloud-firestore -/retrieving-data#querying-a-collection) a subcollection as you would query any other collection; except for the subcollection, you must provide its parent collection reference (i.e., chat\_rooms reference in this case). This way, you'll only see messages from that specific chat room. +2. On the ListView, query a subcollection as you would query any + other collection; except + for the subcollection, you must provide its parent collection reference (i.e., chat\_rooms reference in this case). This way, you'll only see messages from that specific chat room.
diff --git a/docs/ff-integrations/notifications/push-notifications/getting-started.md b/docs/ff-integrations/notifications/push-notifications/getting-started.md index 2f1619df..2a74e438 100644 --- a/docs/ff-integrations/notifications/push-notifications/getting-started.md +++ b/docs/ff-integrations/notifications/push-notifications/getting-started.md @@ -20,7 +20,8 @@ FlutterFlow uses [**Firebase Cloud Messaging**](https://firebase.google.com/docs Before getting started with this section, ensure you have: -* Completed all steps in the [**Firebase Setup**](/data-and-backend/firebase/firebase-setup). +* Completed all steps in the +[**Firebase Setup**](../../firebase/connect-to-firebase-setup.md). * Upgraded to a [**Blaze plan**](https://firebase.google.com/pricing) for your Firebase project. ::: diff --git a/docs/intro/ff-ui/builder.md b/docs/intro/ff-ui/builder.md index e20a0122..dca818e8 100644 --- a/docs/intro/ff-ui/builder.md +++ b/docs/intro/ff-ui/builder.md @@ -10,11 +10,12 @@ keywords: [App Builder, FlutterFlow, UI, Design] # App Builder -On opening the project, you'll see the App Builder, which consists of four main sections: [Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties panel](#properties-panel). +On opening the project, you'll see the App Builder, which consists of four main sections: +[Navigation Menu](#navigation-menu), [Toolbar](#toolbar), [Canvas](#canvas-area), and [Properties panel](#properties-panel). ![app-builder](imgs/builder.avif) -## Navigation Menu {#navigation-menu} +## Navigation Menu The Navigation Menu, located on the left side of the builder, allows you to switch between various FlutterFlow features. These include designing the UI, managing databases, setting up API, adjusting app settings, adding integrations, and more. @@ -36,14 +37,14 @@ Here is a list of all the features accessible from the navigation menu: 14. **Theme settings**: Customize visual appearance. 15. **Settings and Integrations**: Access app-related settings and integrations. -## ToolBar {#toolbar} +## ToolBar From [ToolBar](toolbar), you can search for project resources, change canvas size, see project history, branching, optimization and enhancements, view-download code, and run your app. -## Canvas Area {#canvas-area} +## Canvas Area In the [Canvas Area](canvas), you can see a preview of a device's screen and build your app page. -## Properties Panel {#properties-panel} +## Properties Panel The Properties Panel lets you modify both the visual appearance and interactive behavior of UI elements on the canvas. It allows you to add [Actions](#), set up a [Backend Query](#), add [Animations](#) and more. \ No newline at end of file diff --git a/docs/intro/ff-ui/canvas.md b/docs/intro/ff-ui/canvas.md index dd1d3a95..641fedb3 100644 --- a/docs/intro/ff-ui/canvas.md +++ b/docs/intro/ff-ui/canvas.md @@ -20,7 +20,8 @@ This is the canvas of the device screen where you can build the user interface. ## Show or hide Navigation Menu -From here, you can open or close the [Navigation Menu](#). +From here, you can open or close the +[Navigation Menu](../../../docs/intro/ff-ui/builder.md#navigation-menu). ## Zoom Controls diff --git a/docs/resources/control-flow/backend-logic/api/_category_.json b/docs/resources/control-flow/backend-logic/api/_category_.json index 772f83b8..aec51ccf 100644 --- a/docs/resources/control-flow/backend-logic/api/_category_.json +++ b/docs/resources/control-flow/backend-logic/api/_category_.json @@ -1,4 +1,4 @@ { - "label": "API Calls", + "label": "APIs", "position": 1 } \ No newline at end of file diff --git a/docs/resources/control-flow/backend-logic/api/api-calls-101.md b/docs/resources/control-flow/backend-logic/api/rest-api.md similarity index 97% rename from docs/resources/control-flow/backend-logic/api/api-calls-101.md rename to docs/resources/control-flow/backend-logic/api/rest-api.md index 2942b93c..5463d2c8 100644 --- a/docs/resources/control-flow/backend-logic/api/api-calls-101.md +++ b/docs/resources/control-flow/backend-logic/api/rest-api.md @@ -1,25 +1,25 @@ --- -slug: /resources/backend-logic/api-calls-101 -title: API Calls 101 +slug: /resources/backend-logic/rest-api +title: REST APIs description: Learn the basics of making API calls in your backend logic. -tags: [API, Backend Logic, Control Flow, FlutterFlow] +tags: [API, Backend Logic, Control Flow] sidebar_position: 1 -keywords: [API, Backend Logic, Control Flow, FlutterFlow] +keywords: [API, Rest API, Backend Logic, Control Flow, FlutterFlow] --- -# API Calls 101 +# API Calls On this page, you will learn the most basic knowledge on various concepts for adding an API call to your project. They are the building blocks of adding an API call. Depending on the API's definition, you may utilize some or all of these concepts to successfully implement the API call in your project. Here are they: -* [Headers](/data-and-backend/api-calls/api-calls-101#headers) -* [Query Parameters](/data-and-backend/api-calls/api-calls-101#query-parameters) -* [Variables](/data-and-backend/api-calls/api-calls-101#variables) -* [Body](/data-and-backend/api-calls/api-calls-101#body) -* [API response (JSON) to/from Data Type](/data-and-backend/api-calls/api-calls-101#api-response-json-to-from-data-type) -* [JSON Path](/data-and-backend/api-calls/api-calls-101#json-path) -* [Advanced Settings](/data-and-backend/api-calls/api-calls-101#advanced-settings) +* [Headers](#headers) +* [Query Parameters](#query-parameters) +* [Variables](#variables) +* [Body](#body) +* [API response (JSON) to/from Data Type](#api-response-json-tofrom-data-type) +* [JSON Path](#json-path) +* [Advanced Settings](#advanced-settings) ## Headers @@ -565,7 +565,7 @@ with a numeric character. However, in cases where you have keys with numeric pre ::: :::info -Learn more about JSONPath and how to define a proper expression from [this page](https://support.smartbear.com/alertsite/docs/monitors/api/endpoint/jsonpath.html). +Learn more about **[JSONPath](https://support.smartbear.com/alertsite/docs/monitors/api/endpoint/jsonpath.html)** and how to define a proper expression. ::: ### Adding JSON Path 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 05bddc88..944d2789 100644 --- a/docs/resources/control-flow/backend-logic/api/streaming-api.md +++ b/docs/resources/control-flow/backend-logic/api/streaming-api.md @@ -1,5 +1,5 @@ --- -slug: /resources/backend-logic/streaming-apis +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] @@ -8,7 +8,7 @@ keywords: [Streaming APIs, Backend Logic, Control Flow, FlutterFlow] --- -# Streaming API Example: AI Review Summary +# Streaming APIs Streaming APIs provide a continuous flow of data over a long-lived HTTP connection, enabling real-time updates for your application. @@ -53,7 +53,7 @@ The primary difference between REST APIs and Streaming APIs lies in their data d data: {"team1": "Red Dragons", "team2": "Silver Sharks", "score": "3-2"} ``` -## Building an App +## Example: AI Review Summary Let's see how you can use streaming APIs in FlutterFlow by building an example that allows users to see an AI summary of product reviews. On page load, the app displays the AI summary in real-time, letting users watch the analysis unfold as it's being generated. @@ -89,18 +89,22 @@ The final app looks like this: The steps to build the app are as follows: -1. [Build UI](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#id-1.-build-ui) -5. [Create API](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#id-2.-create-api) -8. [Create page state variable](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#id-3.-create-page-state-variable) -11. [Trigger and Parse API response](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#id-4.-trigger-and-extract-data-from-api-response) -14. [Extract chart data](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#id-5.-extract-chart-data) +1. [Build UI](#1-build-ui) +5. [Create API](#2-create-api) +8. [Create page state variable](#3-create-page-state-variables) +11. [Trigger and Parse API response](#4-trigger-and-extract-data-from-api-response) +14. [Extract chart data](#5-extract-chart-data) ### 1. Build UI The user interface includes a section for the average rating, and number of reviews, followed by a detailed summary of the reviews including pros, cons, and sentiment distribution visualization. Here are key widgets to build the page: -* [**Text Widget**](/widgets-and-components/widgets/base-elements/text): Displays the AI-generated summary of the reviews and a list of the positive and negative points mentioned in the reviews. +* [**Text Widget**](../../../../resources/ui-building-blocks/widgets/built-in-widgets/text.md): + Displays + the AI-generated summary of the reviews and a list of the positive and negative points mentioned in the reviews. * [**Chart (Bar chart) Widget**](/widgets-and-components/widgets/base-elements/chart/bar-chart): Visual representation of the sentiment distribution (positive, neutral, negative) in a bar chart. + +

![streaming-api-example-demo.png](..%2Fimgs%2Fstreaming-api-example-demo.png) ### 2. Create API @@ -111,6 +115,8 @@ Once created, open the **Advanced Settings** and **enable** the **Process Stream Here's how you do it: +

+
Set Variable menu > Action Parameters > OnMessageInput**. and then use the [**Response Stream Message Options**](/data-and-backend/api-calls/streaming-api-example-ai-review-summary#response-stream-message-options) to extract the data. +Whenever the data is received, you can access the response body via the **OnMessage > Set Variable menu > Action Parameters > OnMessageInput**. and then use the [**Response Stream Message Options**](#response-stream-message-options) to extract the data. For this specific example, we use the *Server Sent Event Stream Data JSON* option and then use this JSON path `$['choices'][0]['delta']['content']` to retrieve the story data. diff --git a/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md b/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md index dcdde79d..9508e8a0 100644 --- a/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md +++ b/docs/resources/control-flow/backend-logic/backend-query/api-call-query.md @@ -43,7 +43,7 @@ You can use the **API Call Query** to trigger an API call automatically as soon :::info[Prerequisites] -Before you add this query, ensure you [create an API call](../api/api-calls-101.md) in your project +Before you add this query, ensure you [create an API call](../api/rest-api) in your project ::: ## Adding API Call query diff --git a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md index 3b5492a2..fc909d8a 100644 --- a/docs/resources/control-flow/backend-logic/backend-query/backend-query.md +++ b/docs/resources/control-flow/backend-logic/backend-query/backend-query.md @@ -15,11 +15,14 @@ keywords: [Backend Query, Backend Logic, Control Flow, FlutterFlow] We offer you the following types of Backend Queries that you can specify on any widget or page. -* [**Query Collection**](/data-and-backend/backend-query/query-collection)**:** This query type is used to fetch a single record or a list of records from a Firestore Collection. -* [**Document from Reference**](/data-and-backend/backend-query/document-from-reference)**:** Used to retrieve the details from a document reference. -* [**API Call**](/data-and-backend/backend-query/api-call-query)**:** Used to initiate an API call. -* [**SQLite Query**](/data-and-backend/backend-query/sqlite-query): Used to execute the SQL statement defined [here](/settings-and-integrations/integrations/sqlite#id-3.-add-sql-queries). -* [**Algolia Search**](/data-and-backend/backend-query/algolia-search-query)**:** Used to trigger an Algolia search on a Firestore Collection. +* [**Query Collection**](query-collection.md)**:** This query type is used to fetch a single record or a list of + records from a Firestore Collection. +* [**Document from Reference**](document-from-reference.md)**:** Used to retrieve the details from a document reference. +* [**API Call Query**](api-call-query.md)**:** Used to initiate an API + call. +* [**SQLite Query**](sqlite-query.md): Used to execute the SQL statement defined [here] + (/settings-and-integrations/integrations/sqlite#id-3.-add-sql-queries). +* [**Algolia Search**](algolia-search-query.md)**:** Used to trigger an Algolia search on a Firestore Collection. ## Difference between Actions & Backend Query @@ -36,7 +39,10 @@ We offer you the following types of Backend Queries that you can specify on any ## Change loading indicator -While the backend query is busy retrieving results, it shows the default *Project Theme Loading Indicator* (which you can change from [*Navigation menu*](/getting-started/ui-builder/navigation-menu) *> Theme Settings > Design System > Loading Indicator*.) However, if you want to replace this with a custom loading indicator in a specific backend query, follow the instructions below: +While the backend query is busy retrieving results, it shows the default *Project Theme Loading +Indicator* (which you can change from +[**Navigation menu**](../../../../../docs/intro/ff-ui/builder.md#navigation-menu) *> Theme +Settings > Design System > Loading Indicator*.) However, if you want to replace this with a custom loading indicator in a specific backend query, follow the instructions below:
``` if (userIsLoggedIn) { @@ -72,16 +73,16 @@ if (userIsLoggedIn) { This example demonstrates multiple conditions. If `userIsLoggedIn` is true, it shows a welcome message. If not, it checks if `userIsGuest` is true and shows a guest message. If neither condition is met, it prompts the user to log in. -// TODO diagram for conditionals + ### Implementing Conditionals In FlutterFlow, you can implement conditional logic in two primary ways: -- **When Setting Properties** +- **[When Setting Properties](functions/conditional-logic.md#setting-widget-properties-with-conditional-logic)** In FlutterFlow, you can set properties of widgets conditionally. For example, you might want to change the color of a button based on a variable's value. You can use conditional expressions to dynamically set these properties during runtime. -- **Conditional Actions** +- **[Conditional Actions](functions/conditional-logic.md#conditional-actions)** You can also perform conditional actions in FlutterFlow, where certain actions are executed only if specified conditions are met. This is useful for implementing logic like @@ -90,7 +91,7 @@ In FlutterFlow, you can implement conditional logic in two primary ways: Example: If the user clicks a button and a form is valid, navigate to the next screen; otherwise, show an error message. :::info -Check out the [**complete guide**](conditional-logic.md) here. Are you looking to learn about implementing conditional UI instead? Check out our **[Responsiveness 101](#)** guide instead. +Check out the [**complete guide**](functions/conditional-logic.md) here. Are you looking to learn about implementing conditional UI instead? Check out our **[Responsiveness 101](#)** guide instead. ::: ## Sequential vs Parallel Logic Flow @@ -107,8 +108,7 @@ previous one to complete before starting. This is useful for tasks that depend o other. This is useful for tasks that can be done simultaneously and do not depend on each other's outcomes. **Example:** Loading data from multiple sources simultaneously to speed up the data fetching process. -![parallel-sequential.png](img%2Fparallel-sequential.png) - +![parallel-sequential.png](functions%2Fimg%2Fparallel-sequential.png) ## Asynchronous Functions Asynchronous functions are operations that do not complete immediately and may finish at a diff --git a/docs/resources/control-flow/functions/_category_.json b/docs/resources/control-flow/functions/_category_.json index eb0737d8..cc14b275 100644 --- a/docs/resources/control-flow/functions/_category_.json +++ b/docs/resources/control-flow/functions/_category_.json @@ -1,4 +1,4 @@ { "label": "Functions", - "position": 1 + "position": 2 } \ No newline at end of file diff --git a/docs/resources/control-flow/functions/action-blocks.md b/docs/resources/control-flow/functions/action-blocks.md index 7253941d..942b4c8f 100644 --- a/docs/resources/control-flow/functions/action-blocks.md +++ b/docs/resources/control-flow/functions/action-blocks.md @@ -1,9 +1,9 @@ --- -slug: /resources/actions/action-blocks +slug: /resources/functions/action-blocks title: Action Blocks description: Learn how to use Action Blocks in your FlutterFlow app to and create reusable actions. -tags: [Action Blocks, Backend Query, Backend Logic, Control Flow, FlutterFlow] -sidebar_position: 7 +tags: [Action Blocks, Backend Query, Backend Logic, Control Flow] +sidebar_position: 3 keywords: [Action Blocks, Backend Query, Backend Logic, Control Flow, FlutterFlow] --- @@ -18,7 +18,8 @@ Action Blocks have different scopes, which determine their availability: ## Action Blocks Structure -When creating an action block, the process of defining the flow is similar to defining Actions. +When creating an Action Block, the process of defining the flow is similar to **[defining +Actions](action-flow-editor.md#adding-an-action-example)**. The main difference is in choosing the scope and defining the input & output values of the Action Block. diff --git a/docs/resources/control-flow/functions/action-flow-editor.md b/docs/resources/control-flow/functions/action-flow-editor.md index 73faeb4f..c809f409 100644 --- a/docs/resources/control-flow/functions/action-flow-editor.md +++ b/docs/resources/control-flow/functions/action-flow-editor.md @@ -1,11 +1,11 @@ --- -slug: /resources/actions/action-flow-editor -title: Action Flow Editor +slug: /resources/functions/action-flow-editor +title: Actions description: Learn how to use the Action Flow Editor in your FlutterFlow app to manage and streamline your backend logic. -tags: [Action Flow Editor, Backend Query, Backend Logic, Control Flow, FlutterFlow] +tags: [Action Flow Editor, Backend Query, Backend Logic, Control Flow, Actions] toc_max_heading_level: 5 -sidebar_position: 3 -keywords: [Action Flow Editor, Backend Query, Backend Logic, Control Flow, FlutterFlow] +sidebar_position: 2 +keywords: [Action Flow Editor, Actions, Backend Query, Backend Logic, Control Flow, FlutterFlow] --- # Actions @@ -231,8 +231,11 @@ reusability and modularity. ![action-block.avif](../../../../static/img/action-block.avif) +:::tip[Deep Dive on Action Blocks] +Learn more about different types of **[Action Blocks](action-blocks.md)** and their scopes. +::: -### Example +## Adding an Action [Example] Here's a quick demo of how you can add an action or multiple sequential actions to a widget: diff --git a/docs/resources/control-flow/functions/conditional-logic.md b/docs/resources/control-flow/functions/conditional-logic.md index fbc7a7e4..14feac2e 100644 --- a/docs/resources/control-flow/functions/conditional-logic.md +++ b/docs/resources/control-flow/functions/conditional-logic.md @@ -42,7 +42,7 @@ This flow lets you combine multiple single conditions using logical AND or OR op ### Conditional Value (If/Then/Else) Conditional Value allows you to set a dynamic variable based on different conditions. For each condition, you can specify a value that will be assigned if the condition is true. A default value can be provided if none of the conditions are met. -Arcade + ## Setting Widget Properties with Conditional Logic diff --git a/docs/resources/control-flow/functions/loops.md b/docs/resources/control-flow/functions/loops.md index 6dd9fc16..2e4a1f44 100644 --- a/docs/resources/control-flow/functions/loops.md +++ b/docs/resources/control-flow/functions/loops.md @@ -1,5 +1,5 @@ --- -slug: /resources/actions/loops +slug: /resources/functions/loops title: Loops description: Learn how to implement loops in your FlutterFlow app to iterate over data and perform repeated actions. tags: [Loops, Backend Query, Backend Logic, Control Flow, FlutterFlow] diff --git a/docs/resources/control-flow/functions/built-in-functions.md b/docs/resources/control-flow/functions/utility-functions.md similarity index 97% rename from docs/resources/control-flow/functions/built-in-functions.md rename to docs/resources/control-flow/functions/utility-functions.md index a6324d82..2265e3df 100644 --- a/docs/resources/control-flow/functions/built-in-functions.md +++ b/docs/resources/control-flow/functions/utility-functions.md @@ -1,9 +1,9 @@ --- slug: /resources/functions/utility -title: Built-in Functions -description: Learn about the built-in functions available in FlutterFlow to enhance your app's backend logic. +title: Utility Functions +description: Learn about the built-in utility functions available in FlutterFlow to enhance your app's UI logic. tags: [Functions] -sidebar_position: 2 +sidebar_position: 1 keywords: [Built-in Functions, Backend Query, Backend Logic, Control Flow, FlutterFlow] --- @@ -52,7 +52,7 @@ to a widget that only accepts `String` data types. Here is a quick demo: -// TODO Arcade + :::warning[Combine Text vs RichText widget] The **Combine Text** built-in function only allows you to combine multiple values (dynamic or diff --git a/docs/resources/control-flow/functions/overview.md b/docs/resources/control-flow/overview.md similarity index 65% rename from docs/resources/control-flow/functions/overview.md rename to docs/resources/control-flow/overview.md index 8044c4bc..6efc4552 100644 --- a/docs/resources/control-flow/functions/overview.md +++ b/docs/resources/control-flow/overview.md @@ -1,7 +1,8 @@ --- -slug: overview +slug: /resources/control-flow-overview title: Overview -tags: [ ] +tags: [Control Flow] +keywords: [control flow, programming, logic, app development, user inputs, event handling, software engineering, coding, programming constructs, software logic] toc_max_heading_level: 5 sidebar_position: 1 --- @@ -12,20 +13,21 @@ Control flow in programming refers to the order in which individual statements, function calls are executed or evaluated. Proper control flow is crucial for determining how your app responds to user inputs and events. Here are some key elements: -* **Conditional Statements:** - These include `if`, `else if`, and `else` statements that allow your app to make decisions based on +* **[Conditional Flows:](concepts.md)** + These include `if`, `else if`, and `else` flows that allow your app to make decisions + based on certain conditions. For example, you might check if a user is logged in and then show different content based on their authentication status. -* **Loops:** - Loops such as `for` and `while` allow your app to repeat a sequence of logic multiple times. +* **[Loops:](functions/loops.md)** + Loops allow your app to repeat a sequence of logic multiple times. This is useful for tasks like iterating through a list of items or retrying a failed operation. -* **Event Handling:** +* **[Event Handling:](functions/action-flow-editor.md#action-triggers)** In certain cases, you will execute functions that are triggered by specific events such as user - interactions (e.g., taps, swipes) or system events (e.g., page load, API response). + interactions (e.g., taps, swipes) or system events (e.g., page load, on focus change). Understanding how to handle such events effectively ensures that your app reacts appropriately to - user interactions. + user interactions or events. **Logic** or **Functions** refer to the core operations and behaviors that determine how an app responds to user actions and interacts with data. This could include: @@ -37,7 +39,7 @@ world. For example, in an e-commerce app, it handles tasks like processing order tasks like validating forms, navigating between screens, and updating content based on user actions. * **Data Logic:** This manages the app's data. It includes tasks like fetching, storing, updating, -and deleting data from databases. +and deleting data from databases or via APIs. @@ -59,12 +61,17 @@ response to specific events, such as a button click or a page load. There are different types of functions you can use in your app. Some examples in FlutterFlow are: -* **[Built-in Utility Functions](built-in-functions.md):** Functions that perform general utility +* **[Built-in Utility Functions](functions/utility-functions.md):** Functions that perform general utility tasks, such as formatting -data or performing calculations. In FlutterFlow, you can use [Code Expression](#) for simple data manipulation tasks or use the Combine Text built-in function to concatenate strings. - -* **[Actions](actions):** Sequence of Logic performed in response to user interactions: +data or performing calculations. In FlutterFlow, you can use +[**Code Expression**](functions/utility-functions.md#code-expressions) for simple data + manipulation tasks or use the + **[Combine Text](functions/utility-functions.md#combine-text)** built-in + function to concatenate strings. + +* **[Actions](functions/action-flow-editor.md):** Sequence of Logic performed in response to + user interactions. For example: * **Updating State Variables:** Functions that modify the current state or data of the app, page, or component. @@ -76,15 +83,20 @@ data or performing calculations. In FlutterFlow, you can use [Code Expression](# * **Custom Actions:** More complex actions written in **Flutter & Dart** that can be added as a node to the action flow editor. -* **Navigation:** Functions that handle the movement between different pages or screens within +* **[Navigation:](../../ff-concepts/navigation-routing/nav-overview.md)** Functions that handle + the movement between different pages or screens within your app, including opening bottom sheets or dialogs. In FlutterFlow, such functions can either run automatically after certain related operations, such as Login/Create Account, or they can be added as individual **Actions** if the developer enables it. -* **Backend Queries:** Functions that interact with your database or external services to +* **[Backend Queries:](backend-logic/backend-query/backend-query.md)** Functions that interact with your + database or external + services to retrieve or manipulate data. -* **Custom Functions:** Complex manipulation code written in **Dart**, used to set properties of a +* **[Custom Functions:](../../ff-concepts/adding-customization/custom-functions.md)** Complex + manipulation code written in **Dart**, used to set + properties of a widget or an action. diff --git a/docs/resources/ui-building-blocks/components/overview.md b/docs/resources/ui-building-blocks/components/overview.md index 733dd283..850505bb 100644 --- a/docs/resources/ui-building-blocks/components/overview.md +++ b/docs/resources/ui-building-blocks/components/overview.md @@ -88,5 +88,8 @@ some common use-cases. or feature highlights, and reuse them to maintain a cohesive layout. Here's an example of all the widely used components used in the EcommerceFlow demo app. -// TODO Image will be added once all components are built in project + + + + diff --git a/docs/resources/ui-building-blocks/components/user-defined-components/using-components.md b/docs/resources/ui-building-blocks/components/user-defined-components/using-components.md index d38b3f01..6e776daf 100644 --- a/docs/resources/ui-building-blocks/components/user-defined-components/using-components.md +++ b/docs/resources/ui-building-blocks/components/user-defined-components/using-components.md @@ -28,8 +28,7 @@ defined by the parent, such as navigation, data updates, or displaying dialogs. simply by passing different callbacks. ::: -TODO Add diagram - + ### Execute Callback [Action] Using this action, you can execute any action passed as a parameter to the component. This is @@ -174,6 +173,7 @@ can adapt to different data and behavior.
-## Add Components to Components +## Recursive Components + + -//TODO Will add in a new PR when new feature gets deployed. \ No newline at end of file diff --git a/docs/resources/ui-building-blocks/pages/page-elements.md b/docs/resources/ui-building-blocks/pages/page-elements.md index 7e8e1713..3e3590b7 100644 --- a/docs/resources/ui-building-blocks/pages/page-elements.md +++ b/docs/resources/ui-building-blocks/pages/page-elements.md @@ -154,7 +154,9 @@ From the NavBar settings page, you can add the NavBar and make modifications such as changing the display style, reordering icons, customizing its appearance, and more. -// TODO Image from demo app + + + ### Enable Nav Bar in settings diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md b/docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md index ae4df9cd..c1145d7f 100644 --- a/docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md +++ b/docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md @@ -71,4 +71,4 @@ By default, FlutterFlow handles the toggling of the State variable from true to In this example, we trigger the SnackBar action that displays the value of the State variable. -//TODO show the app demo \ No newline at end of file + diff --git a/docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md b/docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md index 6a840b65..de98d592 100644 --- a/docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md +++ b/docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md @@ -39,7 +39,9 @@ Axis sets the orientation of the ListView. You can select either "Vertical" or - **Primary:** If set to true, the ListView will act as the primary scrolling view in the context. This usually affects how the view interacts with other scrolling views and whether it stretches to fill the viewport. -TODO: Video comparison + + + - **Reverse:** This property, when enabled, reverses the order in which items appear in the ListView. For a vertical list, this means starting from the bottom and for a horizontal list, starting from the right. diff --git a/docs/resources/ui-building-blocks/widgets/composing-widgets.md b/docs/resources/ui-building-blocks/widgets/composing-widgets.md index 18c81972..75496da4 100644 --- a/docs/resources/ui-building-blocks/widgets/composing-widgets.md +++ b/docs/resources/ui-building-blocks/widgets/composing-widgets.md @@ -39,8 +39,10 @@ depends on how you need to arrange your UI components: #### Choosing your parent widget -//TODO link to quickstart for how to choose parent widget [Rows/Column/Stacks] -with examples + + + ## Common Property: Alignment diff --git a/docs/testing-deployment-publishing/branching-collaboration/branching.md b/docs/testing-deployment-publishing/branching-collaboration/branching.md index ea5bb191..587f4ae2 100644 --- a/docs/testing-deployment-publishing/branching-collaboration/branching.md +++ b/docs/testing-deployment-publishing/branching-collaboration/branching.md @@ -13,15 +13,15 @@ Branching creates a separate copy of your work, so you can add new features with Suppose you have an eCommerce app and you want to add a new feature, such as a product recommendation system. Instead of incorporating it directly into your main app and potentially causing problems, you create a branch to work on this new feature. Once it's completed, you can integrate it back into the main app. :::info - This feature is only available for teams and enterprise users. - ::: :::warning -Creating a branch here doesn't create one on GitHub. Branches stay and are managed solely within FlutterFlow. If you are looking to manage custom code in GitHub, check out the tutorial [**here**](../exporting-code/push-to-github#manage-custom-code-in-github). +Creating a branch here doesn't create one on GitHub. Branches stay and are managed solely within +FlutterFlow. You can also learn more about +[**managing custom code on GitHub**](../exporting-code/push-to-github.md#manage-custom-code-on-github). ::: ## Create and merge branch diff --git a/docs/testing-deployment-publishing/exporting-code/push-to-github.md b/docs/testing-deployment-publishing/exporting-code/push-to-github.md index cbbb1017..33e154a9 100644 --- a/docs/testing-deployment-publishing/exporting-code/push-to-github.md +++ b/docs/testing-deployment-publishing/exporting-code/push-to-github.md @@ -109,7 +109,7 @@ Here’s how you do it: - If you need to modify the code, make changes in a separate branch. Learn more about managing custom code. ::: -## Manage Custom Code In GitHub +## Manage Custom Code on GitHub Writing custom code allows you to add features that are not supported by FlutterFlow's current functionality. This section outlines how you can manage custom code using GitHub to prevent FlutterFlow from overriding it.