diff --git a/docs/ff-concepts/adding-customization/cloud-functions.md b/docs/ff-concepts/adding-customization/cloud-functions.md index f7c923f1..d41a7886 100644 --- a/docs/ff-concepts/adding-customization/cloud-functions.md +++ b/docs/ff-concepts/adding-customization/cloud-functions.md @@ -59,9 +59,9 @@ loading indicator during the logo creation process. Its value is set to *True* b ### 2. Build a page -Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the [template](/getting-started/adding-new-page#add-page) or use [AI Page Gen](/getting-started/adding-new-page#ai-gen-page). Here is the page added using AI Page Gen, and after some modification, it looks the below: +Let's add a page that allows users to enter the prompt. To speed up, you can add a page from the template or use [AI Page Gen](../../resources/ui/pages/pages.md#create-an-ai-generated-page). Here is the page added using AI Page Gen, and after some modification, it looks the below: -Also, see how to [build a page layout](/widgets-and-components/ui-and-layout-101) if you want to build a page from scratch. +Also, see how to [build a page layout](../../ff-concepts/layout/building-layout.md) if you want to build a page from scratch. ![img_7.png](imgs/img_7.png) diff --git a/docs/ff-concepts/animations/animations.md b/docs/ff-concepts/animations/animations.md index 352b0d85..ecbade22 100644 --- a/docs/ff-concepts/animations/animations.md +++ b/docs/ff-concepts/animations/animations.md @@ -13,7 +13,7 @@ Enhancing your app with animations significantly improves the user experience, m - [**Implicit Animations**](implicit_animations.md): Animate changes in specific widget properties, such as the height of a Container. - [**Hero Animations**](hero_animations.md): Animate a widget that transitions smoothly between screens, also known as shared element transitions. - [**Page Transition Animations**](page_transitions.md): Specify transitions between pages within your app. -- **Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation) and [Rive](import-animations/rive-animation). +- **Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation.md) and [Rive](import-animations/rive-animation.md). To learn more about animations in FlutterFlow, check out this video: diff --git a/docs/ff-concepts/animations/page_transitions.md b/docs/ff-concepts/animations/page_transitions.md index 2331edc3..9994751e 100644 --- a/docs/ff-concepts/animations/page_transitions.md +++ b/docs/ff-concepts/animations/page_transitions.md @@ -27,7 +27,7 @@ Here, the transitions are recorded with the duration set to 1000ms to make the a ## Animate single navigate transition -To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../resources/ui/pages/navigation#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field. +To set a transition animation for a single navigate action, first, ensure that you have added a [**Navigate To**](../../ff-concepts/navigation-routing/page-navigation.md#navigate-to-action) action and then select an animation from the **Transition Type** dropdown. By default, the animations use 300 milliseconds as the duration for which it plays but you can change it by specifying a value inside the **Duration** (ms) field. ![single-navigate-transition-animation.avif](animation_gifs/single-navigate-transition-animation.avif) diff --git a/docs/ff-concepts/animations/widget_animations.md b/docs/ff-concepts/animations/widget_animations.md index 345f0a96..30a4c76f 100644 --- a/docs/ff-concepts/animations/widget_animations.md +++ b/docs/ff-concepts/animations/widget_animations.md @@ -208,7 +208,7 @@ If you notice carefully, the items appear in a staggered fashion. This can be ac Select the item in the list and add the Slide animation. -In the Delay property, open the variable menu and add a [code expression](#) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect. +In the Delay property, open the variable menu and add a [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
Design System**. 2. Click **Create Design Library**. 3. Enter the **Design Library Project Name**. -4. Now you can configure the [Colors](#), [Typography & Icons](#), [App Assets](#), [NavBar & AppBar](#), and [Theme Settings](#). +4. Now you can configure the Colors, Typography & Icons, App Assets, NavBar & AppBar, and Theme Settings. 5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side).
How do I create a new design system if I don't see a button for it? -

Currently, creating a design system requires you to have a team set up, even if you're working solo. You can quickly create a team by following the instructions outlined [here](#). We are working on a solution that will allow for the creation of design systems without needing a team setup. Stay tuned for updates!

+

Currently, creating a design system requires you to have a team set up, even if you're working solo. You can quickly create a team by following the instructions outlined [here](../../accounts-billing/subscriptions/flutterflow-for-teams.md). We are working on a solution that will allow for the creation of design systems without needing a team setup. Stay tuned for updates!

\ No newline at end of file diff --git a/docs/ff-concepts/layout/building-layout.md b/docs/ff-concepts/layout/building-layout.md index 20eb5c45..ae90fb86 100644 --- a/docs/ff-concepts/layout/building-layout.md +++ b/docs/ff-concepts/layout/building-layout.md @@ -9,7 +9,7 @@ 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](../../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. +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](../../resources/ui/widgets/built-in-widgets/image.md), 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](/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. diff --git a/docs/ff-concepts/layout/responsive-widgets/wrap-widget.md b/docs/ff-concepts/layout/responsive-widgets/wrap-widget.md index d3bd5101..33ad6b6a 100644 --- a/docs/ff-concepts/layout/responsive-widgets/wrap-widget.md +++ b/docs/ff-concepts/layout/responsive-widgets/wrap-widget.md @@ -9,13 +9,13 @@ keywords: [FlutterFlow, Wrap, Concepts] # Wrap -The Wrap widget is similar to [Row](#) and [Column](#) as it shows its children one after another. If there is not enough space to show your item, the Wrap widget will automatically place it in a new row or column. +The Wrap widget is similar to Row and Column as it shows its children one after another. If there is not enough space to show your item, the Wrap widget will automatically place it in a new row or column. ## Adding Wrap widget Here's an example of how you can use a Wrap widget in your project: -1. First, drag the [**Container**](#) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**. +1. First, drag the [**Container**](../../../resources/ui/widgets/built-in-widgets/container.md) widget from the **Layout Elements** tab (in the Widget Panel) or add it directly from the widget tree and set its **width** to **infinity** and **height** to **200**. 2. Add the **Wrap** widget from the **Layout Elements** tab inside the Container. 3. Add the **Button** widget inside the Wrap widget. diff --git a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md index 454a6d90..c1db8868 100644 --- a/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md +++ b/docs/ff-concepts/navigation-routing/deep-dynamic-linking.md @@ -180,7 +180,7 @@ respective store to install the app. After the app is installed, users can be ta intended app page. For the dynamic link to work, you need to enable -the [deep link](/advanced-functionality/deep-and-dynamic-linking#deep-link). You can think of a +the [deep link](#adding-deep-link). You can think of a dynamic link as the additional benefit of the deep link. :::note diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md b/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md index dcfa0234..ef9b94d5 100644 --- a/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/overview.md @@ -11,5 +11,5 @@ keywords: [Special Page Navigations, FlutterFlow, Navigation] FlutterFlow provides special navigation widgets like Tab Bar, NavBar, and PageView for advanced navigation scenarios: - **Tab Bar**: Used for navigating between different sections of your app with tabs, ideal for organizing content into categories. Learn more [here](tabbar). -- **NavBar**: A bottom navigation bar that helps users switch between major sections of your app seamlessly. Learn more [here](#). -- **PageView**: Allows for swipeable pages, perfect for creating onboarding screens or multi-step forms. Learn more [here](#). \ No newline at end of file +- **NavBar**: A bottom navigation bar that helps users switch between major sections of your app seamlessly. Learn more [here](../../../resources/ui/pages/page-elements.md#nav-bar). +- **PageView**: Allows for swipeable pages, perfect for creating onboarding screens or multi-step forms. Learn more [here](../../navigation-routing/special-page-navigation/pageview-widget.md). \ No newline at end of file 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 6441bd54..4e0d4b54 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 @@ -22,7 +22,7 @@ To add the PageView widget to your app: 2. By default, it adds three pages and shows the first one in the canvas. In the widget tree, it is represented as **PageView Page**. To see another page in the canvas, move to the **Properties Panel >** set the **Active Page** to the page you want to see. 3. To add a new page, move to the **Properties Panel > Active Page >** click **+ Add Page**. 4. To delete any page, select the **PageView Page** (which you want to delete) from the widget tree or the canvas area and press the **Delete** key on the keyboard. -5. By default, PageView Page contains an [Image](#) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the [Stack](#) widget and then add some more widgets. +5. By default, PageView Page contains an [Image](../../../resources/ui/widgets/built-in-widgets/image.md) widget; however, you can customize it as per your requirement. For example, if you want to use the PageView widget to create an onboarding experience, you could wrap (`⌘` + B) the default image widget inside the Stack widget and then add some more widgets.
+ +
+

+ Here's an example of scrolling PageView on button press: 1. First, [add the PageView](#adding-pageview-widget) widget. 2. [Customize the PageView](#customizing) widget and add buttons to go to the previous and next pages. -3. Now select any button and define the [Control Page View action](#). +3. Now select any button and define the [Control Page View action](#control-page-view-action). ---- + +## Control Page View [Action] + +By using this action, you can gain more control over the scrolling behavior of the PageView widget. For instance, you can enable your users to move to the next or previous page with a single tap of a button or to quickly jump to a specific page index based on their preferences. + + +### Types of page view action + +These are the types of actions you can add to the pageview. + +- **Previous**: Scroll to the previous page in the pageview. +- **Next**: Scroll to the next page in the pageview. +- **First**: Scroll to the first page in the pageview. +- **Last**: Scroll to the last page in the pageview. +- **Jump to**: Scroll to a specific page in the pageview. Please note that the page index starts from 0. So, if you want to jump to page 1, you should enter 0. If you want to jump to page 2, you should enter 1, and so on. + +### Adding Control Page View action + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action. +2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search and select the **Control Page View** (under *Widget/UI Interactions*) action. +4. Set the **Page View to Control** to the **name** of the page view added to your page. +5. Select the [**Page View Action Type**](#types-of-page-view-action). + +
+ +
+

## Video guide diff --git a/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md b/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md index 33194532..24e13b22 100644 --- a/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md +++ b/docs/ff-concepts/navigation-routing/special-page-navigation/tabbar-widget.md @@ -19,12 +19,12 @@ It can be used in various types of apps, such as news apps with different catego To add the TabBar widget to your app: -1. [Add](#) the **TabBar** widget from the **Layout Elements** tab. -2. By default, it adds three tabs to the page and shows the first one in the canvas. In the [widget tree](#), it is represented as **Tab** and **TabBar Page**. To see another tab in the canvas, select the **TabBar** widget, move to the **Properties Panel,** and ****set the **Active Tab** to the one you want to see. +1. Add the **TabBar** widget from the **Layout Elements** tab. +2. By default, it adds three tabs to the page and shows the first one in the canvas. In the widget tree, it is represented as **Tab** and **TabBar Page**. To see another tab in the canvas, select the **TabBar** widget, move to the **Properties Panel,** and ****set the **Active Tab** to the one you want to see. 3. To customize the Tab: 1. Select the **Tab >** Move to **Properties Panel**. 2. Use the **Text** property to change the label of the Tab. - 3. You can also [add **Icon**](#), align it horizontally, and set its margin. **Tip**: To only display Icon, remove the Text value. + 3. You can also [add Icon](../../../resources/ui/widgets/built-in-widgets/icons.md), align it horizontally, and set its margin. **Tip**: To only display Icon, remove the Text value. 4. Inside the **TabBar Page**, you can replace the existing **Text** widget with any widget of your choice. 5. To add a new tab, move to the **Properties Panel > Active Page >** click **+ Add Page**. @@ -60,7 +60,7 @@ To add the TabBar widget to your app: ## Change tab in response to widget action -If you want to change the tab selection in response to a widget action, such as a button click, you can do so by adding the [Control Tab Bar](#) action. +If you want to change the tab selection in response to a widget action, such as a button click, you can do so by adding the [Control Tab Bar](#control-tab-bar-action) action. ## Customizing @@ -71,9 +71,9 @@ You can customize the appearance and behavior of this widget using the various p To customize the tab label: 1. Select the **TabBar** widget > move to the **Properties Panel > Label Properties**. -2. To [set different colors](#) when the tab is selected and unselected, use the **Selected Color** and **Unselected Color** properties. +2. To set different colors when the tab is selected and unselected, use the **Selected Color** and **Unselected Color** properties. 3. To add some space around the label, use the **Label Padding** property. -4. Use the **Label Style** property to change its [styling](#). You can also set the label styling for the unselected tab text by enabling the **Custom Unselected Label Style**. +4. Use the **Label Style** property to change its [styling](../../../resources/ui/widgets/built-in-widgets/text.md#common-text-styling-properties). You can also set the label styling for the unselected tab text by enabling the **Custom Unselected Label Style**.
Properties Panel >
---- +## Control Tab Bar [Action] + +By using this action, you can gain more control over the tab-switching behavior of the TabBar widget. For instance, you can enable users to move to the next or previous tab with a single tap of a button or to quickly jump to a specific tab based on their preferences. + +
+ +
+

+ +### Types of action + +These are the types of actions you can add to the TabBar. + +- **Previous**: Switch to the previous tab in the TabBar. +- **Next**: Switch to the next tab in the TabBar. +- **First**: Switch to the first tab in the TabBar. +- **Last**: Switch to the last tab in the TabBar. +- **Jump to**: Switch to a specific tab in the TabBar. Please **note** that the tab index starts from 0. So, if you want to jump to tab 1, you should enter 0. If you want to jump to tab 2, you should enter 1, and so on. + +### Adding Control Tab Bar action + +Follow the steps below to add this action to any widget. + +1. Select the **Widget** (e.g., Container, Button, etc.) on which you want to add the action. +2. Select **Actions** from the properties panel (the right menu), If it's the first action, click **+ Add Action** button. Otherwise, click the "**+**" button below the previous action tile (inside *Action Flow Editor*) and select **Add Action**. +3. Search and select the **Control Tab Bar** (under *Widget/UI Interactions*) action. +4. Set the **Tab Bar to Control** to the **name** of the tab bar added to your page. +5. Select the [action type](#types-of-action). + +
+ +
+

+ ## Video guide diff --git a/docs/ff-integrations/authentication/authentication-types.md b/docs/ff-integrations/authentication/authentication-types.md index 6fcb3f3f..74158cb6 100644 --- a/docs/ff-integrations/authentication/authentication-types.md +++ b/docs/ff-integrations/authentication/authentication-types.md @@ -19,8 +19,8 @@ standards like OAuth 2.0 and OpenID Connect. This makes it highly adaptable for backend, ensuring a secure and scalable solution. :::info -Learn how to enable Firebase Authentication and integrate popular auth providers in your FlutterFlow -app. [**Learn more here**](#) +Learn how to enable [**Firebase Authentication**](../authentication/firebase-auth/auth-initial-setup.md) and integrate popular auth providers in your FlutterFlow +app. ::: ## Supabase Authentication @@ -31,8 +31,8 @@ Supabase provides a powerful and flexible authentication solution, similar to Fi unique advantages like support for PostgreSQL. :::info -Discover how to set up Supabase Authentication and link it with available auth providers within your -FlutterFlow app. [**Learn more here**](#) +Discover how to set up [**Supabase Authentication**](../authentication/supabase-auth/initial-setup.md) and link it with available auth providers within your +FlutterFlow app. ::: ## Custom Authentication @@ -44,6 +44,6 @@ application. Whether you need to work with legacy systems or have specific secur custom authentication provides the necessary control. :::info -Explore how to implement custom authentication strategies in your FlutterFlow app, ensuring your -authentication flow aligns with your business requirements. [**Learn more here**](#) +Explore how to implement [custom authentication](../authentication/custom-auth/custom-auth.md) strategies in your FlutterFlow app, ensuring your +authentication flow aligns with your business requirements. ::: diff --git a/docs/ff-integrations/authentication/custom-auth/custom-auth.md b/docs/ff-integrations/authentication/custom-auth/custom-auth.md index 2c923df0..d56a8d51 100644 --- a/docs/ff-integrations/authentication/custom-auth/custom-auth.md +++ b/docs/ff-integrations/authentication/custom-auth/custom-auth.md @@ -98,13 +98,13 @@ To enable custom authentication in FlutterFlow: Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the template. Here is the page added from the templates, and after some modification, it looks the below: -Also, see how to [build a page layout](#) in case you want to build a page from scratch. +Also, see how to [build a page layout](../../../ff-concepts/layout/building-layout.md) in case you want to build a page from scratch. ![auth-2-template.avif](../imgs/auth-2-template.avif) ### 3. Authenticate users -On each page, on click of a button, you can add appropriate authentication related [API calls](#). For this example, we use [this](https://dummyjson.com/docs/auth). +On each page, on click of a button, you can add appropriate authentication related [API calls](../../../resources/control-flow/backend-logic/api/rest-api.md). For this example, we use [this](https://dummyjson.com/docs/auth).
Custom Authentication*) action. 2. Under the **User Auth Properties**, you can set values for **Authentication Token**, **Refresh Token**, **Token Expiry Time**, and **User UID**. **Note that for the 'Persist Auth Sessions' option to work, you must set the Authentication Token**. -3. **Set User Data** to store the result of the previous API call (i.e., auth details) in a Custom Data Type. See how to get the [JSON into Data Type](#). +3. **Set User Data** to store the result of the previous API call (i.e., auth details) in a Custom Data Type. See how to get the [JSON into Data Type](../../../resources/control-flow/backend-logic/api/rest-api.md#json-to-data-type).
Your project > Release Setup > App Signing** and copy the **SHA-1** and **SHA-256** keys. + +![release-sha1-key](../imgs/release-sha1-key.avif) + ### Regenerate config files After adding the SHA-1 key you must re-generate the config files in FlutterFlow. @@ -183,3 +191,4 @@ To regenerate the config files: ![regerenate](../imgs/regerenate.png) + diff --git a/docs/ff-integrations/authentication/firebase-auth/email-sign-in.md b/docs/ff-integrations/authentication/firebase-auth/email-sign-in.md index 506e373b..f5373d01 100644 --- a/docs/ff-integrations/authentication/firebase-auth/email-sign-in.md +++ b/docs/ff-integrations/authentication/firebase-auth/email-sign-in.md @@ -14,7 +14,7 @@ keywords: [FlutterFlow, Email Login, Authentication, Firebase] Before getting started with this section: - Complete [**Firebase Setup**](../../firebase/connect-to-firebase-setup.md) -- Complete [**Initial Setup**](auth-initial-setup) +- Complete [**Initial Setup**](auth-initial-setup.md) ::: ## Enable Email Login Provider in Firebase @@ -81,7 +81,7 @@ To enable this in FlutterFlow, follow these steps: :::info To understand why email verification is required when authenticating with an email and password, refer -to [**Authentication Methods**](../authentication-methods) +to [**Authentication Methods**](../authentication-methods.md) ::: 1. Add a new action immediately after the **Create Account** action. diff --git a/docs/ff-integrations/authentication/firebase-auth/facebook-login.md b/docs/ff-integrations/authentication/firebase-auth/facebook-login.md index 68ccb333..c1302d10 100644 --- a/docs/ff-integrations/authentication/firebase-auth/facebook-login.md +++ b/docs/ff-integrations/authentication/firebase-auth/facebook-login.md @@ -20,7 +20,7 @@ Facebook login allows users to authenticate using their Facebook Accounts. Before getting started with this section: - Complete [**Firebase Setup**](../../firebase/connect-to-firebase-setup.md) -- Complete [**Initial Setup**](auth-initial-setup) +- Complete [**Initial Setup**](auth-initial-setup.md) ::: ## Adding Facebook sign-in diff --git a/docs/ff-integrations/authentication/firebase-auth/google-login.md b/docs/ff-integrations/authentication/firebase-auth/google-login.md index 6d3be55e..308f5ee7 100644 --- a/docs/ff-integrations/authentication/firebase-auth/google-login.md +++ b/docs/ff-integrations/authentication/firebase-auth/google-login.md @@ -16,7 +16,7 @@ Google Sign-In allows users to authenticate using their Google Accounts. Before getting started with this section: - Complete [**Firebase Setup**](../../firebase/connect-to-firebase-setup.md) -- Complete [**Initial Setup**](auth-initial-setup) +- Complete [**Initial Setup**](auth-initial-setup.md) - Added **SHA-1 key** and regenerated **Config Keys**. ::: diff --git a/docs/ff-integrations/authentication/firebase-auth/jwt-token-login.md b/docs/ff-integrations/authentication/firebase-auth/jwt-token-login.md index 17483ad0..d85a5e52 100644 --- a/docs/ff-integrations/authentication/firebase-auth/jwt-token-login.md +++ b/docs/ff-integrations/authentication/firebase-auth/jwt-token-login.md @@ -30,7 +30,7 @@ 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**](../../firebase/connect-to-firebase-setup.md). -- Complete [**Initial setup**](auth-initial-setup) required for authentication. +- Complete [**Initial setup**](auth-initial-setup.md) required for authentication. ::: @@ -44,12 +44,12 @@ Adding JWT token authentication comprises the following steps: ### 1. Add login API -You must [create an API](#) endpoint on your server that accepts email/username and password. If the credentials are valid, it generates the JWT token and passes it back in response. +You must [create an API](../../../resources/control-flow/backend-logic/api/create-test-api-calls.md) endpoint on your server that accepts email/username and password. If the credentials are valid, it generates the JWT token and passes it back in response. At your server, you can generate the JWT token either using the [Firebase Admin SDK](https://firebase.google.com/docs/auth/admin/create-custom-tokens#create_custom_tokens_using_the_firebase_admin_sdk) or a [third-party JWT library](https://firebase.google.com/docs/auth/admin/create-custom-tokens#create_custom_tokens_using_a_third-party_jwt_library). You can find the detailed instructions [here](https://firebase.google.com/docs/auth/admin/create-custom-tokens). :::info -Alternatively, you can integrate Supabase authentication into your app and use the JWT token generated after [**account creation**](#). +Alternatively, you can integrate Supabase authentication into your app and use the JWT token generated after [**account creation**](../supabase-auth/auth-actions.md#log-in-action). ::: The API endpoint should be similar to the following (Tip: Expand and see the '200 OK' section): @@ -87,12 +87,12 @@ In most cases, you would make the app content available right after creating a n ::: :::info -If you want to try the JWT token authentication without creating an API endpoint right now, you can [**generate the JWT token locally**](#) for testing. +If you want to try the JWT token authentication without creating an API endpoint right now, you can [**generate the JWT token locally**](#create-a-jwt-token-locally) for testing. ::: ### 2. Adding login page -Let's [add a sign-in page from the templates](#) and choose the **Authenticate Solo Alt** from under the **Auth** tab. Tip: After adding, remove the other social sign-in buttons. +Let's add a sign-in page from the templates and choose the **Authenticate Solo Alt** from under the **Auth** tab. Tip: After adding, remove the other social sign-in buttons. ![login-page.avif](../imgs/login-page.avif) @@ -105,7 +105,7 @@ Here are the step by step instructions: 1. Select the **Widget** (e.g., Sign In) on which you want to define the action. 2. Select **Actions** from the Properties Panel (the right menu), and click **Open**. This will open an **Action Flow Editor** in a new popup window. -3. [Add the login api](#) and provide the **Action Output Variable Name**. ****If the call succeeds, this will be used to retrieve the token. +3. Add the login api and provide the **Action Output Variable Name**. If the call succeeds, this will be used to retrieve the token. 4. Inside the **TRUE** section, click on the **+** button and select **Add Action**. 5. On the right side, search and select the **Log in** (under Firebase Authentication) action. 6. Set the **Auth Provider** to **JWT token**. @@ -113,8 +113,8 @@ Here are the step by step instructions: 1. Click on the **UNSET** and select the **Action Outputs -> Action Output Variable Name** (that you specified in the API call section.) 2. Set the **API Response Options** to **JSON Body** and **Available Options** to **JSON Path**. 3. Enter the **JSON Path** to locate the token in API response, such as `$.token,` and click **Confirm**. -8. (Optional) add the [snackbar action](#) to display the success message. -9. (Optional) Inside the **False** section, add the [snackbar action](#) to display the failure message. +8. (Optional) add the [snackbar action](../../../resources/ui/pages/page-elements.md#show-snackbar-action) to display the success message. +9. (Optional) Inside the **False** section, add the snackbar action to display the failure message.
Getting this error: "The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth Section."

-1. First, ensure you have clicked the "Save" button while [Enabling phone authentication in Firebase](#). +1. First, ensure you have clicked the "Save" button while [Enabling phone authentication in Firebase](#2-enabling-phone-authentication-in-firebase). ![Enabling phone authentication in Firebase](../imgs/adding-authorized-domain.png) diff --git a/docs/ff-integrations/authentication/imgs/release-sha1-key.avif b/docs/ff-integrations/authentication/imgs/release-sha1-key.avif new file mode 100644 index 00000000..0cd6a29d Binary files /dev/null and b/docs/ff-integrations/authentication/imgs/release-sha1-key.avif differ diff --git a/docs/ff-integrations/authentication/supabase-auth/email-supabase.md b/docs/ff-integrations/authentication/supabase-auth/email-supabase.md index ef863ab6..40df9fb2 100644 --- a/docs/ff-integrations/authentication/supabase-auth/email-supabase.md +++ b/docs/ff-integrations/authentication/supabase-auth/email-supabase.md @@ -14,8 +14,8 @@ Supabase email authentication is a secure and easy way to allow users to sign up :::info[Prerequisites] Before getting started with this section, ensure you have, -1. Completed all steps in the [Supabase setup](../../supabase/supabase-setup.md) -2. Completed [Initial setup](initial-setup.md) +1. Completed all steps in the [**Supabase setup**](../../supabase/supabase-setup.md) +2. Completed [**Initial setup**](initial-setup.md) required for authentication. ::: @@ -51,7 +51,7 @@ Here's how you disable email verification on the Supabase side: ### Building pages -Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](/getting-started/adding-new-page#add-page). Here is the page added from the templates, and after some modification, it looks the below: +Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the [template](../../../resources/ui/pages/pages.md#create-a-page-from-a-popular-template). Here is the page added from the templates, and after some modification, it looks the below: Also, see how to build a page layout in case you want to build a page from scratch. @@ -65,7 +65,7 @@ Now, you can proceed to add an account creation flow, which basically consists o 2. Supabase [Insert row action](../../database/supabase/database-actions.md#insert-row-action) 3. [Navigate](../../../ff-concepts/navigation-routing/nav-overview.md) action -The first one creates an account in Supabase and adds an email and password in the "auth.users" table (i.e., *Protected schemas > schema auth*). However, this action does not create an entry in the "users" table you created [here](/data-and-backend/supabase/supabase-authentication/initial-setup#1.-creating-a-users-table). To do so, you need to add another action called Supabase *insert row* action with the user's details, such as email and profile_pic. Once the entry has been created, you can navigate to the home page using the navigate action. +The first one creates an account in Supabase and adds an email and password in the "auth.users" table (i.e., *Protected schemas > schema auth*). However, this action does not create an entry in the "users" table you created [here](initial-setup.md#1-creating-a-users-table). To do so, you need to add another action called Supabase *insert row* action with the user's details, such as email and profile_pic. Once the entry has been created, you can navigate to the home page using the navigate action. Here's how it looks: diff --git a/docs/ff-integrations/authentication/supabase-auth/initial-setup.md b/docs/ff-integrations/authentication/supabase-auth/initial-setup.md index d1e63984..229b0a9c 100644 --- a/docs/ff-integrations/authentication/supabase-auth/initial-setup.md +++ b/docs/ff-integrations/authentication/supabase-auth/initial-setup.md @@ -52,7 +52,6 @@ To enable authentication in FlutterFlow: 3. Turn on the **Enable Authentication** toggle and select **Authentication Type** to **Supabase**. -4. To ensure that your users are directed to the appropriate pages based on their login status, - you must set the [initial pages](/settings-and-integrations/general-settings/app-details#initial-page). +4. To ensure that your users are directed to the appropriate pages based on their login status, you must set the [initial pages](../../../resources/projects/settings/general-settings.md#initial-page). ![img_1.png](img_1.png) \ No newline at end of file diff --git a/docs/ff-integrations/database/cloud-firestore/firebase-content-manager.md b/docs/ff-integrations/database/cloud-firestore/firebase-content-manager.md index 16dd3112..5faea612 100644 --- a/docs/ff-integrations/database/cloud-firestore/firebase-content-manager.md +++ b/docs/ff-integrations/database/cloud-firestore/firebase-content-manager.md @@ -189,8 +189,7 @@ com/embed/1f0d58f3d1f64f6ab5e40fe34d49fc39?sid=de5cd66e-2b99-4fea-8fb1-8c5eb2c50 ### Multiple Items -To store the multiple items of the same data type, For example, a list of Fruit names, make sure -you have a Field with **Data Type** set to any from [this](/data-and-backend/firebase/firestore-database-cloud-firestore/creating-collections#data-types-within-flutterflow) and **Field Type** set to **List**. +To store the multiple items of the same data type, For example, a list of Fruit names, make sure you have a Field with **Data Type** set and **Field Type** set to **List**. The field looks like this: diff --git a/docs/ff-integrations/database/cloud-firestore/firestore-actions.md b/docs/ff-integrations/database/cloud-firestore/firestore-actions.md index 94f09e04..95647263 100644 --- a/docs/ff-integrations/database/cloud-firestore/firestore-actions.md +++ b/docs/ff-integrations/database/cloud-firestore/firestore-actions.md @@ -241,7 +241,7 @@ By enabling Firestore batch write, you can group multiple operations and send th Suppose you have an e-commerce application, and after a successful order, you need to update the product inventory count and create a new document in the 'orders' collection. Using a batch write, you can combine these operations and execute them together to ensure data consistency. -To enable Firestore batch write, you must have multiple Firestore ([any combination of)](#) +To enable Firestore batch write, you must have multiple Firestore any combination of actions; inside the action editor, at the top right side, enable **Batch Firestore Writes**.

@@ -261,7 +261,7 @@ com/embed/238400b5445b444db712f492584b0d6e?sid=7b496882-0280-4920-924c-640fddeff To do so: -1. Ensure you have [**Query Collection**](#) or [**Document from Reference**](#) added on a widget with **Single Time Query** disabled. +1. Ensure you have **Query Collection** or **Document from Reference** added on a widget with **Single Time Query** disabled. 2. Now select the widget, head over to **Actions**, and click **+ Add Action**. 3. Select the **On Data Change** tab. That means actions added under this will be called whenever the data changes. 4. Now, you can diff --git a/docs/ff-integrations/database/cloud-firestore/firestore-rules.md b/docs/ff-integrations/database/cloud-firestore/firestore-rules.md index a0bf1f87..99b33580 100644 --- a/docs/ff-integrations/database/cloud-firestore/firestore-rules.md +++ b/docs/ff-integrations/database/cloud-firestore/firestore-rules.md @@ -65,7 +65,7 @@ For 'Tagged Users,' the document must contain a field that can either be a refer #### Default rules applied to new collections -When you create a new collection inside the [Firestore Content Manager](/data-and-backend/firebase/firestore-database-cloud-firestore/firebase-content-manager), below are the default rules applied to the collection: +When you create a new collection inside the [Firestore Content Manager](../../database/cloud-firestore/firebase-content-manager.md), below are the default rules applied to the collection: * **Create -> Everyone**: All users can create a document. * **Read -> Everyone**: All users can read documents. diff --git a/docs/ff-integrations/database/local-sql/quickstart.md b/docs/ff-integrations/database/local-sql/quickstart.md index 237d94d9..683d1753 100644 --- a/docs/ff-integrations/database/local-sql/quickstart.md +++ b/docs/ff-integrations/database/local-sql/quickstart.md @@ -156,9 +156,9 @@ To show a list of notes, you can use the **ListView** > **Container** widgets to ![img_2.png](imgs/img_2.png) -Now, on the ListView widget, add a [SQLite backend query](/data-and-backend/backend-query/sqlite-query) and display data in UI elements. +Now, on the ListView widget, add a SQLite backend query as per the following instructions: -### To add a SQLite Query: +### Add a SQLite Query: Go to your project page and follow the steps below to define an SQLite query: diff --git a/docs/ff-integrations/gemini/gemini.md b/docs/ff-integrations/gemini/gemini.md index f247478a..6cff141c 100644 --- a/docs/ff-integrations/gemini/gemini.md +++ b/docs/ff-integrations/gemini/gemini.md @@ -93,7 +93,7 @@ This action enables your app to analyze images and generate descriptive text abo * **Input**: *Image Type* - There are two ways you can provide an image. + **Image Network URL**: You can provide the URL of the image hosted on the internet. If you upload an image to **Firebase** or **Supabase**, you can provide the image via ***Widget State > Uploaded File URL****.* - + **Uploaded Image File**: You can also provide an image file directly [from your device](/actions/actions/utilities/upload-data#id-3.-local-upload-widget-state) via ***Widget State > Uploaded Local File****.* + + **Uploaded Image File**: You can also provide an image file directly [from your device](#) via ***Widget State > Uploaded Local File****.* * **Output**: *Action Output Variable Name* - "This is a pipe organ. It is a large musical instrument that is used in churches, concert halls, and other large buildings. The sound of a pipe organ is very powerful and can be used to create a wide variety of music." diff --git a/docs/ff-integrations/google-cloud/secure-keys.md b/docs/ff-integrations/google-cloud/secure-keys.md index e4ff440f..23875d0d 100644 --- a/docs/ff-integrations/google-cloud/secure-keys.md +++ b/docs/ff-integrations/google-cloud/secure-keys.md @@ -30,10 +30,7 @@ To minimize potential damage from compromised API keys: ## Add restrictions to your API key -API keys are unrestricted by default. Unrestricted keys are insecure because they can be used by -anyone, from anywhere. You can add either [**application restrictions -**](https://cloud.google.com/docs/authentication/api-keys?#adding-application-restrictions) or [* -*API restrictions**](https://cloud.google.com/docs/authentication/api-keys?#api_key_restrictions) to +API keys are unrestricted by default. Unrestricted keys are insecure because they can be used by anyone, from anywhere. You can add either [application restrictions](https://cloud.google.com/docs/authentication/api-keys?#adding-application-restrictions) or [API restrictions](https://cloud.google.com/docs/authentication/api-keys?#api_key_restrictions) to enhance security. @@ -43,8 +40,7 @@ their unique identifiers. At this stage, you should already have API keys created, but they are currently unrestricted. If they are not yet created, you can follow the integration process for any of the Google Cloud -services we support in FlutterFlow, or for Maps, [**you can go here. -**](../maps/google-maps/generate-maps-keys) +services we support in FlutterFlow, or for Maps, [you can go here.](../maps/google-maps/generate-maps-keys.md) All your created API keys should be available on the [Cloud Credentials Page](https://console.cloud.google.com/apis/credentials). (Ensure you are diff --git a/docs/ff-integrations/maps/google-maps/generate-maps-keys.md b/docs/ff-integrations/maps/google-maps/generate-maps-keys.md index aa52b941..91dac740 100644 --- a/docs/ff-integrations/maps/google-maps/generate-maps-keys.md +++ b/docs/ff-integrations/maps/google-maps/generate-maps-keys.md @@ -38,7 +38,7 @@ com/embed/b1f6d8ddcc44492a92f833dafa619ec0" frameborder="0" allow="accelerometer :::warning To secure your API keys, refer to the -[**Best Practices guide: Secure API Keys**](../../google-cloud/secure-keys) +[**Best Practices guide: Secure API Keys**](../../google-cloud/secure-keys.md) ::: - Click on the Credentials menu from the left panel. diff --git a/docs/ff-integrations/notifications/push-notifications/getting-started.md b/docs/ff-integrations/notifications/push-notifications/getting-started.md index 58f0875e..fd9fdb8c 100644 --- a/docs/ff-integrations/notifications/push-notifications/getting-started.md +++ b/docs/ff-integrations/notifications/push-notifications/getting-started.md @@ -156,7 +156,7 @@ com/embed/06916f7d74d1418d9fdb818d1e001635?sid=bb4c6e0e-ea37-48d7-b52f-d4a81db15 -### 3. Sending push notifications +### Sending push notifications Use these steps to create and send push notifications: @@ -194,7 +194,7 @@ Currently we only support sending *Firestore document references* as data. To send a push notification with data: 1. You must have a page that accepts a parameter of type 'DocumentReference'. -2. Build a notification using the instructions [here](/settings-and-integrations/app-settings/push-notifications#add-push-notifications). +2. Build a notification using the instructions [here](#add-push-notifications). 3. Set the **Initial Page** to the one that accepts the parameter. 4. Find the **Parameter Data** section, copy the document reference from the Firestore, and paste it into the input box below. 5. Click on **Send Notification**. @@ -264,7 +264,7 @@ Follow the steps below to add this action to any widget. 7. You can set the **Notification Text** from a variable. 8. Optional: Open the **Notification Image** section to set the image that you want to appear in the notification. 9. Turn on the **Deliver with Sound** if you want to send a notification with the user's default sound/vibration. - 10. To set which page to open when a user taps the notification, set the **Initial Page** to the page you would like to open. You can also [pass on the parameters](/settings-and-integrations/app-settings/push-notifications#push-notifications-with-data) if page requests. + 10. To set which page to open when a user taps the notification, set the **Initial Page** to the page you would like to open. You can also [pass on the parameters](#push-notifications-with-data) if page requests.
diff --git a/docs/ff-integrations/search/simple-search.md b/docs/ff-integrations/search/simple-search.md index 119205e3..dd2db7c5 100644 --- a/docs/ff-integrations/search/simple-search.md +++ b/docs/ff-integrations/search/simple-search.md @@ -14,7 +14,7 @@ The simple search allows you to search the data present locally on a device. For :::caution[When to use Simple Search vs Algolia] We advise using a simple search only for the smaller Firestore collection (with limited records). Otherwise, it can be slow and/or expensive. For a more extensive collection, consider using the -[**Algolia search**](#). +[**Algolia search**](../search/algolia-search.md). :::
@@ -166,7 +166,7 @@ com/embed/39bb5fc9068f4a759a4b0d6fd62e3f16?sid=ed5c274e-f1e0-4830-9702-dd35ac2d6 4. Now, inside the *StickyHeader* *Content* section, add the **ListView** with a **Container** inside to display the list of matching contacts. - 1. On this ListView, generate dynamic children from a variable that holds all the contacts. But while doing so, filter the list and extract only matching contacts using [Code expression](/advanced-functionality/code-expression). + 1. On this ListView, generate dynamic children from a variable that holds all the contacts. But while doing so, filter the list and extract only matching contacts using [Code expression](../../../../resources/control-flow/functions/utility-functions.md#code-expressions). 2. Now you can display the contact's details, such as name, inside the UI.