Skip to content

Commit 03d6d1a

Browse files
authored
Merge pull request #244 from FlutterFlow/feature/add-unpublished-packages
Added info on Using Unpublished Packages
2 parents d2c3536 + f710260 commit 03d6d1a

File tree

1 file changed

+95
-0
lines changed

1 file changed

+95
-0
lines changed

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -297,6 +297,101 @@ one.
297297

298298
When adding a pubspec dependency to your custom code in FlutterFlow, you’ll need two pieces of [information](#setup-code): the Package name with its Version number and the Import statement.
299299

300+
### Using Unpublished or Private Packages
301+
FlutterFlow supports the use of unpublished packages, which allows you to integrate packages that are not yet available on **pub.dev**. This capability is particularly useful when working with custom, forked, or private packages hosted on public or private repositories. By leveraging this, you can enhance your app’s functionality with customized or proprietary libraries tailored to your specific needs.
302+
303+
:::info[Possible Use Cases]
304+
305+
- **Using a Different Branch of a Package**: When you need to test or use features that are only available on a specific branch of a package.
306+
- **Forked Version for Customizing Features**: When you need to fork a package to customize its functionality or fix issues that the original maintainer hasn’t addressed.
307+
- **Private Packages for Internal Use**: Companies or enterprises may have internal Flutter libraries that they want to use in their FlutterFlow app but cannot publish publicly due to confidentiality or proprietary restrictions.
308+
309+
:::
310+
311+
#### Add Packages from Public Repositories
312+
313+
For packages hosted on public repositories (e.g., GitHub), you can add them to your FlutterFlow project by specifying the repository URL in the following format.
314+
315+
```js
316+
package_name:
317+
git:
318+
url: https://github.com/username/repository_name.git
319+
```
320+
321+
You can also fine-tune the dependency by using additional parameters like `ref` and `path` in the given format. Here are some examples:
322+
323+
- **To use a specific branch** (e.g., `development`):
324+
325+
```js
326+
package_name:
327+
git:
328+
url: https://github.com/username/repository_name.git
329+
ref: development
330+
```
331+
332+
- **To use from a specific commit**:
333+
334+
```js
335+
dependencies:
336+
package_name:
337+
git:
338+
url: https://github.com/username/repository_name.git
339+
ref: a1b2c3d4
340+
341+
```
342+
343+
- **To use package located in a subdirectory of the repository**:
344+
345+
```js
346+
package_name:
347+
git:
348+
url: https://github.com/username/repository_name.git
349+
path: packages/subpackage_name
350+
```
351+
352+
Here’s exactly how you do it:
353+
354+
355+
<div style={{
356+
position: 'relative',
357+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
358+
height: 0,
359+
width: '100%'}}>
360+
<iframe
361+
src="https://demo.arcade.software/CgLCKJzdiCuaxMF04pg6?embed&show_copy_link=true"
362+
title=""
363+
style={{
364+
position: 'absolute',
365+
top: 0,
366+
left: 0,
367+
width: '100%',
368+
height: '100%',
369+
colorScheme: 'light'
370+
}}
371+
frameborder="0"
372+
loading="lazy"
373+
webkitAllowFullScreen
374+
mozAllowFullScreen
375+
allowFullScreen
376+
allow="clipboard-write">
377+
</iframe>
378+
</div>
379+
<p></p>
380+
381+
#### Add Packages from Private Repositories
382+
383+
For packages hosted in private repositories, you’ll need to authenticate access. This can be done using HTTPS with a personal access token.
384+
385+
For GitHub, you can go to your GitHub account’s settings and [generate a token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-personal-access-token-classic) with the necessary permissions and use it in the following format. You can also create and use a [fine-grained access token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens#creating-a-fine-grained-personal-access-token) that only has certain permissions.
386+
387+
```js
388+
package_name:
389+
git:
390+
url: https://<username>:<personal-access-token>@github.com/username/private_repo.git
391+
```
392+
393+
Replace `<username>` with your GitHub username and `<personal-access-token>` with the generated token.
394+
300395
### Setup Code
301396
To configure your custom code with the package, copy and paste the following items from the package's pub.dev page:
302397

0 commit comments

Comments
 (0)