Merge pull request #370 from FlutterFlow/feature/ff6

FlutterFlow 6.0 Launch!

Author: pinkeshmars

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.
 
 <div style={{
     position: 'relative',

docs/ff-concepts/design-system/design-system.md

@@ -88,33 +88,27 @@ To add a design system from a library, start by creating the design system in a
 
 ## Import Figma Theme
 
-You might use Figma to design your app and build it accordingly in our builder. If you have a lot of colors and text styles, importing them manually can take some time. You can now import the whole Figma theme, which includes the colors and text styles, directly into our builder.
+:::tip[PLANS]
+Import Figma Theme feature is available on the **Teams** plan and higher. Check our [**pricing plans**](https://flutterflow.io/pricing).
+:::
 
-:::info
+You can bring your Figma design system directly into your FlutterFlow project. This streamlines the design-to-development process by automatically importing colors and typography from your Figma file, helping you maintain visual consistency and reduce manual effort.
 
-Before you import the Figma theme, ensure you have access to the Figma design file and [**generate the access token**](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens).
+To import a Figma theme into your FlutterFlow project, go to **Theme Settings > 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**.
+:::
 
 <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/gEry2KO5BeoZkflYHm8f?embed&show_copy_link=true"
+        src="https://demo.arcade.software/84lqVC1ZDkq7EFFnCusm?embed&show_copy_link=true"
         title="Sharing a Project with a User"
         style={{
             position: 'absolute',
@@ -571,31 +565,13 @@ You can customize the following properties of each text style:
 - **Color** - Set the color of the text using either the color picker or by specifying a Hex value.
 - **Font Family** - You can change the Font Family for any style from here. Click here to set the font family from [*Google Fonts*](https://fonts.google.com/) or choose from the uploaded Custom Fonts. You can also choose whether this style is a *Primary* or *Secondary Font Family*.
 
-<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/JOD7EaZpTUgqzuvLT876?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>
+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
 

docs/ff-concepts/design-system/imgs/typography.avif

@@ -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).
 <p></p>
 

docs/ff-integrations/payments/razorpay.md

@@ -22,8 +22,10 @@ import BranchIcon from '@site/static/icons/branch_New.png';
 
 <FlutterFlowLogo></FlutterFlowLogo>
 
-# 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. 
+
+<div class="video-container small"><iframe src="https://www.youtube.com/embed/gYOrgBrX4jM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
 
 <InfoCards>
     <InfoCard title="Before You Begin" description="Ensure you meet system requirements and grasp technical concepts for smooth building in FlutterFlow." pagePath="/before-you-begin/setup-flutterflow" />

docs/index.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.

docs/intro/ff-ui/toolbar.md

@@ -309,7 +309,7 @@ You can now proceed to display the country list in *HomePage*. Here are the step
     <p></p>
 
 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]`.
 
     <div style={{
         position: 'relative',

docs/resources/control-flow/backend-logic/api/soap-api.md

@@ -356,7 +356,7 @@ id: 2
 ```
 The Server Sent Event Data JSON will be `null` because the data cannot be parsed as JSON.
 
-You can fix this by using the following expression inside the [Code Expression](../../../control-flow/functions/utility-functions.md#code-expressions) to handle the `null` case:
+You can fix this by using the following expression inside the [Inline Function](../../../control-flow/functions/utility-functions.md#inline-function) to handle the `null` case:
 
 ```
 responseData ?? ''

docs/resources/control-flow/backend-logic/api/streaming-api.md

@@ -21,9 +21,7 @@ FlutterFlow has the following built-in functions:
 * **Combine Text:** A built-in function that lets you concatenate strings, making it easy to join
   multiple text elements together seamlessly.
 
-* **Code Expression:**  This feature allows you to perform simple calculations and data
-  manipulations
-  quickly and efficiently.
+* **Inline Function:**  This feature allows you to perform simple calculations and data manipulations quickly and efficiently.
 
 
 
@@ -87,34 +85,22 @@ together, with the same text style applied to all of them. If you need to combin
 values with different text styles for each, consider using the **[RichText](../../ui/widgets/basic-widgets/text.md#richtext-widget)** widget.
 :::
 
-## Code Expressions
+## Inline Function
+Often times, you may need to quickly format data, convert a data type from one form to another, or perform a simple calculation before setting the variable to a data source, such as a widget value source.
 
-Oftentimes, you may need to quickly format data, convert a data type from one form to another,
-or perform a simple calculation before setting the variable to a data source, such as a widget
-value source.
+Inline Function is a piece of code that combines operators, variables, and/or values to produce a result. It can be used for arithmetic and logical operations, among other tasks.
 
-**Code Expression** built-in functions can help with
-these tasks. A code expression is a piece of code that combines operators, variables, and/or values
-to produce a result. It can be used for arithmetic and logical operations, among other tasks.
+To add inline function, open the Set from Variable dialog wherever it's possible to set a dynamic value and choose the values that will be part of the inline function.
 
-To perform a code expression, open the Variable Setter dialog wherever it's possible to set a
-dynamic value and choose the values that will be part of the code expression.
+For example, we may want to quickly calculate the discount amount of a product where the discount is 18% of the MRP of the product. The expression would be `cost - (cost * discount)`.
 
-For example, we may want to quickly calculate the discount amount of a product where the discount is
-18% of the MRP of the product.
+**Precedence of operations**
 
-The expression would be `cost - (cost * discount)`.
+Inline Function for math operations follow typical precedence (e.g., multiplication/division before addition/subtraction), but parentheses can change the order.
 
-:::warning[Precedence of operations]
-Code expressions for math operations follow typical precedence (e.g., multiplication/division before
-addition/subtraction), but parentheses can change the order.
-:::
-
-In this case, the variables we need are `cost` and `discount`.
+In this case, the variables we need are `cost` and `discount`.
 
-So, we create two arguments in the **Code Expression** dialog where they hold the value of `cost`
-and `discount`, assign the data type for each of the arguments, and define the return type of the
-final value. In this case, the return type is a `double` since it holds the **subtotal** amount.
+So, we create two arguments in the **Inline Function** dialog where they hold the value of `cost` and `discount`, assign the data type for each of the arguments, and define the return type of the final value. In this case, the return type is a `double` since it holds the **subtotal** amount.
 
 <div style={{
     position: 'relative',
@@ -123,7 +109,7 @@ final value. In this case, the return type is a `double` since it holds the **su
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/I6UcltVn7ssAIWmipeFY?embed&show_copy_link=true"
+        src="https://demo.arcade.software/qM8kjAlMJl6WyH3tXN4X?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -142,10 +128,9 @@ final value. In this case, the return type is a `double` since it holds the **su
     </iframe>
 </div>
 
-Now you can write the code expression in the **Expression** field and click on **Check Errors** to
-see if the expression is valid. If it is valid, you will see the generated code for the same.
+Now you can write the inline function in the **Expression** field and click on **Check Errors** to see if the expression is valid. If it is valid, you will see the generated code for the same.
 
-The arguments in a Code Expression can take the following properties:
+The arguments in a Inline Function can take the following properties:
 
 | DataType | Supports Nullable | Supports List |
 |----------|-------------------|---------------|
@@ -172,12 +157,10 @@ Here are some common expressions you can use for your business logic:
 
 
 
-
-
 ## Custom Functions
 
-You can also use custom functions to handle slightly more complex calculations or to process a wider range of data types that are not supported in Code Expression.
+You can also use custom functions to handle slightly more complex calculations or to process a wider range of data types that are not supported in Inline Function.
 
 :::info
 Learn more about [**Custom Functions**](../../../ff-concepts/adding-customization/custom-functions.md).
-:::
+:::

docs/resources/control-flow/functions/utility-functions.md

@@ -65,7 +65,7 @@ There are different types of functions you can use in your app. Some examples in
   tasks, such as 
   formatting 
 data or performing calculations. In FlutterFlow, you can use 
-[**Code Expression**](functions/utility-functions.md#code-expressions) for simple data 
+[**Inline Function**](functions/utility-functions.md#inline-function) for simple data 
   manipulation tasks or use the 
   **[Combine Text](functions/utility-functions.md#combine-text)** built-in 
   function to concatenate strings.