Skip to content

Commit be9ab61

Browse files
Add branch library documentation (#340)
* Add branch library documentation. * Apply suggestions from code review Co-authored-by: pinkeshmars <[email protected]> * add comma after e.g * fix image --------- Co-authored-by: pinkeshmars <[email protected]>
1 parent e57fcf7 commit be9ab61

File tree

3 files changed

+294
-6
lines changed

3 files changed

+294
-6
lines changed

docs/ff-concepts/navigation-routing/deep-dynamic-linking.md

Lines changed: 293 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ keywords: [FlutterFlow, Deep Linking, Dynamic Linking, Concepts]
1010
# Deep & Dynamic Linking
1111

1212
:::danger[Support for Dynamic Links]
13-
On August 25th, 2025, Firebase Dynamic Links will be shut down. Read more about the [**announcement here**](https://firebase.google.com/support/dynamic-links-faq). It's recommended to start exploring alternative solutions like [**Branch.io**](#dynamic-links-with-branchio) for link management and deep linking.
13+
On August 25th, 2025, Firebase Dynamic Links will be shut down. Read more about the [**announcement here**](https://firebase.google.com/support/dynamic-links-faq). It's recommended to start exploring alternative solutions like [**Branch.io**](#deep-links-with-branchio) for link management and deep linking.
1414
:::
1515

1616
Adding deep and dynamic linking allows you to share a special type of link that takes the user right
@@ -34,8 +34,8 @@ requires authentication, you'll see a login page. After successful login, you ca
3434
shared with you.
3535

3636
The best thing to note here is that even if the app has a different flow for accessing the page
37-
content (e.g. Home Page -> All Posts -> Single Post), you can bypass the flow and directly open a
38-
specific page (e.g. Single Post).
37+
content (e.g., Home Page -> All Posts -> Single Post), you can bypass the flow and directly open a
38+
specific page (e.g., Single Post).
3939

4040
## Deep Link
4141

@@ -330,7 +330,7 @@ To share the dynamic link of the page:
330330

331331
1. Select the page that you would like to open via a deep link.
332332

333-
2. Select any widget (e.g. share button) from the widget tree or the canvas area.
333+
2. Select any widget (e.g., share button) from the widget tree or the canvas area.
334334

335335
3. First, add the action
336336
to [Generate Current Page Link](generate-current-page-link.md#defining-generate-current-page-link-action).
@@ -402,7 +402,7 @@ To pass custom data with the link, you need to have the following:
402402

403403
That's all you need to pass custom data with a **Deep Link** or **Dynamic Link**.
404404

405-
## Dynamic Links with Branch.io
405+
## Deep Links with Branch.io
406406

407407
Since **Firebase Dynamic Links** have been deprecated and can no longer be used for new Firebase projects, we can integrate a powerful alternative: **[Branch.io](https://branch.io/)** — a cross-platform solution for deep linking and deferred linking.
408408

@@ -674,3 +674,291 @@ Be sure to test both fresh installs (deferred deep links) and existing app sessi
674674
For a complete walkthrough, check out the tutorial video:
675675
<div class="video-container"><iframe src="https://www.youtube.com/embed/nEBot6-zhfY?si=y-flWx8zoGH8mgjM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
676676
:::
677+
678+
679+
## Branch Deeplinking Library
680+
681+
If you’d prefer not to integrate Branch.io from scratch, we have introduced the **Branch Deep Linking Library** that you can import from the Marketplace completely free.
682+
683+
This library sets up everything you need for routing users into your app using Branch’s smart links — with native configuration, link handling, and deep link helpers already wired in.
684+
685+
### Install Library
686+
687+
To install the Branch Deep Linking Library, open the FlutterFlow Marketplace, search for the library, and click **+ Add for Free**.
688+
689+
:::tip[marketplace]
690+
You can find the [**Library here**](https://marketplace.flutterflow.io/item/oAco1HzQHxtOVE1ssTcC).
691+
:::
692+
693+
This installs the library into your FlutterFlow account, and you can reuse it across any number of projects.
694+
695+
![branch-library-install.png](imgs/branch-library-install.png)
696+
697+
To add it to a specific project, go to **Settings > Project Dependencies**, click **Add Library**, and search for Branch.
698+
699+
### Branch Setup
700+
701+
You’ll need two values from your Branch dashboard:
702+
703+
- **Branch Live Key** – your production API key from the Branch dashboard.
704+
- **Custom Domain** – your configured link domain (e.g., yourapp.app.link)
705+
This is the domain used to generate and handle smart links for your app.
706+
707+
We recommend storing these values in Environment Variables so you can:
708+
- Manage them per environment (e.g., dev vs prod Branch keys).
709+
- Easily assign them to the library’s configuration when adding it to a project.
710+
711+
**Adding Library Values**
712+
713+
When you add the Branch Deep Linking Library to your project, it will prompt you to provide three values:
714+
715+
- `branchApiKey`
716+
- `branchHostUrl`
717+
- `isTestMode`
718+
719+
Use the environment variables you created to populate these values.
720+
721+
:::info
722+
`isTestMode` should be set to false when running your app in production.
723+
:::
724+
725+
Here’s a quick demo to show how to configure those values inside your library panel.
726+
727+
<div style={{
728+
position: 'relative',
729+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
730+
height: 0,
731+
width: '100%'
732+
}}>
733+
<iframe
734+
src="https://demo.arcade.software/AWUZbgiNKpKgwKjxAM17?embed&show_copy_link=true"
735+
title=""
736+
style={{
737+
position: 'absolute',
738+
top: 0,
739+
left: 0,
740+
width: '100%',
741+
height: '100%',
742+
colorScheme: 'light'
743+
}}
744+
frameborder="0"
745+
loading="lazy"
746+
webkitAllowFullScreen
747+
mozAllowFullScreen
748+
allowFullScreen
749+
allow="clipboard-write">
750+
</iframe>
751+
</div>
752+
753+
<p></p>
754+
755+
**Initialize the Branch SDK**
756+
757+
Open your `main.dart` file in FlutterFlow and add the `initBranch` custom action under the **Final Actions** section. This ensures the **Branch SDK** is initialized when your app launches.
758+
759+
760+
### Handle Branch Deeplink [Custom Action]
761+
762+
To receive and act on deep link data, go to your **Entry Page** or **Logged-In Page** and add the `handleBranchDeeplink` action as the first action in the page flow.
763+
764+
This `handleBranchDeeplink` action listens for incoming Branch Deeplinks and handles routing logic. This action should be added to your Entry Page or Logged-In Page under the **onPageLoad** trigger. It initializes a stream listener that waits
765+
for Branch links to be opened (either deferred or direct).
766+
767+
When a link is received, the `onLinkOpened` callback is triggered with
768+
the link data, allowing you to perform custom navigation or logic. You can perform your navigation logic in this action callback.
769+
770+
<div style={{
771+
position: 'relative',
772+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
773+
height: 0,
774+
width: '100%'
775+
}}>
776+
<iframe
777+
src="https://demo.arcade.software/aRZju3GUJAzaqAUZs87G?embed&show_copy_link=true"
778+
title=""
779+
style={{
780+
position: 'absolute',
781+
top: 0,
782+
left: 0,
783+
width: '100%',
784+
height: '100%',
785+
colorScheme: 'light'
786+
}}
787+
frameborder="0"
788+
loading="lazy"
789+
webkitAllowFullScreen
790+
mozAllowFullScreen
791+
allowFullScreen
792+
allow="clipboard-write">
793+
</iframe>
794+
</div>
795+
796+
<p></p>
797+
798+
**`linkData` Action Parameter**
799+
800+
The `handleBranchDeeplink` action receives a `linkData` object that contains all the metadata sent with the link. The `linkData` parameter is a Map containing useful information from the Branch link:
801+
802+
- **`$canonical_identifier`:** The original route path used when the link was generated (e.g., `/imageDetails/:id`).
803+
804+
- **`~referring_link`:** The full Branch URL that was clicked.
805+
806+
- **`page`:** The target page or screen the link is meant to open (e.g., paywall). This is a custom parameter set by the user when generating the link.
807+
808+
- Any custom parameters added during link creation (e.g., `campaign`, `productId`, `referrer`, etc.)
809+
810+
This lets you write flexible, conditional navigation logic based on what was shared.
811+
812+
813+
<div style={{
814+
position: 'relative',
815+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
816+
height: 0,
817+
width: '100%'
818+
}}>
819+
<iframe
820+
src="https://demo.arcade.software/FRDKejqwWVAmS27RJeQH?embed&show_copy_link=true"
821+
title=""
822+
style={{
823+
position: 'absolute',
824+
top: 0,
825+
left: 0,
826+
width: '100%',
827+
height: '100%',
828+
colorScheme: 'light'
829+
}}
830+
frameborder="0"
831+
loading="lazy"
832+
webkitAllowFullScreen
833+
mozAllowFullScreen
834+
allowFullScreen
835+
allow="clipboard-write">
836+
</iframe>
837+
</div>
838+
839+
<p></p>
840+
841+
842+
843+
844+
Use the link data from this callback to:
845+
- Navigate to a page.
846+
- Show a bottom sheet.
847+
- Load content from Firestore using a referenced ID.
848+
849+
850+
851+
852+
853+
854+
### Generate Link [Custom Action]
855+
856+
857+
The `generateLink` action allows you to create a custom Branch Smart Link directly from your FlutterFlow app.
858+
859+
This is especially useful when you want to let users:
860+
- Share app content (like a post, product, or image).
861+
- Invite others with referral codes.
862+
- Trigger deep links that take recipients to specific app screens.
863+
864+
The action accepts the following parameters:
865+
866+
- **`canonicalIdentifier`** – A unique path for the content (e.g., `/imageDetails/:id`). This becomes the key reference used when routing the user back into the app.
867+
868+
- **`title`** – The link's title (used in social previews or analytics).
869+
870+
- **`description`** – (Optional) A short description of the content.
871+
872+
- **`metadata`** – A dynamic map of custom parameters to include with the link
873+
(e.g., page: "imageDetails", imageRef: "abc123", etc.)
874+
875+
- **`linkProperties`** – A dynamic map for configuring how the link behaves
876+
(e.g., set the `feature`, `channel`, `campaign`, or `stage` for analytics).
877+
878+
### Branch Helper Functions
879+
880+
These functions help you safely work with deep link data, extract values, and conditionally navigate based on link metadata.
881+
882+
- **`isTargetingPage(linkData, targetPage)`** - Checks whether the page value in the link data matches a specific screen name. The `page` parameter is set by the user when generating the link from Branch dashboard or FlutterFlow.
883+
884+
- **`getCanonicalIdentifierFromLink(linkData)`** - Returns the canonical path (e.g., `/imageDetails/abc123`) that was originally attached to the smart link. Useful for extracting the base route or content reference associated with the shared link.
885+
886+
- **`getReferringLinkFromLink(linkData)`** - Retrieves the full Branch smart link URL from the data (typically under the `~referring_link` key). Useful for tracking, analytics, or verifying the source of the link.
887+
888+
- **`getLastPathSegmentFromMap(linkData, key)`** - Extracts the last path segment (e.g., `abc123`) from a URI stored inside a link data field (e.g., `/imageDetails/abc123`). Useful for extracting the ID from a link.
889+
890+
- **`getLinkValue(linkData, key)`** - Safely retrieves any single value from the link data Map. Returns null if not found. (e.g., retrieving `showPromo` attribute value from the `linkData`).
891+
892+
- **`createLinkProperties(...)`** - Returns a Branch Link Properties map used when generating a smart link. You can define values like: feature, campaign, stage, channel, alias or tags or custom fallback URLs. Useful for organizing and tracking generated links for marketing or referrals.
893+
894+
895+
896+
### DreamBrush Link Generation Example
897+
898+
In the DreamBrush app, we can use `generateLink` after a user finishes generating an image.
899+
The link could include:
900+
- **page**: Current Page Route that is `/imageDetails/:imageRef`.
901+
- **title**: "Check out my AI image!"
902+
903+
This link can then be shared via WhatsApp, email, or social media — and when clicked, it brings the recipient directly to that content inside the app.
904+
905+
Here's a quick example of generating a Branch link from a page that uses a Firebase Document ID as a route parameter.
906+
907+
<div style={{
908+
position: 'relative',
909+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
910+
height: 0,
911+
width: '100%'
912+
}}>
913+
<iframe
914+
src="https://demo.arcade.software/SELEpnhCryYrZD7KokAl?embed&show_copy_link=true"
915+
title=""
916+
style={{
917+
position: 'absolute',
918+
top: 0,
919+
left: 0,
920+
width: '100%',
921+
height: '100%',
922+
colorScheme: 'light'
923+
}}
924+
frameborder="0"
925+
loading="lazy"
926+
webkitAllowFullScreen
927+
mozAllowFullScreen
928+
allowFullScreen
929+
allow="clipboard-write">
930+
</iframe>
931+
</div>
932+
933+
<p>
934+
</p>
935+
936+
Now in your `handleBranchDeeplink` action callback, add the additional logic to handle such custom links:
937+
938+
<div style={{
939+
position: 'relative',
940+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
941+
height: 0,
942+
width: '100%'
943+
}}>
944+
<iframe
945+
src="https://demo.arcade.software/kZ7uvnohpGIER3ZTxPR8?embed&show_copy_link=true"
946+
title=""
947+
style={{
948+
position: 'absolute',
949+
top: 0,
950+
left: 0,
951+
width: '100%',
952+
height: '100%',
953+
colorScheme: 'light'
954+
}}
955+
frameborder="0"
956+
loading="lazy"
957+
webkitAllowFullScreen
958+
mozAllowFullScreen
959+
allowFullScreen
960+
allow="clipboard-write">
961+
</iframe>
962+
</div>
963+
964+

docs/ff-concepts/navigation-routing/generate-current-page-link.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Using this action, you can generate the dynamic link for the current page.
1818

1919
:::info[Prerequisites]
2020

21-
Before adding this action, ensure you have performed all the steps to [**add the dynamic link**](deep-dynamic-linking.md#dynamic-links-with-branchio).
21+
Before adding this action, ensure you have performed all the steps to [**add the dynamic link**](deep-dynamic-linking.md#deep-links-with-branchio).
2222
:::
2323

2424
## Defining Generate Current Page Link action
295 KB
Loading

0 commit comments

Comments
 (0)