From a2e2af6b2829d7e83533a791a91464a93e9bd383 Mon Sep 17 00:00:00 2001 From: Pinkesh Date: Mon, 18 Aug 2025 16:35:40 +0530 Subject: [PATCH 1/3] Update use custom dependency --- .../adding-customization/custom-code.md | 50 ++++++++++-------- .../adding-customization/custom-widgets.md | 2 +- .../imgs/package-dependency-version-copy.avif | Bin 0 -> 197538 bytes 3 files changed, 30 insertions(+), 22 deletions(-) create mode 100644 docs/ff-concepts/adding-customization/imgs/package-dependency-version-copy.avif diff --git a/docs/ff-concepts/adding-customization/custom-code.md b/docs/ff-concepts/adding-customization/custom-code.md index f7f69426..ad5e55de 100644 --- a/docs/ff-concepts/adding-customization/custom-code.md +++ b/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. +
+ +
+

### Choosing the correct package from pub.dev @@ -376,14 +385,13 @@ dependencies: Here’s exactly how you do it: -