Merge branch 'refs/heads/main' into rewrite/media-management

Author: PoojaB26

docs/ff-concepts/adding-customization/common-examples.md

@@ -35,7 +35,7 @@ import '/auth/firebase_auth/auth_util.dart';
 ```
 
 ::: 
-### Accessing FlutterFlow Generated Classes
+### Access FlutterFlow Generated Classes
 
 FlutterFlow generates a complete Flutter codebase for you as you build apps in its platform. Part of this code includes custom classes that are designed to streamline common tasks and encapsulate reusable properties or logic.
 
@@ -78,7 +78,7 @@ When referencing a Component class in your code, FlutterFlow will automatically
 ![return-widget-custom-code.png](imgs/return-widget-custom-code.png)
 
 
-### Accessing FlutterFlow Theme in Custom Widget
+### Get FlutterFlow Theme in Custom Widget
 
 When building custom widgets, you often need to style parts of the widget, such as setting colors. Instead of using hardcoded color values, you can directly access the **FlutterFlow Theme**. This theme provides consistent styling across your app and reflects colors set by you or your project developer.
 
@@ -128,18 +128,17 @@ class _CustomButtonState extends State<CustomButton> {
   }
 }
 ```
-:::info
-Find the list of colors, 
 
-### Manipulating AppState from Custom Code
 
-In FlutterFlow, you can access or update AppState directly from the Action Flow Editor. However, certain scenarios may require you to access or modify AppState within custom code for more control over the operation flow. The FFAppState class also provides additional helper functions to manipulate AppState variables. Let’s look at some examples: 
+### Modifying AppState from Custom Code
+
+In FlutterFlow, you can access or update AppState directly from the Action Flow Editor. However, certain scenarios may require you to access or modify AppState within custom code for more control over the operation flow. The `FFAppState` class also provides additional helper functions to modify AppState values. Let’s look at some examples: 
 
 :::tip[Imports]
 Ensure you import `import '../../flutter_flow/flutter_flow_util.dart';` when accessing `FFAppState` in custom code resources.
 :::
 
-- **Accessing AppState in Custom Code** 
+- **Get AppState value in Custom Code** 
 
 ```js
 
@@ -218,7 +217,7 @@ final newProduct = ProductStruct(
 
 ```
 
-#### Example 2: Accessing Properties of an Existing `ProductStruct` object
+#### Example 2: Get Properties of an Existing `ProductStruct` object
 
 If you have an existing `ProductStruct` object (e.g., retrieved from a list of products), you can access its properties or return specific values back to the calling Action. 
 
@@ -230,7 +229,7 @@ This function retrieves and returns the product's name. The return type is `Stri
 ```js
 // Function to return the product name from a ProductStruct instance
 String? getProductName(ProductStruct product) {
-    // Access and return the product name
+    // Get and return the product name
     return product.name;
 }
 ```
@@ -346,3 +345,94 @@ Here’s a list of other Firebase Auth variables that can be referenced in Custo
 
 - These variables make it easy to integrate Firebase Auth data into custom functionality, enhancing the user experience.
 
+
+### Get Dev Environment Values in Custom Code
+
+Similar to `FFAppState`, FlutterFlow generates a singleton `FFDevEnvironmentValues` class in your FlutterFlow generated codebase, if you are using **[Dev Environments](../../testing-deployment-publishing/development-environments/development-environments.md)**. This class can also be accessed from custom code if needed. It is generated based on the environment selected by the user at the time of code generation.
+
+To access any Dev Environment values in custom code, simply use:
+
+```js
+Future getWebhookId() async {
+  // Add your function code here!
+  return FFDevEnvironmentValues().webhookId;
+}
+```
+
+### Access Library Components in Custom Code
+
+When using a library dependency in your project, you can also access its components, such as Library App State, Library Values, and Library Widgets, in the user project's custom code. Here are a few examples:
+
+#### Get Library Values 
+
+Similar to `FFAppState` or `FFDevEnvironmentValues` class, FlutterFlow generates a singleton `FFLibraryValues` class for library projects, which provides direct access to **[Library Values](../../resources/projects/libraries.md#library-values)**.
+
+To access Library Values directly in custom code:
+
+```js
+Future getSchema(StateStruct? syncStatus) async {
+  print(FFLibraryValues().schema);
+}
+```
+
+#### Get Library Custom Code 
+
+When you add a library dependency to your FlutterFlow project, FlutterFlow automatically includes necessary imports, allowing you to utilize custom code resources from the library project in your user project's custom code files.
+
+For example, if you have a library with project ID `library_hybw3o`, FlutterFlow will add the following import to your project:
+
+```js
+import 'package:library_hybw3o/flutter_flow/custom_functions.dart' as library_hybw3o_functions;
+```
+
+
+Now, let's use the library’s custom functions in the user project's custom function:
+
+```js
+int getRandomIndex(List<int> indexList) {
+    final item = library_hybw3o_functions.getRandomItem(); // Library's custom function
+    // get Random Index
+    final randomNumber = math.Random();
+    return ...
+}
+```
+
+#### Manually Add Library Imports
+If the library import doesn’t appear in your project automatically, you can manually add it and assign a custom alias. For example, to import a library’s custom actions into your project’s Custom Widget resource, add the import yourself as shown below:
+
+For example, let's import the library's custom actions into the user project's Custom Widget resource.
+
+If the import is not already available, you can add it manually as follows:
+
+```js
+// Custom import
+import 'package:library_hybw3o/custom_code/actions/index.dart' as library_hybw3o_actions; // Assigning a custom alias to the import
+
+// Example Widget code
+class CustomDialog extends StatefulWidget {
+  const CustomDialog({
+    super.key,
+    this.width,
+    this.height,
+  });
+
+  final double? width;
+  final double? height;
+
+  @override
+  State<CustomDialog> createState() => _CustomDialogState();
+}
+
+class _CustomDialogState extends State<CustomDialog> {
+    @override
+    void initState() {
+        library_hybw3o_actions.getSchema(StateStruct()); // calling library custom action
+        super.initState();
+    }
+    @override
+        Widget build(BuildContext context) {
+            return Container(height: 50, width: 50);
+    }
+}
+```
+

docs/ff-concepts/adding-customization/custom-code.md

@@ -44,6 +44,12 @@ You can use the In-App Code Editor to view and edit custom code directly in the
 
 ![custom-code-common.png](imgs/custom-code-common.png)
 
+:::tip
+To leverage the capabilities that go beyond our in-app code editor, you can click on the **VS Code icon** to open and edit your custom code directly in VS Code using the FlutterFlow [**VSCode extension**](vscode-extension.md).
+
+![open-in-vscode](imgs/open-in-vscode.avif)
+:::
+
 :::warning[Using the In-App Code Editor on Desktop]
 Note that the desktop version of the In-App Code Editor is limited. We recommend using the Web editor
 or the **[VSCode Extension](vscode-extension.md)**.

docs/ff-concepts/adding-customization/imgs/open-in-vscode.avif

@@ -89,7 +89,7 @@ Cloud Functions Admin permissions are required for several FlutterFlow features
 
 3. Return to FlutterFlow, enter your Firebase Project ID in the dialog, and click Connect. A green checkmark will appear once the connection is successful.
 
-4. Under Config Files, choose **Autogenerate Files** and then select **Generate Files**.
+4. Under Config Files, choose **Generate Config Files** and then select **Generate Files**.
 
 :::info
 Do not close or refresh the page while the files are being generated.

docs/ff-integrations/firebase/connect-to-firebase-setup.md

@@ -263,6 +263,8 @@ The Developer Menu provides developers with access to tools such as code viewing
 _Connect GitHub Repo_, _Download Code_, and _Download APK_ features requires a [**paid plan**](https://flutterflow.io/pricing).
 :::
 
+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.
+
 ## 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

@@ -12,7 +12,7 @@ Welcome to the FlutterFlow Marketplace Creators' Hub! This section is designed t
 
 ### **Submitting an Item for Review**
 - Understand the [criteria](submission-criteria.md) we apply to items submitted to Marketplace.
-- Learn how to prepare and [submit](submit-item-for-reivew.md) your items to the Marketplace with our step-by-step guide.
+- Learn how to prepare and [submit](submit-item-for-review.md) your items to the Marketplace with our step-by-step guide.
 
 ### **Legal Guidelines for Creators**
 

docs/marketplace/creators-hub/creators-hub.md

@@ -1,5 +1,5 @@
 ---
-slug: submit-item-for-reivew
+slug: submit-item-for-review
 title: Submitting Item for Review
 description: Learn how to submit an item to the FlutterFlow Marketplace.
 tags: [MarketPlace, Creators Hub]

docs/marketplace/creators-hub/submit-item-for-reivew.md renamed to docs/marketplace/creators-hub/submit-item-for-review.md

@@ -14,7 +14,7 @@ FlutterFlow's Marketplace is a dynamic platform designed to enhance your app dev
 In the FlutterFlow Marketplace, you can [add and purchase](adding-purchasing-item.md) items to quickly integrate into your projects, significantly reducing development time. The Marketplace is curated to ensure high-quality resources, with contributions from a diverse community of developers and designers.
 
 ## Becoming a Contributor
-If you're interested in contributing to the Marketplace, the [creator hub](creators-hub/creators-hub.md) is your starting point. Here, you can learn about [submitting items for review](creators-hub/submit-item-for-reivew.md), [submission criteria](creators-hub/submission-criteria.md), and [legal guidelines](creators-hub/legal-guidelines-for-creators.md) for creators. Ensuring your submissions adhere to these guidelines helps maintain the quality and integrity of the Marketplace.
+If you're interested in contributing to the Marketplace, the [creator hub](creators-hub/creators-hub.md) is your starting point. Here, you can learn about [submitting items for review](creators-hub/submit-item-for-review.md), [submission criteria](creators-hub/submission-criteria.md), and [legal guidelines](creators-hub/legal-guidelines-for-creators.md) for creators. Ensuring your submissions adhere to these guidelines helps maintain the quality and integrity of the Marketplace.
 
 ## Protecting Your Work
 Understanding and navigating [copyright (DMCA process)](creators-hub/copyright-dmca-process.md) is crucial for both creators and users. The Marketplace provides clear instructions on how to handle copyright issues, ensuring that intellectual property rights are respected.

docs/marketplace/index.md

@@ -31,7 +31,7 @@ A list of all the available global properties is as follows:
 
 - **Current Time**: Fetches the current date and time. Explore [custom formatting](#current-time) options to tailor the DateTime display to your needs.
 
-- **Current Device Location:** Obtains he user's current location, ideal for updating their position on Google Maps or storing it in a backend database. [Check out examples](#current-device-location) on how to retrieve and save the current device location.
+- **Current Device Location:** Returns the user's current location, ideal for updating their position on Google Maps or storing it in a backend database. [Check out examples](#current-device-location) on how to retrieve and save the current device location.
 
 - **Current Route Path**: Provides the route name of the currently active or visible page in your app. This property is especially helpful in scenarios where you want to adjust or block specific actions if the active page isn't the one you expect. For example, if you launch the app through a push notification, the home page might still run in the background, even if the notification directs you to a different page. Using this property, you can prevent unnecessary action triggers, such as On Page Load from the home page. See details on avoiding [this issue](https://github.com/FlutterFlow/flutterflow-issues/issues/2765#issuecomment-2598915946).
 - **Fraction of Screen Width:** Determines the proportional width of the device's screen.
@@ -45,7 +45,7 @@ A list of all the available global properties is as follows:
 - **Is Dark Mode:** Checks if the app's current theme mode is set to dark.
 - **Is Light Mode:** Checks if the app's current theme mode is set to light.
 - **Is On-Screen Keyboard Visible:** Checks if the on-screen or soft keyboard is visible. This is helpful in making UI adjustments if keyboard is visible on screen. See a [quick example](#is-on-screen-keyboard-visible). 
-- **Current Environment**: Gives you the current [development environment](../../testing-deployment-publishing/development-environments/development-environments.md) value.
+- **Current Environment**: Returns the current [development environment](../../testing-deployment-publishing/development-environments/development-environments.md) value.
 
 :::tip[Generated Code]
 Learn more about the [**Generated Code**](../../generated-code/state-mgmt-gen-code.md#global-state) behind Global Properties.

docs/resources/data-representation/global-properties.md

@@ -202,6 +202,10 @@ It's important to note that these resources show up where they are instantiated.
 
 This ensures that only relevant resources are shown where they are needed, optimizing performance and discoverability.
 
+:::tip[Access Library Components in Custom Code]
+When your project includes a library dependency, you can use its components—such as Library App State, Library Values, Library Custom Code resources, etc.—in your custom code. Explore the **[Common Custom Code Examples](../../ff-concepts/adding-customization/common-examples.md#access-library-components-in-custom-code)** directory for reference.
+:::
+
 ![access-library-resources.avif](imgs/access-library-resources.avif)
 
 ## Library Versioning