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
* Fixing account management page + adding API token info
* Adding VSCode extension info
* Made some changes on top leigha's
* API keys link fix
* Fixed broken links
* Shuffle the topics, rename titles etc
* small img ref fix
* fix vs code reference link
---------
Co-authored-by: Pinkesh <[email protected]>
Co-authored-by: PoojaB26 <[email protected]>
To delete your FlutterFlow account, please follow these steps:
68
53
69
-
1. Log in to your FlutterFlow account and select Account from the top right.
70
-
71
-
2. Scroll down to the My Plan section and select Delete Account (bottom right corner)
54
+
1. Log in to your FlutterFlow account and select **Account** from the top right.
55
+
2. Scroll down to the **My Plan** section and select **Delete Account** (bottom right corner)
72
56
73
57
:::danger
74
58
This step can not be undone. We will not be able to recover your projects.
75
59
:::
76
60
77
61
78
-
## Change/Update Email Address
79
-
### Q: How do I change or update my login email address?
62
+
### How do I change or update my email address?
80
63
To change your login email in FlutterFlow:
81
64
82
65
1. Log into your FlutterFlow account.
83
66
2. Go to the dashboard and select your account tile (showing your name and email).
84
-
3. Click on Update Email.
67
+
3. Click on **Update Email**.
85
68
4. Enter your current email and password.
86
-
5. Input your new email and click Confirm & Log Out.
69
+
5. Input your new email and click **Confirm & Log Out**.
87
70
6. Verify the new email via the link sent to it.
88
-
7. Now, you need to create a new password for your new email address. To do so, click on the Forgot Password on the login page and enter your new email address.
71
+
7. Now, you need to create a new password for your new email address. To do so, click on the **Forgot Password** on the login page and enter your new email address.
89
72
8. You'll receive the password reset link at your new email address. Click the link and reset the password.
90
73
91
74
Now, you are ready to log in with your new email address and password.
92
75
93
-
76
+
77
+
78
+
### How do I generate an API Token?
79
+
An API token is required to use the [CLI](../testing-deployment-publishing/exporting-code/ff-cli.md) and the [Visual Studio Code Extension](../ff-concepts/adding-customization/vscode-extension.md)
80
+
.
81
+
82
+
To create an API token tied to your account:
83
+
84
+
1. Navigate to your [account page in FlutterFlow](https://app.flutterflow.io/account).
85
+
2. Near the bottom of the page, click **Create Token**
Copy file name to clipboardExpand all lines: docs/ff-concepts/adding-customization/custom-code.md
+41-22Lines changed: 41 additions & 22 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,19 +11,15 @@ toc_max_heading_level: 4
11
11
# Custom Code
12
12
13
13
While FlutterFlow provides a wide range of pre-built components and functionalities, there may be
14
-
times when you need to extend your app with custom logic or features that are not readily available.
15
-
This
16
-
is where writing custom code comes into play. We provide the following features to accommodate
17
-
these needs:
18
-
19
-
***[Custom Functions](custom-functions.md):** Write custom Dart functions to perform specific tasks or
20
-
calculations.
21
-
***[Custom Actions](custom-actions.md):** Implement custom actions that can be triggered by user
22
-
interactions or
23
-
other action triggers.
24
-
***[Custom Widgets](custom-widgets.md):** Create custom Flutter widgets to achieve unique UI designs or
25
-
behaviors.
26
-
***[Custom Files:](custom-files.md)** Ability to edit some parts of the `main.dart` file.
14
+
times when you need to extend your app with custom logic or UI components that are not available out of the box.
15
+
This is where writing custom code comes into play.
16
+
17
+
There are a few different ways to make custom code accessible in FlutterFLow:
18
+
19
+
***[Custom Functions](custom-functions.md):** Custom Dart functions that can be used to set Widget or Action properties.
20
+
***[Custom Actions](custom-actions.md):** Custom Dart functions that can be triggered by [Action Triggers](https://docs.flutterflow.io/resources/functions/action-triggers/) or used as nodes in an [Action Flow](https://docs.flutterflow.io/resources/functions/action-flow-editor#action-flow-editor). These are usually `async` functions and are able to import custom package dependencies.
21
+
***[Custom Widgets](custom-widgets.md):** Custom Flutter widgets, which can be used in the same way [Components](https://docs.flutterflow.io/resources/ui/components) are used throughout your project.
22
+
27
23
28
24
:::tip[Why Write Custom Code?]
29
25
@@ -35,14 +31,29 @@ these needs:
35
31
interactions.
36
32
:::
37
33
38
-
## Common Properties
34
+
# Writing Custom Code
35
+
There are two main ways to write custom code in FlutterFlow:
36
+
37
+
1. Using the [**In-App Code Editor**](#using-the-in-app-code-editor)
38
+
2. Using the [**Visual Studio Code Extension**](vscode-extension.md)
39
39
40
-
There are several properties and settings that are common to each type of custom code in
41
-
FlutterFlow. Most of these common properties are highlighted in the diagram below. For more
42
-
information about some of these properties, see the details provided below.
40
+
41
+
### Using the In-App Code Editor
42
+
You can use the In-App Code Editor to view and edit custom code directly in the FlutterFlow application.
:::warning[Using the In-App Code Editor on Desktop]
47
+
Note that the desktop version of the In-App Code Editor is limited. We recommend using the Web editor
48
+
or the **[VSCode Extension](vscode-extension.md)**.
49
+
:::
50
+
51
+
52
+
Beyond the custom code resoureces outlined above, you'll also see an additional section in the left
53
+
hand sidebar of the Custom Code page - [Custom Files:](custom-files.md).
54
+
55
+
Within Custom Files you'll have the ability to edit some parts of the `main.dart` file.
56
+
46
57
### Code Copilot
47
58
48
59
Code Copilot is an AI-assisted feature that helps you generate code snippets,
@@ -85,35 +96,43 @@ knowledge, making it especially useful for custom functions and actions.
85
96
### Compile Code
86
97
87
98
When you are done adding your code snippets, you can compile it to ensure there are no
88
-
compilation errors. To do so, click the **Compile Code** button.
99
+
compilation errors and that your code can be transformed into something that can execute when your app is running.
89
100
101
+
To do so, click the **Compile Code** button.
90
102
91
103
<figure>
92
104
93
105
<figcaptionclass="centered-caption">How to recognize compile time errors</figcaption>
94
106
</figure>
95
107
108
+
To run your app, you must make sure **Custom Functions** are compiled.
109
+
110
+
Custom Widgets and Actions don't need to be compiled to export code or test your app. However, you won't be able to preview Custom Widgets in the builder until they are compiled. You'll see a project warning if you don't compile Custom Widgets or Actions.
111
+
112
+
Compiling Custom Functions should be pretty fast, but sometimes, compiling Custom Actions and Widgets takes a while.
113
+
96
114
### Code Analyzer
97
115
98
116
The code analyzer is available in all your custom code snippets and ensures the quality and
99
117
correctness of your custom code. It automatically checks your Dart code for errors and warnings,
100
118
providing real-time feedback as you write.
101
119
120
+
102
121
When there is a compilation error, the code analyzer will stop running and display the errors caught
103
122
by the compiler. Once fixed, save the code and rerun using the Compile Code button. The code analyzer
104
123
should then be reconnected. You can also manually reconnect it if needed.
105
124
106
125
### Custom Code Automatic Imports
107
126
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"**.
127
+
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 adding a pubspec dependency to your custom code in FlutterFlow, you’ll need two pieces of information: the [package name with its version number](#copy-package-name--version-) and the [import statement](#copying-import-statement).
283
+
When adding a pubspec dependency to your custom code in FlutterFlow, you’ll need two pieces of information: the [package name with its version number](#copy-package-name--version) and the [import statement](#copying-import-statement).
0 commit comments