You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Dynamic links can not be tested in Run Mode. Instead, you will need to test the links on a real
358
358
device/emulator.
@@ -400,4 +400,276 @@ To pass custom data with the link, you need to have the following:
400
400
</figure>
401
401
402
402
403
-
That's all you need to pass custom data with a **Deep Link** or **Dynamic Link**.
403
+
That's all you need to pass custom data with a **Deep Link** or **Dynamic Link**.
404
+
405
+
## Dynamic Links with Branch.io
406
+
407
+
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.
408
+
409
+
With Branch, we can support robust deep linking inside FlutterFlow apps without writing a backend from scratch.
410
+
411
+
412
+
### Branch.io Configuration
413
+
414
+
Start by setting up your project in the [Branch Dashboard](https://dashboard.branch.io). Once you’ve created a project:
415
+
416
+
**1. Note down your Branch Key**
417
+
418
+
Once you create a project, the first thing you’ll need to do is note down your **Branch Key**.
419
+
420
+
<div style={{
421
+
position: 'relative',
422
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
This key uniquely identifies your app and will be required later when setting up your FlutterFlow configuration.
450
+
451
+
**2. Set up Redirect Links**
452
+
453
+
In the Branch dashboard, you’ll find settings to define fallback URLs — these determine where users are sent if your app isn’t installed. Typically, you would redirect users to the App Store, Play Store, or a custom landing page.
454
+
455
+
<div style={{
456
+
position: 'relative',
457
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
Setting up redirects is important because it ensures that your links don't break and that users always have a seamless experience, even if they need to install the app first.
484
+
485
+
**3. Create a Smart Link**
486
+
487
+
After setting up your project and redirects, you can create a new Smart Link from the **Quick Links** tab in the Branch dashboard. Here you’ll be able to set a link title, alias, add analytics tags, and customize the social media preview (such as the image, title, and description).
488
+
489
+
Once saved, Branch will generate a Smart Link that’s ready to use across your campaigns and app flows.
490
+
491
+
Here's a short demo:
492
+
493
+
<div style={{
494
+
position: 'relative',
495
+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
To make **Branch Smart Links** work in your FlutterFlow app, you’ll need to update the native configuration files via the **Custom Code** tab in your project.
522
+
523
+
1. Firstly, create environment variables for:
524
+
-`branchHostUrl` (e.g. `brnch4.app.link`)
525
+
-`branchKey` (your Branch key)
526
+
527
+
528
+
Use `branchKey` for production and optionally `branchKeyTest` for dev environments. You can toggle modes through Branch dashboard (and also through FlutterFlow environment toggling).
529
+
530
+
2. Then navigate to:
531
+
FlutterFlow > Custom Code > Configuration Files.
532
+
533
+
534
+
**🔧 Android Setup**
535
+
536
+
1. Create two variables in `AndroidManifest.xml` file named `branchKey` and `branchHostUrl` and bind it to the environment variables we earlier created.
537
+
538
+
2. Add an `intent-filter` block to your **Main Activity** through the **Activity Tags hook**:
1. In `Info.plist`, add a new variable called `branchKey` and bind it to the environment variable.
561
+
562
+
2. In `Info.plist`, add:
563
+
564
+
```xml
565
+
<key>branch_key</key>
566
+
<string>{{branchKey}}</string>
567
+
```
568
+
3. In `Runner.entitlements`, add a new variable called `branchHostUrl` and bind it to the environment variable.
569
+
570
+
4. In `Runner.entitlements`, add:
571
+
572
+
```xml
573
+
<key>com.apple.developer.associated-domains</key>
574
+
<array>
575
+
<string>applinks:{{branchHostUrl}}</string>
576
+
</array>
577
+
```
578
+
Branch automatically hosts and serves the `apple-app-site-association` file needed for Universal Links. You don’t need to manually upload it to your domain.
579
+
580
+
581
+
**FlutterFlow Routing Setup**
582
+
583
+
FlutterFlow also defines a Custom URI Scheme (like `myapp://`) by default. Even if you're using Branch for web-based Smart Links, it’s a good idea to keep this in sync.
3. Under Custom URI Scheme, match the URI host/domain to what’s defined in your Branch dashboard (e.g. `brnch4://` or `dreambrush://`).
591
+
592
+
593
+
594
+
Even if your links mainly use `https://`, FlutterFlow's routing engine may still use the custom URI internally. Keeping this field consistent prevents confusion or route mismatches.
595
+
596
+
You're now ready to use Branch Smart Links in a FlutterFlow app with seamless deferred deep linking, App/Universal Link verification, and environment-based configuration.
597
+
598
+
### Integrate Flutter Branch SDK
599
+
To integrate Branch with your FlutterFlow app, you'll use the [`flutter_branch_sdk`](https://pub.dev/packages/flutter_branch_sdk) Dart package. This will allow your app to listen to Branch links and respond accordingly.
600
+
601
+
602
+
1. Go to your **FlutterFlow project > Pubspec Dependencies tab**, and add:
603
+
604
+
```js
605
+
flutter_branch_sdk:^5.0.1
606
+
```
607
+
(Use the latest version available from [pub.dev](https://pub.dev/packages/flutter_branch_sdk))
608
+
609
+
610
+
2. Create a Custom Action to initialize Branch SDK. This ensures the Branch session is set up when your app starts.
You can pass custom key-value pairs like `"page":"paywall"` or `"navigation_type":"bottom_sheet"` when creating the Branch link, and retrieve them here to decide which screen to navigate to in FlutterFlow.
674
+
675
+
Be sure to test both fresh installs (deferred deep links) and existing app sessions to confirm that your actions run as expected.
0 commit comments