Flutter Deep Linking Using Branch I/O
Let’s mobile apps support with deep links that power referral systems.
Flutter SDK offers a lot of benefits and opportunities for developers. Entrepreneurs or startup owners can also make the most of this robust platform and grab the opportunities through the innovative approach of a Flutter app development.
Recently, while diving into one of my project tasks that stands for Branch IO Integration in Flutter app, I went through the Branch IO dashboard. After doing some research, I made my mind to publish an article on how to integrate Branch IO in Flutter.
Branch IO is useful for build high quality user experiences with best-in-class deep linking.
Here we are using the Branch IO feature to perform an operation on the deep link.
Lets first make a note of the tasks:
- Develop using Android Studio Or Visual Studio Code as an Editor.
- Use a flutter_branch_sdk plugin.
- Create an Account on Branch Io Dashboard.
- Android Platform Configuration in Branch IO dashboard
- iOS Platform Configuration in Branch IO dashboard
- Integrate Branch SDK to your platform-specific code.
- Generates a deep link within your app.
- Initialize branch and read generated deep link.
Let’s start integration and achieve your milestone…….
Create a Flutter Project in your suitable IDE which supports flutter development.
Create Account on Branch Io
Go to Branch IO Website then perform Sign up and Sign In.
After Creating Branch IO Account Go to Dashboard.
Go to the configuration tab from the drawer then do the following…..
Android Platform Integration In Branch IO Dashboard :
- Android URI Scheme: <Your App Name>://
- Just Enable I have an Android App.
- Click on Google Play Search (Search your app if already live otherwise set as Google).
- Please add your SHA 256 Cert Fingerprints (used to build the debug and the production version of your APK file before it gets deployed) after Enable App Links.
Default URL : https://0abc13.test-app.link
Android URI Scheme : deeplink://
Package Name : com.company.projectname
SHA256 Cert Fingerprints : You can get it from gradle section of android studio.
iOS Platform Integration In Branch IO Dashboard :
For iOS, you have to follow some procedure before integration. You have to create your app in your Apple Developer Account and generate certificates, identifiers, and profiles according to your app needs.
iOS App ID
- iOS URI Scheme : <Your App Name>://
- Just Enable I have an iOS App.
- Click on Apple Store Search (Search your app if already live otherwise set as Google).
- Enable Universal Links.
- Add Bundle Identifiers according to your flavors.
- Add Apple App Prefix.
See the below image to understand better (iOS Branch IO configuration)
iOS URI Scheme : deeplink://
Bundle Identifiers : com.company.projectname
Apple App Prefix : Paste your App Id from apple developer console.
Hurrah… You have successfully completed the Branch IO Dashboard configuration for both platforms.
When you go to Account Settings then you can see Branch Key, Branch Secret Key, App Name, App ID. It will be useful in the future.
As for now, the Branch IO Dashboard setup is done.
Integrate Branch SDK to our Platform Specific Code.
Let’s integrate flutter branch sdk to our flutter platform.
You can find plugin here flutter_branch_sdk.
You need below two configurations to go further in integration.
Integrate Branch IO SDK Into Android Platform :
Note : The Single Task mode instantiates the Main Activity only if it does not exist in the Activity Stack.
If the Activity exists in the background then every subsequent intent to the Activity brings it to the foreground.
Please add the configuration in the activity tag of
then put the below configuration in the application tag.
Note : Don’t forget to change value of
falsebefore going live.
Integrate Branch IO SDK Into iOS Platform :
Follow the below steps one by one :
Configure bundle identifier
Just open your project in Xcode and click on general and set this bundle(Make sure Bundle Id matches your Branch Dashboard) in bundle identifier.
Configure associated domains
Just go to the Capabilities section in Xcode and paste link-domain and alternate link-domain in the associated domain.
This file is configured automatically after completing all steps in the Capabilities tab of Xcode)
Confirm App Prefix
branch_universal_link_domainswith your live key domain
branch_keywith your current Branch key
- Add URI scheme as
Or else you can use XCode to set the above configuration also. Congratulation you have done the platform configuration part also.
So now we have to check or validate our configuration has done in the right way or not. So now we are going to start our most important task in the development of the flutter side. let’s check it using the below line in your
main.dart (you can see the below file as per git repository)file.
After executing the above line you will get the below lines in your terminal.
Note : Make sure to remove
FlutterBranchSdk.validateSDKIntegration()in your production build.
Let's implement the dart part to achieve real branch io integration with flutter. for this, we have to generate a link for branch Io from the front-end or back-end as per your project requirement.
For now, we are going to generate a branch IO link from the front-end, so let’s generate it.
So we are done with generating the Branch IO link and now we need to listen to this branch IO link through the front-end.
When the user taps on the generated link which he has received in the email then he will redirect to the app.
Then after coming to that screen our listener listens to this dynamic link and gives us data that you want for your further progress. Please show these below images in which the toast message indicates that we have successfully get data from the generated branch io-link.
Let's understand the whole process of integration through images and video.
When you press on centered button it starts generating a branch io-link and you will get a toast message with the link.
You can check your email regarding the branch Io link (use backend for sending mails for the same).
When you will click on this link then you will get the below result and getting data of that particular branch io-link in (red font).
You can see the full video from start to end.
Note : It is working well in all scenarios (Background, Kill).
Yes, we did it. Hurray…..!
We have done all the Implementation and Branch Io integration using the branch io testing section. If you want to do implement for production purposes then you have to change the value of test mode from true to false. So after that, you can go ahead with production.
So, that’s it for Flutter Deep Linking Using Branch I/O.
You can find the whole project with clean architecture on Git Repository :