Flutter Deep Linking Using Branch I/O

Let’s mobile apps support with deep links that power referral systems.

Source

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:

1. Develop using Android Studio Or Visual Studio Code as an Editor.
2. Use a flutter_branch_sdk plugin.
3. Create an Account on Branch Io Dashboard.
4. Android Platform Configuration in Branch IO dashboard
5. iOS Platform Configuration in Branch IO dashboard
6. Integrate Branch SDK to your platform-specific code.
7. Generates a deep link within your app.
8. Initialize branch and read generated deep link.

Photo by Braden Collum on Unsplash

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.

Source

Go to the configuration tab from the drawer then do the following…..

Android Platform Integration In Branch IO Dashboard :

1. Android URI Scheme: <Your App Name>://
2. Just Enable I have an Android App.
3. Click on Google Play Search (Search your app if already live otherwise set as Google).
4. 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.

Source

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.

Certificates

Source

Identifiers

Source

Profiles

Source

iOS App ID

Source

1. iOS URI Scheme : <Your App Name>://
2. Just Enable I have an iOS App.
3. Click on Apple Store Search (Search your app if already live otherwise set as Google).
4. Enable Universal Links.
5. Add Bundle Identifiers according to your flavors.
6. Add Apple App Prefix.

See the below image to understand better (iOS Branch IO configuration)

Source

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.

Source

As for now, the Branch IO Dashboard setup is done.

Photo by Adi Goldstein on Unsplash

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.

Source

Source

Integrate Branch IO SDK Into Android Platform :

Replace the following values from your Branch Dashboard App Settings and Link Settings and modify AndroidManifest.xml as per the above two images.

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 AndroidManifest.xml file.

then put the below configuration in the application tag.

Note : Don’t forget to change value of io.branch.sdk.TestMode to false before 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.

Source

Configure associated domains

Just go to the Capabilities section in Xcode and paste link-domain and alternate link-domain in the associated domain.

Source

Configure entitlements

This file is configured automatically after completing all steps in the Capabilities tab of Xcode)

Source

Confirm App Prefix

Source

Configure Info.plist

1. Add branch_universal_link_domains with your live key domain
2. Add branch_key with your current Branch key
3. Add URI scheme as URL Types -> Item 0 -> URL Schemes

Source

Or else you can use XCode to set the above configuration also. Congratulation you have done the platform configuration part also.

Source

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.

Home Screen

When you press on centered button it starts generating a branch io-link and you will get a toast message with the link.

Branch Io Link With Toast

You can check your email regarding the branch Io link (use backend for sending mails for the same).

Email For Branch Io link

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).

Date from Branch Io

You can see the full video from start to end.

Note : It is working well in all scenarios (Background, Kill).

Full Video

Yes, we did it. Hurray…..!

Conclusion

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 :

JaimilPatel/FlutterDeepLink

https://www.twitter.com/FlutterComm