Merge branch 'main' into pinkesh/library-values

pinkeshmars · web-flow · commit bbfefb6ca2cd · 2024-10-22T21:06:36.000+05:30
diff --git a/docs/ff-concepts/adding-customization/vscode-extension.md b/docs/ff-concepts/adding-customization/vscode-extension.md
@@ -229,3 +229,42 @@ To delete a Custom Action or Widget, delete the associated file.
 You can add custom [pub.dev](https://pub.dev/) package dependencies with the `Dart: Add Dependency` command from the Visual Studio Code command palette. This will update the `pubspec.yaml` file.
 
 
+## FAQs
+<details>
+<summary>How do I download code from the Beta or Enterprise version of FlutterFlow?</summary>
+<p>
+If you're using a different version of FlutterFlow, such as *Beta* or *Enterprise*, you can override the URL by modifying the **Extension Settings > settings.json** file.
+
+For example:
+
+- For the **Beta** version, set the `flutterflow.urlOverride` value to `https://api-beta.flutterflow.io/v1`.
+- For the **Enterprise** version, set the `flutterflow.urlOverride` value to `https://api-enterprise-[region].flutterflow.io` (replace [region] with your specific region).
+
+<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/nt5zn8DE5GxLPbKeZVL3?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>
+
+</p>
+</details>
diff --git a/docs/ff-concepts/layout/responsive-layout.md b/docs/ff-concepts/layout/responsive-layout.md
@@ -85,7 +85,7 @@ For `Row 2`, set its Expansion property to *Flexible* (the middle icon) and assi
 
 ![test-expansion.avif](imgs/test-expansion.avif)
 
-I encourage you to test with different web dimensions and sizes to see how well this adapts.
+We encourage you to test with different web dimensions and sizes to see how well this adapts.
 
 Depending on your design needs, there are various approaches to managing space. Let's consider a different scenario: What if we want the searchBar to always occupy 40% of the screen width, with `Row 2` taking up the remaining space after placing the `searchBar` and `search IconButton`?
 
diff --git a/docs/ff-concepts/layout/responsive-widgets/flex-widget.md b/docs/ff-concepts/layout/responsive-widgets/flex-widget.md
@@ -0,0 +1,90 @@
+---
+slug: /concepts/layouts/flex
+title: Flex
+description: Learn how to add the Flex widget in your FlutterFlow app.
+tags: [Flex, Widget, Concepts]
+sidebar_position: 2
+keywords: [FlutterFlow, Wrap, Concepts]
+---
+
+# Flex
+
+The **Flex** widget can be used as an alternative to **Row** and **Column**.  It allows you to dynamically set the layout axis (horizontal or vertical) based on specific conditions or logic. This is especially useful for creative responsive layouts - where child elements should be horizontal when the screen is wide, and vertical when the screen is narrow. 
+
+![flex.png](imgs/flex.png)
+
+
+
+## Adding Flex Widget
+
+To use the Flex widget, add it from the **Layout Elements** section of the **Widget Palette**, then add child widgets inside it. From the properties panel, set a condition for the **Is Horizontal** property. When this condition evaluates to `True`, the items will be laid out horizontally.
+
+Consider an ecommerce app where recent orders are displayed vertically on mobile devices and switch to a horizontal layout on larger screens to make better use of the available space.
+
+<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/3zWIgGDDec21fNIeCVOU?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>
+
+Here's another example of using a Flex widget on a create account page to dynamically align the signup fields based on screen size.
+
+<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/HPk574WhIatWbJBdlxtf?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>
+
+:::tip[Best Practices]
+
+- If you only need a simple vertical or horizontal arrangement, consider using [**Row**](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md) or [**Column**](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md).
+- For very large numbers of children, consider using [**ListView**](../../../resources/ui/widgets/composing-widgets/list-grid.md#listview-widget) or [**GridView**](../../../resources/ui/widgets/composing-widgets/list-grid.md#gridview-widget) instead of **Flex**, as they offer better performance for scrolling large lists of items.
+- When the content exceeds the screen limit, you can enable scrolling to make the content accessible. However, if you want to avoid scrolling altogether and still fit all the content on the screen, consider using a [**Wrap**](wrap-widget.md) widget.
+
+:::
+
+## Customization
+
+When **Is Horizontal** property is disabled, the Flex widget behaves like a Column, and when enabled, it acts as a Row. Settings like [main axis alignment](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#main-axis), [cross axis alignment](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#cross-axis), [scrollability](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#scrollability), and [spacing](../../../resources/ui/widgets/composing-widgets/rows-column-stack.md#spacing) work the same way they do for the Column and Row widgets.
+
+
diff --git a/docs/ff-concepts/layout/responsive-widgets/imgs/flex.png b/docs/ff-concepts/layout/responsive-widgets/imgs/flex.png
diff --git a/docs/resources/data-representation/app-state.md b/docs/resources/data-representation/app-state.md
@@ -83,7 +83,7 @@ How this app state update will affect your app.
 - **No Rebuild:** No rebuild is required. 
 
 :::tip[Generated Code]
-Curious about how state changes are handled internally when you choose different **Update Type** options? Explore the detailed [**FFAppState**](../../generated-code/ff-app-state) guide.
+Curious about how state changes are handled internally when you choose different **Update Type** options? Explore the detailed [**FFAppState**](../../generated-code/ff-app-state.md) guide.
 :::
 
 Here's a quick guide to updating the app state variable. We need to add an action to the 'Add to Bag' button. Within this action, we'll provide the product details and configure it to add to the current cart list.
diff --git a/docs/resources/projects/libraries.md b/docs/resources/projects/libraries.md
@@ -37,6 +37,14 @@ With Libraries, you can publish the complete FlutterFlow project as a library an
 
 ## Publishing a Library
 
+To make the resources in your project available for others to use, publish your project as Library. 
+
+When you publish your project as a Library, your project will become a **Library Project**, and [certain features](#disabled-features-in-a-library) will no longer be available. 
+
+:::note 
+When you publish your project as Library, it can not be reverted. If you want to restore your project so that it is no longer a Library, you can clone the project. However, things like your deployment and Firestore settings will be cleared. If you want to preserve the state of your project before turning it into a Library, you should clone it first and then publish.
+:::
+
 To publish a FlutterFlow project as a library, start by creating a FlutterFlow project as you normally would, then follow these steps:
 
 <div style={{
@@ -78,7 +86,7 @@ When a project is converted into a library, the following features are disabled
 
 - App settings 
   - Firebase 
-  - Development environment
+  - Development environments
   - Authentication
   - Push notifications 
   - Mobile deployment 
diff --git a/docs/testing-deployment-publishing/development-environments/development-environments.md b/docs/testing-deployment-publishing/development-environments/development-environments.md
@@ -119,7 +119,7 @@ Additionally, you must manually set up [**Firestore rules**](../../ff-integratio
 The data that you add to Firebase through the Content Manager is specific to the Firebase project, and environment, that you have selected.
 :::
 
-#### Comnfiguring Supabase
+#### Configuring Supabase
 If your project uses Supabase, you'll need to [**set up a new Supabase project**](../../ff-integrations/supabase/supabase-setup.md) for each environment. 
 
 Create environment-specific values like `SupabaseAPIURL` and `SupabaseAnonKey`, and then configure the Supabase properties to point to these newly created values. Below is an example of how it would look like.
