Merge branch 'main' of https://github.com/FlutterFlow/flutterflow-documentation into rewrite/notifications

Author: pinkeshmars

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

@@ -45,61 +45,28 @@ To solve this issue, you can create a design system outlining common design guid
 
 
 ## Adding Design System
+You can add a design system from the [Library](../../resources/projects/libraries.md) dependencies added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s).
 
-To create your own design system:
-
-1. Open the **Theme Settings > Design System**.
-2. Click **Create Design Library**.
-3. Enter the **Design Library Project Name**.
-4. Now you can configure the Colors, Typography & Icons, App Assets, NavBar & AppBar, and Theme Settings.
-5. To see how the app will look for the new design system, you can open it in preview mode (click the eye icon at the top right side).
-
-<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/7MfxqDLMHhtmen4DLo35?embed&show_copy_link=true"
-        title="Sharing a Project with a User"
-        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>
-
+:::tip[possible use cases]
 
-<p></p>
+- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience.
+- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design system library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation.
+- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular platform based design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments.
 
-6. To use the design system, open your project and navigate to **Theme Settings > Design System**.
-7. Click on the **No Design System Selected**.
-8. A pop will open displaying the list of the design systems, click on the newly created design system to add it to your project. **Note** that the design system created in [My Organization](../../resources/projects/how-to-collaborate-on-projects.md#sharing-a-project-with-an-organization) will also be available here.
+:::
 
-:::info
 
-After selecting the design system, you can't change the Colors, Typography, and Theme Widgets.
+To add a design system from a library, start by creating the design system in a new FlutterFlow project and [publishing it as a library](../../resources/projects/libraries.md#publishing-a-library). Next, [import](../../resources/projects/libraries.md#importing-a-library) that library into the project where you want to use the design system. Then, navigate to **Theme Settings > Design System** and click **No Design System Selected**. From the dropdown that appears, **Select a library** you’ve just imported to apply its design system to your project.
 
-:::
 
 <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/VW1EVzUHh70WhDEDz6n7?embed&show_copy_link=true"
-        title="Sharing a Project with a User"
+        src="https://demo.arcade.software/G3PekDcZNsWYrKoz3xnE?embed&show_copy_link=true"
+        title=""
         style={{
             position: 'absolute',
             top: 0,
@@ -118,7 +85,6 @@ After selecting the design system, you can't change the Colors, Typography, and
 </div>
 <p></p>
 
----
 
 ## Import Figma Theme
 
@@ -196,47 +162,6 @@ If you prefer watching a video tutorial, here is the guide for you:
 </div>
 <p></p>
 
-## Use Library as Design System
-
-You can also import a design system from the [Library](../../resources/projects/libraries.md) added to your project. A library can serve as a central repository for your design assets, components, and styles—effectively becoming a Design Library for your application(s).
-
-:::tip[possible use cases]
-
-- **Enterprise Applications:** Large organizations can develop a centralized design system as a library to ensure all internal applications maintain a cohesive look and feel, enhancing brand identity and user experience.
-- **Startup MVPs:** Startups can expedite the development of Minimum Viable Products (MVPs) by leveraging a pre-built design library like [**shadcn**](https://marketplace.flutterflow.io/item/cNlm0zWW1Nfq11cFXBmp), allowing them to focus on functionality and user validation.
-- **Cross-Platform Consistency:** Teams aiming to deploy apps across multiple platforms (iOS, Android, Web) can use a popular design system library to ensure uniformity in design, reducing the effort required for platform-specific adjustments.
-
-:::
-
-To add a design system from a library, first, ensure that you [add a library dependency to your project](../../resources/projects/libraries.md#importing-a-library). Then, navigate to **Theme Settings > Design System** and click on **No Design System Selected**. From the dropdown menu, **Select a library** you want to use.
-
-
-<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/G3PekDcZNsWYrKoz3xnE?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>
-
 ---
 
 ## Loading Indicators

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

@@ -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.