You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ff-integrations/authentication/supabase-auth/auth-actions.md
+35-1Lines changed: 35 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -104,7 +104,7 @@ Here’s how you can add the Supabase reset password feature to your app:
104
104
105
105
1. On the **ForgotPassword Page**, add the **Send Reset Password Email** action and set the **Email Field** dropdown to the widget that accepts the user's email address. This action will send the reset password link to the provided email.
106
106
2. The reset link sent to the user will open the **UpdatePassword Page**. On that page, add the **Update Password** action and set the **Password Field** and **Confirm Password Field** to the respective input widgets.
107
-
3. Copy the route name of the **UpdatePassword Page** and paste it into the **Supabase Dashboard > Authentication > Email Templates > Reset Password > Source**. After **`"{{ .ConfirmationURL}}"`** add **`"/[here]"`** only if you're not using a custom redirect URL. If using a custom redirect URL, the confirmation URL will redirect directly to your specified path.
107
+
3. Copy the route name of the **UpdatePassword Page** and paste it into the **Supabase Dashboard > Authentication > Email Templates > Reset Password > Source**. After **`"{{ .ConfirmationURL}}"`** add **`"/[here]"`** only if you're not using a [custom redirect URL](#use-custom-redirect-urls). If using a custom redirect URL, the confirmation URL will redirect directly to your specified path.
108
108
4.[Deploy your app to the web](../../../testing-deployment-publishing/publishing/web-publishing.md).
109
109
5. Copy the URL of your deployed project and paste it into the **Supabase Dashboard > Authentication > URL Configuration > Site URL**.
110
110
@@ -140,7 +140,41 @@ Here’s how you can add the Supabase reset password feature to your app:
140
140
</div>
141
141
<p></p>
142
142
143
+
### Use Custom Redirect URLs
143
144
145
+
Instead of relying on the default `{{ .ConfirmationURL }}` path, you could optionally configure a **custom redirect URL** in Supabase. This option allows you to bypass the default setup and send users directly to a custom page in your app for resetting their password.
146
+
147
+
To configure a custom redirect URL:
148
+
149
+
1. When adding the **Send Reset Password Email** action in FlutterFlow, enter the **Redirect To** URL. For example `http://my-site.com/resetPassword`.
150
+
2. Whitelist this custom URL by navigating to **Supabase Dashboard > Authentication > URL Configuration > Redirect URL**, and click **Add URL** to include it.
151
+
3. Update the reset password template. Go to **Supabase Dashboard > Authentication > Email Templates > Reset Password > Source** and ensure only `{{ .ConfirmationURL }}` is present in the template (remove any appended route names).
152
+
153
+
<div style={{
154
+
position: 'relative',
155
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
Copy file name to clipboardExpand all lines: docs/marketplace/creators-hub/submit-item-for-reivew.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -30,8 +30,9 @@ In order to submit an item, it must be inside of a project that has been Set For
30
30
31
31
To set a project for Marketplace:
32
32
33
-
1. Select the [**Share Icon**](../../intro/ff-ui/toolbar.md#share-project) from the Toolbar (top right side of the screen).
34
-
2. Select **Create New Item > Set For Marketplace > Yes**
33
+
1. Prerequisite: please enroll as a Marketplace creator first by setting up a profile in [Marketplace](https://marketplace.flutterflow.io/profile). You can optionally also apply to become a paid creator, which allows you to monetize your items.
34
+
2. Select the [**Share Icon**](../../intro/ff-ui/toolbar.md#share-project) from the Toolbar (top right side of the screen). Please note that you must be the project owner to see this icon and to submit an item.
35
+
3. Select **Create New Item > Set For Marketplace > Yes**
35
36
36
37
:::tip
37
38
You can also clone an existing project and then set it as a Marketplace Project.
@@ -42,7 +43,7 @@ You can also clone an existing project and then set it as a Marketplace Project.
42
43
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
description: Learn how to add action parameters or callbacks to custom components.
4
7
---
5
8
6
9
# Action Parameters (Callbacks)
@@ -12,6 +15,16 @@ define specific behaviors that the child entity should execute when certain even
12
15
It enables dynamic and interactive behavior in child components, allowing them to perform actions
13
16
defined by the parent, such as navigation, data updates, or displaying dialogs.
14
17
18
+
For example, if you have an *image upload component*, the parent can define what should happen after an image is successfully uploaded. Using callbacks, the *image upload component* can execute a parent-defined action, such as:
19
+
20
+
- Resize and compress the image to reduce storage size.
21
+
- Update the user's database record with the new image URL.
22
+
- Refresh the UI to display the updated profile picture.
23
+
24
+
This makes the *image upload component* component reusable, as it doesn't need to know the specifics of what should happen post-upload. Instead, the parent controls the behavior by passing the appropriate actions via a callback.
:::tip[Benefits of Using Callbacks in FlutterFlow]
16
29
17
30
-**Modularity:** Separate the logic of what happens when an event occurs from the child component,
@@ -21,35 +34,140 @@ defined by the parent, such as navigation, data updates, or displaying dialogs.
21
34
:::
22
35
23
36
24
-
## Creating a Callback Parameter
25
-
In order to create a component that will execute a callback, you must create a component with a parameter of type Action.
37
+
## Adding Callbacks
38
+
39
+
Let’s continue with our previous example (*image upload component*) and see how to add callbacks on it:
40
+
41
+
### Creating a Callback Parameter
42
+
43
+
In order to create a component that will execute a callback, you must create a component with a parameter of **Type****Action**. You can create an action parameter called `uploadAction`, which represents the action that will be executed after the image is uploaded.
44
+
45
+
When you create an action parameter, you can also specify parameters that will be passed into the action. For this example, the action that will be executed will likely need to know the uploaded image URL to process it further. So, you can specify an action parameter called uploadedURL.
46
+
47
+
Now, the page or component that uses this button can utilize this parameter in its own action flow. An example of this is shown below.
48
+
49
+
<div style={{
50
+
position: 'relative',
51
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
For instance, when you add an *image upload component*, you can specify the action flows to be executed when the callback is triggered. For this example, we simply update the profile picture.
36
113
37
-
## Executing a Callback
114
+
:::info
38
115
39
-
You can execute the action that is passed into the component by using the **Execute Callback**action in the component's action flows.
116
+
You can access the value passed to the callback by navigating to the **Set Variable**menu > **Callback Parameters**.
40
117
41
-
For example, you may want to execute the above callback when the button is tapped.
Now that we have an *image upload component* with action parameters set up, it can be reused across different pages or contexts, as it relies on the parent to define the post-upload logic. For example, the same component can be used to upload an image while posting reviews for a product, eliminating the need to create a separate component for this functionality.
Let's see some more examples of adding action parameters (callbacks) to deepen the understanding and use it in real-world scenarios.
156
+
157
+
### Example 1: Dynamic Dialog Component
158
+
159
+
Let’s take another example of a reusable dialog component that uses callbacks to handle context-specific actions like confirming a deletion, logging out, or saving data. In one context, "Yes" deletes an item. In another, it logs out a user.
46
160
47
-
When you add a component to the widget tree of a page or another component, you can set values for its parameters.
161
+
The specific logic for each action is defined by the parent component or page using the dialog. The dialog itself does not need to know of what should happen—it simply executes the callback passed to it when users click on the "Yes" button.
48
162
49
-
This holds true for actionparameters as well. For example, when you create an instance of the button component mentioned above, you can specify the action flows that should be used when the callback is executed.
Using Action Parameters to build a Custom Navigation Bar in a Super App is an excellent way to create a dynamic, reusable, and modular navigation solution. A **Super App** typically hosts multiple mini-apps or features, each requiring specific navigation logic. Action Parameters allows you to define navigation behavior dynamically, depending on the active context, making it perfect for this scenario.
53
168
169
+
Here, the navigation bar doesn’t require hardcoded routes. Instead, the navigation logic can be customized for each mini-app, allowing the navigation bar to remain focused solely on its UI role.
54
170
171
+
For example, in an **ecommerce mini-app**, the home button navigates to the product listing page, while the main (middle) button opens the shopping cart. In contrast, in a **cab booking mini-app**, the home button navigates to the dashboard, and the main (middle) button opens the quick booking page.
Copy file name to clipboardExpand all lines: docs/testing-deployment-publishing/publishing/deploy-for-environment.md
+28-2Lines changed: 28 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -18,9 +18,35 @@ You can configure and publish environment-specific builds of your app for both i
18
18
19
19
To set up deployment for different environments, go to **Settings & Integrations > App Settings > Mobile Deployment**, and select the desired environment from the **Current Environment** dropdown on the right side.
20
20
21
-
To submit an environment-specific build to the App Store and Play Store, you must have unique package names representing each environment. To achieve this, create [environment values](../development-environments/development-environments.md#use-environment-values) for the package name and set it into **Settings & Integrations > General > App Details > Package Name**. This ensures that when you switch environments, the package name changes and you can submit separate builds to the App Store and Play Store.
21
+
Now, to submit an environment-specific build to the App Store and Play Store, you must have unique package names representing each environment. To set this up, go to **Settings & Integrations > General > App Details > Package Name**, select the **Current Environment** from the dropdown (on the right), and specify the package name for that environment. This ensures that when you switch environments, the package name changes and you can submit separate builds to the App Store and Play Store.
22
22
23
-
For example, in an ecommerce app, you can set environment values for package names such as `io.flutterflow.ecommerceflow.dev` for the development environment and `io.flutterflow.ecommerceflow.staging` for the staging environment.
23
+
For example, in an ecommerce app, you can set package names such as `io.flutterflow.ecommerceflow.dev` for the development environment and `io.flutterflow.ecommerceflow.staging` for the staging environment.
24
+
25
+
<div style={{
26
+
position: 'relative',
27
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
0 commit comments