diff --git a/docs/ff-concepts/animations/widget_animations.md b/docs/ff-concepts/animations/widget_animations.md index 30a4c76f..4fba497a 100644 --- a/docs/ff-concepts/animations/widget_animations.md +++ b/docs/ff-concepts/animations/widget_animations.md @@ -208,7 +208,7 @@ If you notice carefully, the items appear in a staggered fashion. This can be ac Select the item in the list and add the Slide animation. -In the Delay property, open the variable menu and add a [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect. +In the Delay property, open the variable menu and add a [inline function](../../resources/control-flow/functions/utility-functions.md#inline-function) to calculate the delay value based on the item's index. For this example, we use the formula `[index] * 100`, where `index` represents the position of the item, and `100` is the delay in milliseconds. This means the first item will slide in after 100 ms, the second after 200 ms, and so on, creating a staggered animation effect.
Design System** and click **Connect To Figma**. Authenticate your account and grant access to Figma. Once connected, paste your Figma file URL to fetch the theme. -::: +You’ll see a list of all imported colors; start mapping them to your project colors. You can filter these colors by whether they’re mapped or unmapped, and you also have the option to bulk delete any imported colors. After that, you can customize your project typography using the imported text styles. -To import the Figma theme: - -1. Open the **Theme Settings > Design System**. -2. Click the **Import Figma Theme** button. This will open a new popup. -3. Enter your **Figma File URL** and **Personal Access Token**. The *Personal access tokens* allow us to access all of your files and data in Figma. -4. Click **Import Figma Theme**. - 1. Now, you'll see a list of colors from your Figma file, and here you can decide which one to keep. If everything looks good to you, Click **Import & Continue**. - 2. You can replace the current theme colors with new/imported ones. Click on any color, and the dropdown will display all imported colors. Click on the new color to replace it. When done, click **Save & Continue**. - 3. If you have custom text styling in your Figma file, it will be displayed here, and you can choose which one to import. Click **Import & Continue**. - 4. Replace any existing style with the new one and click **Save & Finish**. -5. Finally, click **Finish & Close**. +:::info +All imported colors are accessible anytime under **Colors > Custom Colors**. +:::
-
-

+You can also create fully custom text styles to match your design needs, going beyond the default styles like Display, Headline, or Title. Simply click the **+ Add Custom Text Style** button, a new text style will be added at the bottom, then edit the style name and customize the style properties. + +![typography](imgs/typography.avif) + +:::tip[PLANS] +Custom Text Styles are available on the **Teams** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing). +::: #### Adding responsive text styles diff --git a/docs/ff-concepts/design-system/imgs/typography.avif b/docs/ff-concepts/design-system/imgs/typography.avif new file mode 100644 index 00000000..6c769fcb Binary files /dev/null and b/docs/ff-concepts/design-system/imgs/typography.avif differ diff --git a/docs/ff-integrations/payments/razorpay.md b/docs/ff-integrations/payments/razorpay.md index 59a51e9b..967a500a 100644 --- a/docs/ff-integrations/payments/razorpay.md +++ b/docs/ff-integrations/payments/razorpay.md @@ -137,7 +137,7 @@ Follow the steps below to add this action: 3. Search and select the **Razorpay Payment** (under *Integrations*) action. 4. Enter or use a variable for specifying the total amount under the **Amount** section. **Note** that the value should be specified in the currency's smallest unit. - For example, *$24.99* should be passed as *2499* (as a round-off integer; otherwise, it would be automatically rounded); similarly, for an amount of ₹120.00, 12000 should be passed. - - Most probably, you'll specify this value from a variable. If you do so, you might need this [code expression](../../resources/control-flow/functions/utility-functions.md#code-expressions) to convert the total amount in the required format: `amount.toStringAsFixed(2).replaceAll(".", "");` + - Most probably, you'll specify this value from a variable. If you do so, you might need this [inline function](../../resources/control-flow/functions/utility-functions.md#inline-function) to convert the total amount in the required format: `amount.toStringAsFixed(2).replaceAll(".", "");` 5. Enter the **Currency Code** to be used for the amount, for example, *INR*, *USD*, *EUR*, or *BRL*. Make sure you enter a valid currency code; otherwise, the transaction won't go through. Download the complete [list of supported currencies](https://razorpay.com/docs/build/browser/assets/images/international-currency-list.xlsx).

diff --git a/docs/index.md b/docs/index.md index 08a5bd30..60e45d8a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,8 +22,10 @@ import BranchIcon from '@site/static/icons/branch_New.png'; -# Visual Development Platform -FlutterFlow is a visual development platform that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. +# Visual Development Environment +FlutterFlow is a visual development environment that lets you build mobile, web, and desktop apps incredibly fast, without sacrificing quality or features. + +
diff --git a/docs/intro/ff-ui/toolbar.md b/docs/intro/ff-ui/toolbar.md index 0f125ea7..ea833aa2 100644 --- a/docs/intro/ff-ui/toolbar.md +++ b/docs/intro/ff-ui/toolbar.md @@ -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. diff --git a/docs/resources/control-flow/backend-logic/api/soap-api.md b/docs/resources/control-flow/backend-logic/api/soap-api.md index 24a15e58..bf07cf25 100644 --- a/docs/resources/control-flow/backend-logic/api/soap-api.md +++ b/docs/resources/control-flow/backend-logic/api/soap-api.md @@ -309,7 +309,7 @@ You can now proceed to display the country list in *HomePage*. Here are the step

4. On ListView, [generate dynamic children](../../../ui/widgets/composing-widgets/generate-dynamic-children.md) using the page state variable. -5. The page state variable stores the country name and code as a single string (e.g., Australia - AT). To display the name and code separately in a *ListTile*, we can use a [code expression](../../../control-flow/functions/utility-functions.md#code-expressions). To display the country name, we can use `var1.split("-")[1].trim()`, where `var1` is the current item in the list. To display the country code, we can use the same expression and replace `[1]` with `[0]`. +5. The page state variable stores the country name and code as a single string (e.g., Australia - AT). To display the name and code separately in a *ListTile*, we can use a [inline function](../../../control-flow/functions/utility-functions.md#inline-function). To display the country name, we can use `var1.split("-")[1].trim()`, where `var1` is the current item in the list. To display the country code, we can use the same expression and replace `[1]` with `[0]`.
+
+

+ + ## Library Values @@ -290,6 +331,7 @@ To create library values, navigate to **Settings and Integrations > App Settings

+ #### Use Library Values After setting Library Values, they function just like any other variable in FlutterFlow. You can bind them to components, actions, API calls, or any property that allows you to configure dynamic values across your library project. You can access Library Values via the ****Set from Variable**** menu. @@ -333,6 +375,7 @@ To set library values, navigate to **Settings and Integrations > Project Setup > For different [**development environments**](../../testing-deployment-publishing/development-environments/development-environments.md) (e.g., development vs. production), you can bind Library Values to [**environment values**](../../testing-deployment-publishing/development-environments/development-environments.md#environment-values). For instance, you could have two different Library Values for an API key, such as `DEV_OPENAI_API_KEY` and `PROD_OPENAI_API_KEY`, and bind them to the development and production environments to track API usage separately. ::: + ## Libraries with Firebase You can create collections and enable various Firebase features in library projects without connecting a separate Firebase project. diff --git a/docs/resources/projects/refactor-project.md b/docs/resources/projects/refactor-project.md new file mode 100644 index 00000000..b074b8f6 --- /dev/null +++ b/docs/resources/projects/refactor-project.md @@ -0,0 +1,70 @@ +--- +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 + +:::tip[PLANS] +Refactor Project feature is available on the **Standard** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing). +::: + +**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 in a single, consistent operation. + +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 this mode enabled, you can update all references at once 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, saving time and effort compared to manual edits. It also lets you preview changes and dismiss anything you don’t want to update. + +:::tip[possible use cases] +- **Type Refactoring**: Rename a custom data type (e.g., `OrderDetails` → `OrderInfo`) across all bindings, forms, and logic in a single pass. +- **String Replacement**: Find and replace hardcoded (magic) strings like `"admin"`, `"true"`, or `"completed"` to improve clarity and maintainability. +- **Library Migration**: Replace a project-based custom data type (e.g., `UserProfile`) with its Library counterpart throughout the app without manually editing each reference. +- **Key Updates**: Update outdated keys—for example, replace all instances of `old_api_key` with the new `new_api_key` value. +- **Cleanup Unused Items**: Locate and remove unused fields or stale references (e.g., `oldFieldName`) from your YAML files to keep your project clean. +::: + +:::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 in green, and removed lines appear in red. As you make changes, FlutterFlow provides inline YAML validation to help you catch and fix 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**. +::: + +
+ +
+

diff --git a/docs/resources/ui/widgets/built-in-widgets/sticky-header.md b/docs/resources/ui/widgets/built-in-widgets/sticky-header.md index c0ca36e9..4db46a79 100644 --- a/docs/resources/ui/widgets/built-in-widgets/sticky-header.md +++ b/docs/resources/ui/widgets/built-in-widgets/sticky-header.md @@ -166,7 +166,7 @@ com/embed/39bb5fc9068f4a759a4b0d6fd62e3f16?sid=ed5c274e-f1e0-4830-9702-dd35ac2d6 4. Now, inside the *StickyHeader* *Content* section, add the **ListView** with a **Container** inside to display the list of matching contacts. - 1. On this ListView, generate dynamic children from a variable that holds all the contacts. But while doing so, filter the list and extract only matching contacts using [Code expression](../../../../resources/control-flow/functions/utility-functions.md#code-expressions). + 1. On this ListView, generate dynamic children from a variable that holds all the contacts. But while doing so, filter the list and extract only matching contacts using [Inline Function](../../../../resources/control-flow/functions/utility-functions.md#inline-function). 2. Now you can display the contact's details, such as name, inside the UI.