FlutterFlow Custom Code EditorSettingsTo use the VSCode extension, you must set your API key in the VSCode extension settings (under the FlutterFlow extension). You can generate an API key from the FlutterFlow account page. Besides the API key, there are some additional optional settings that can be used to specify the default Project ID and Branch to use when pulling and updating code. You can also set the Download Location to use as the initial file location where the code will be downloaded. Basic Usage:Downloading CodeThe first step in editing custom code for your FlutterFlow project is to download its code. To download the code for your project, use the VSCode command palette ( In the command palette, you can use the This command will prompt you for three pieces of information:
Initialize a Code Editing SessionAfter the code has been downloaded, you will need to initiate a Code Editing session using the extension. When a Code Editing session has been initiated, you’ll be able to pull and push code from VSCode to FlutterFlow. To start a Code Editing session, run the command This command will also automatically run Editing Custom CodeOnce your session has been initialized, you can begin adding or editing custom code. Right now, the only files that are editable are:
Note that Custom Actions and Widgets have a 1-to-1 relationship between Actions/Widgets and files. So if you create a new file in the For custom functions they are all in one file It’s recommended that you install the Flutter & Dart VSCode Extensions which will make it easier to edit Flutter and Dart code. Testing Changes LocallyAs you’re writing custom code, you’ll likely need to test it out. We recommend that you call your Custom Function, Action or Widget from within your FlutterFlow project (for example, by adding the Custom Widget to a page). You can then choose to test your app from FlutterFlow, using a Test Mode session or Local Run, or run it locally from VSCode. To test using FlutterFlow, make sure to push your changes (covered below) before running. To run from VSCode, you should have the Flutter VSCode extension installed. Then, you can simply press the Run (play) button in VSCode. For more details, follow Flutter’s documentation. Pushing Changes From VSCode to FlutterFlowTo make your custom code available inside of FlutterFlow, you need to push your changes to FlutterFlow. Pushing your changes takes all of the files that have been modified in VSCode, and overwrites the state of those files within FlutterFlow. To see what files have been modified, you can check the FF: Modified Files section of the Explorer. The FF: Modified Files panel should be updated when a file is updated and saved to indicate what has been added, removed, or changed. To push your changes to FlutterFlow, click the Push to FlutterFlow status bar icon, or run the Please note that this action cannot be undone. Make sure that you don’t have changes in FlutterFlow that should not be overwritten by local changes in VSCode. To help avoid this situation, we recommend pulling your changes from FlutterFlow before editing in VSCode, and pushing changes as soon as they are complete. Pulling Changes From FlutterFlow into VSCodeAs you make changes in FlutterFlow, you’ll want to pull those changes down into your local repository. This is especially useful for when you add new Components, App State Variables or Custom Data Types / Enums that you may want to reference in your custom code. To pull changes click the Similar to pushing changes, it’s important to note that this will override all of your local changes with what was present in FlutterFlow. Renaming ResourcesTo rename Custom Actions or Custom Widget, use the VSCode rename symbol functionality. Simply, right click the name of a Custom Action or Widget and select Rename Symbol, then type the new name. If you change the name without doing this, you’ll need to update the name in the file where the Widget or Action is defined, as well as the index file that exports the Widget ( Creating a New ResourceTo add a new Custom Action or Widget, create a new dart file in the To add a new Custom Function, simply create a new function in the Deleting a New ResourceTo delete a Custom Action or Widget, delete the associated file. Adding New DependenciesYou can add custom pub.dev package dependencies with the Dart: Add Dependency command. This will update the pubspec.yaml file. |