Skip to content

Add Refactor Project Docs #323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
May 28, 2025
4 changes: 4 additions & 0 deletions docs/intro/ff-ui/toolbar.md
Original file line number Diff line number Diff line change
Expand Up @@ -265,6 +265,10 @@ _Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [

6. **Open in VSCode**: This option lets you open your entire FlutterFlow project in a VS Code environment, offering a richer development experience. You’ll have real-time autocomplete and error detection, easier access to existing Flutter & Dart tooling, and the ability to leverage the AI ecosystem.

7. **Refactor Project**: This option opens your FlutterFlow project in a YAML-based file editor, allowing you to perform bulk edits more efficiently. You can search, edit, and replace values across multiple files—useful for renaming keys, updating data types, or migrating resources to a Library. Check out the [**Refactor Project**](../../resources/projects/refactor-project.md) documentation for more details.



## Share project

You can make a project public so that others can view and clone your project. Before you share your project, make sure to remove any sensitive information.
Expand Down
58 changes: 58 additions & 0 deletions docs/resources/projects/refactor-project.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
---
slug: refactor-project
title: Refactor Project
tags: [Refactor]
keywords: [FlutterFlow, Refactor Project, developer tools, large-scale edits, rename , key reference search, developer menu]
description: Learn how to refactor your project in FlutterFlow.
sidebar_position: 7
---

# Refactor Project

**Refactor Project** is a developer‑focused mode that opens your FlutterFlow project as a set of YAML files so you can perform large-scale edits, such as renaming data types, pages, enums, or components, in a single, consistent operation.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is is just renaming? Can we provide a list of refactoring possible through this method presented in a bullet list?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, added them as a "Possible Use Cases" section.


For example, if you want to use a custom data type from a Library and update all references, you don’t have to manually edit each page or component. With Refactor Project, you can update all references in one go using a single refactor pass.

It makes managing large projects easier and more reliable. You can make changes across hundreds of references in just seconds, which saves time and effort compared to manually editing. It also lets you preview changes and dismiss anything you don't want to update.

:::info

You can refactor the project only if you're on a [**paid plan**](https://www.flutterflow.io/pricing).

:::

To refactor a project, go to **Toolbar > Developer Menu > Refactor Project**. You’ll need to commit any unsaved changes before entering the refactor view. This opens your project in a YAML-based editor, where you can search, edit, and replace values across multiple files.

You can also use **key reference** search by toggling the **key** icon—currently supported for data types, enums, pages, and components. Changes are color-coded: added lines appear green, and removed lines appear red. As you make changes, FlutterFlow provides inline YAML validation to help you catch and fix any issues in real time.

When you're done, click **Commit** to save the changes. After that, test your app to make sure all widgets, actions, and bindings still work as expected.

:::tip
You can exclude any item from the replacement by right-clicking on it and selecting **Dismiss**.
:::

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/Uy4bDoJSGEIJtm4an8G6?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>