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
6.[Optional: Use Cloud Function result](#6-optional-use-cloud-function-result)
40
40
41
41
:::info[Before you Begin]
42
42
@@ -47,22 +47,23 @@ Here are the step-by-step instructions to build such an example:
47
47
48
48
### 1. Add page state variables
49
49
50
-
For this example, you'll need to set up two [page state variables](/data-and-backend/state-management/page-state#1.-creating-page-state-variable):
50
+
For this example, you'll need to set up two
51
+
[Page State variables](../../resources/ui-building-blocks/pages/page-lifecycle.md#creating-a-page-state):
51
52
52
53
1.**generatingImage (*****Type: Boolean*****)**: This is used to control the visibility of a
53
54
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.
54
-
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.
55
+
2.**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.
55
56
56
57
<p></p>
57
-
58
+
58
59
59
60
### 2. Build a page
60
61
61
62
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:
62
63
63
64
Also, see how to [build a page layout](/widgets-and-components/ui-and-layout-101) if you want to build a page from scratch.
64
65
65
-
66
+
66
67
67
68
Few things to note here:
68
69
@@ -76,20 +77,20 @@ To create and deploy a *Cloud Function* :
76
77
1. Click on the **Cloud Functions** from the
77
78
[**Navigation Menu**](../../../docs/intro/ff-ui/builder.md#navigation-menu) (left side of your
78
79
screen).
79
-
5. Click **+ Add**. This will add the default `newCloudFunction`.
80
-
8. Set the **Cloud Function Name**.
80
+
2. Click **+ Add**. This will add the default `newCloudFunction`.
81
+
3. Set the **Cloud Function Name**.
81
82
82
83
#### Boilerplate Settings
83
84
84
85
On the right side, you can configure the following Boilerplate Settings:
85
86
1.**Memory Allocation**: You can specify the amount of memory your function should have when
86
87
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.
87
88
88
-
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.
89
-
8.**Require Authentication**: Turn on this setting if you want users to be authenticated to execute this cloud function.
90
-
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.
89
+
2.**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.
90
+
3.**Require Authentication**: Turn on this setting if you want users to be authenticated to execute this cloud function.
91
+
4.**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.
91
92
92
-
93
+
93
94
94
95
#### Configuring Input & Output
95
96
@@ -99,8 +100,9 @@ by configuring the input and output.
99
100
1. To receive output from a Cloud Function, enable the **Return Value** and choose an
100
101
appropriate Type for the output, like 'String' for text. For this example, set it to *ImagePath* to get the URL of the generated logo.
101
102
102
-
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*.
103
-
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:
103
+
2. 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*.
104
+
3. When using [Custom Data Types](../../resources/data-representation/custom-data-types.md),
105
+
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:
104
106
105
107
```
106
108
//JSON:
@@ -224,7 +226,7 @@ Your cloud function may require third-party packages to work. You can include an
224
226
225
227
To add a dependency, open the `package.json` file and specify your package in the `dependencies` section.
@@ -86,7 +89,7 @@ compilation errors. To do so, click the **Compile Code** button.
86
89
87
90
88
91
<figure>
89
-
92
+
90
93
<figcaptionclass="centered-caption">How to recognize compile time errors</figcaption>
91
94
</figure>
92
95
@@ -95,7 +98,7 @@ compilation errors. To do so, click the **Compile Code** button.
95
98
The code analyzer is available in all your custom code snippets and ensures the quality and
96
99
correctness of your custom code. It automatically checks your Dart code for errors and warnings,
97
100
providing real-time feedback as you write.
98
-
101
+
99
102
When there is a compilation error, the code analyzer will stop running and display the errors caught
100
103
by the compiler. Once fixed, save the code and rerun using the Compile Code button. The code analyzer
101
104
should then be reconnected. You can also manually reconnect it if needed.
@@ -104,7 +107,7 @@ should then be reconnected. You can also manually reconnect it if needed.
104
107
105
108
When creating a new custom code snippet (actions, widgets, or functions) in FlutterFlow, some fundamental imports will be automatically added for you. These imports cannot be modified by the developer. Custom Functions do not allow adding any custom imports, but you can add custom imports in Custom Actions and Widgets after the line **"Do not remove or modify the code above"**.
When you define a custom data type in FlutterFlow, the generated code will refer to the type
@@ -166,7 +169,7 @@ occurs.
166
169
In the following example, we have a Custom Action that takes an `onError(searchKeyword)` callback
167
170
action with an Action Parameter `searchKeyword`. This means that the custom action will provide this search keyword back to the callback action when it calls it.
We allow you to add a custom code directly into the `main.dart` file of your app. This means that you can easily implement specific functionalities and customize your app as per your requirements without downloading the entire project and manually modifying the file.
13
13
14
-
By default, the file you want to edit is in 'read-only' mode. However, using our editor, you can add a code snippet in the form of [custom actions](/customizing-your-app/custom-functions/custom-actions).
14
+
By default, the file you want to edit is in 'read-only' mode. However, using our editor, you can
15
+
add a code snippet in the form of [Custom Actions](custom-actions.md).
15
16
16
17
:::warning[Please note]
17
18
You can only add custom actions that have no arguments (including *BuildContext*).
@@ -29,14 +30,15 @@ Let's see an example of how you can add a code in **main.dart** file to change t
29
30
color for the mobile app. Here's how it looks:
30
31
31
32
<figure>
32
-
33
+
33
34
<figcaptionclass="centered-caption">Changing the status bar color for the mobile device</figcaption>
34
35
</figure>
35
36
36
37
To do so, you can edit *main.dart* file by following the steps below:
37
38
38
-
1. Create a [custom action](/customizing-your-app/custom-functions/custom-actions#adding-custom
39
-
-action) for the code you want to include in a *main.dart* file. For this example, here's code in a custom action named 'setStatusbarColor'.
39
+
1. Create a [Custom Action](custom-actions.md#custom-actions) for the code you want to include in a `main.
40
+
dart` file. For this
41
+
example, here's code in a custom action named 'setStatusbarColor'.
@@ -83,7 +85,8 @@ Let's see some more examples of adding code to the *main.dart* file to solidify
83
85
84
86
You might want to lock the device orientation in portrait or landscape mode to prevent it from rotating the screen automatically when the user tilts or rotates the device. This is useful in scenarios where the layout of the app is designed to work only in one specific orientation or when you want to ensure that the app is always displayed in a consistent manner.
85
87
86
-
To set the device orientation in landscape-only mode, [create a custom action](/customizing-your-app/custom-functions/custom-actions#adding-custom-action) with the following code and [add it to a *main.dart*](/customizing-your-app/custom-functions/custom-files#edit-main.dart) file.
88
+
To set the device orientation in landscape-only mode, [create a custom action](custom-actions.md) with the
89
+
following code and [add it to a `main.dart`](#edit-maindart) file.
If you want to ensure that your app appropriately manages its lifecycle and handles any necessary actions when it transitions between different states, such as 'resumed' and 'paused,' you can add the `AppLifecycleObserver` in the *main.dart* file.
119
122
120
-
To do so, [create a custom action](/customizing-your-app/custom-functions/custom-actions#adding-custom-action) with the following code and [add it to a *main.dart*](/customizing-your-app/custom-functions/custom-files#edit-main.dart) file.
123
+
To do so, [create a custom action](custom-actions.md) with the following code and [add it to a `main.dart`](#edit-maindart) file.
121
124
122
125
123
126
```dart
@@ -150,6 +153,6 @@ print('App is in background');
150
153
}
151
154
```
152
155
<figure>
153
-
156
+
154
157
<figcaptionclass="centered-caption">Edit main.dart file to get lifecycle callback</figcaption>
Enhancing your app with animations significantly improves the user experience, making it more engaging and intuitive. In FlutterFlow, you have several options to add animations to your app:
11
11
12
-
-[**Widget Animations**](widget-animations): Add animation effects to an entire widget.
13
-
-[**Implicit Animations**](implicit-animations): Animate changes in specific widget properties, such as the height of a Container.
14
-
-[**Hero Animations**](hero-animations): Animate a widget that transitions smoothly between screens, also known as shared element transitions.
15
-
-[**Page Transition Animations**](page-transition-animations): Specify transitions between pages within your app.
12
+
-[**Widget Animations**](widget_animations.md): Add animation effects to an entire widget.
13
+
-[**Implicit Animations**](implicit_animations.md): Animate changes in specific widget properties, such as the height of a Container.
14
+
-[**Hero Animations**](hero_animations.md): Animate a widget that transitions smoothly between screens, also known as shared element transitions.
15
+
-[**Page Transition Animations**](page_transitions.md): Specify transitions between pages within your app.
16
16
-**Import Animations**: Import animations you've created using other tools such [lottiefiles](import-animations/lottie-animation) and [Rive](import-animations/rive-animation).
0 commit comments