Merge pull request #459 from FlutterFlow/fix/update-add-dependency

Update Add Dependency

Author: pinkeshmars

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

@@ -67,7 +67,7 @@ Use this approach only when the component is a fixed element that does not chang
 :::
 
 In a **[Custom Widget](custom-widgets.md)**, you can integrate a previously built **[FlutterFlow Component](../../resources/ui/components/intro-components.md)** directly, saving you from recreating child content in code. For example, if you’re building a Custom Widget to display custom dialog boxes or bottom sheets using a package from 
-[pub.dev](custom-code.md#pubdev), you can simply return an existing Component created on the canvas, rather than coding a new one from scratch.
+[pub.dev](https://pub.dev/), you can simply return an existing Component created on the canvas, rather than coding a new one from scratch.
 
 :::tip[Imports]
 When referencing a Component class in your code, FlutterFlow will automatically add the necessary import statement.

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

@@ -263,14 +263,7 @@ In the generated code, descriptions are added as comments before the function de
 :::
 
 ## Adding a Pubspec Dependency
-To utilize community-built Flutter solutions in your FlutterFlow projects, you can add a "pubspec dependency". The **pubspec file** is the configuration file in Flutter projects that lists external packages or libraries, along with other project configurations.
 
-
-:::tip[Scope]
-You can only add a pubspec dependency to [**Custom Actions**](custom-actions.md) & [**Custom Widgets**](custom-widgets.md).
-:::
-
-####  Pub.dev
 [Pub.dev](https://pub.dev) is the official package repository for Dart and Flutter. It hosts a wide range of packages, libraries, and tools that developers can use to extend the functionality of their Dart and Flutter applications.
 
 :::info[Flutter Favorite Packages]
@@ -281,17 +274,33 @@ You can explore the Flutter Favorite packages on **[pub.dev's Flutter Favorites
 
 :::
 
-To add a pubspec dependency from [**pub.dev**](#pubdev), follow these steps:
-
-1. Create a new Custom Widget or Custom Action resource file, and be sure to give it a meaningful name.
+To add a pubspec dependency from pub.dev, go to **Settings and Integrations > Project Dependencies**, then open the **Custom Dependencies** tab. Click **Add Pub Dependency**, enter the **package name** and **version**, and click **Add** to include it in your project.
 
-2. [**Generate the boilerplate code**](#generate-boilerplate-code) and copy the basic widget or function structure into the code editor.
-
-3. Select the [**package you want from pub.dev**](#choosing-the-correct-package-from-pubdev) and review its details.
-
-4. Copy the package name and version, and add them to the Custom Code settings in FlutterFlow. Then, copy the import statement and add it to the list of imports in the Custom Code resource. You can also copy example code from the Example tab on the package’s pub.dev page and modify it as needed — see more in the **[Setup Code](#setup-code)** section.
-
-5. Click "Save & **[Compile Code](#compile-code)**" to apply the changes.
+<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/oRtb2mYzh1fdRcgeoQjZ?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>
 
 ### Choosing the correct package from pub.dev
 
@@ -376,14 +385,13 @@ dependencies:
 
 Here’s exactly how you do it:
 
-
 <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/CgLCKJzdiCuaxMF04pg6?embed&show_copy_link=true"
+        src="https://demo.arcade.software/KUqOcYwnQQ77uAcTA1dw?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -424,7 +432,7 @@ To configure your custom code with the package, copy and paste the following ite
 
 To use the dependency in your Custom Action or Custom Widget resource file, go to the package's pub.dev page and click the **Copy to Clipboard** icon next to the package name and version. Then, paste it into the **Pubspec Dependency** section (bottom right) of the FlutterFlow code editor. 
 
-![package-dependency-version-copy.png](imgs/package-dependency-version-copy.png)
+![package-dependency-version-copy](imgs/package-dependency-version-copy.avif)
 
 
 See **[example](#add-pubspec-dependency-to-custom-code-example-guide)** for more information.
@@ -469,7 +477,7 @@ FlutterFlow:
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/EAqWwTSfjumXzJ3xB6FX?embed&show_copy_link=true"
+        src="https://demo.arcade.software/e8vTIcA4EPju5XntsGiD?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -496,11 +504,9 @@ This example demonstrates how to add a [**pub.dev**](https://pub.dev) package to
 
 ## Manage Dependencies
 
-You can also add packages directly on the **Dependencies** page (at **Settings and Integrations > Project Setup > Project Dependencies**) and they will be reflected in your custom actions or custom widgets, because packages are managed at the project level.
-
-Additionally, when you create a new custom action or widget, all previously added custom dependencies will be listed on the **Pubspec** **Dependencies** list on the right side. This ensures that you can easily track all custom dependencies in the project, avoiding duplication or conflicts that could override each other or cause project errors.
+You can manage dependencies directly from **Settings and Integrations > Project Dependencies** > **Custom Dependencies** tab.
 
-If any project errors related to packages arise, they will be displayed in both the custom code editor and the Dependencies page. You can also update the version numbers of custom packages directly from the Dependencies page. This streamlined process helps maintain consistency and reduces potential issues related to custom packages.
+If version conflicts occur, warnings will appear in both the **Custom Dependencies** tab and the **Custom Code** editor. You can also bump package versions directly from the list, making it easier to resolve issues and keep dependencies consistent.
 
 <div style={{
     position: 'relative',

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

@@ -80,7 +80,7 @@ FlutterFlow:
     width: '100%'
 }}>
     <iframe 
-        src="https://demo.arcade.software/EAqWwTSfjumXzJ3xB6FX?embed&show_copy_link=true"
+        src="https://demo.arcade.software/e8vTIcA4EPju5XntsGiD?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',