Explore Deep Linking in Flutter
Consider you have a web app or website, and two beautiful apps (Android and iOS) for making your product accessible to your customers. Now for some reason, the analytics shows the users are accessing the product information majorly via the browsers not just on the desktop, but also on the mobile.
Very often when a web app/ site is not mobile browser optimized, the user might find it really hard to get the information he/she is seeking which can lead to user drop-offs.
Why not redirect the users to the play store or app store and make them use the apps which are made just to provide an optimized mobile experience?
Oh yes! Why not?
But this can lead to another problem where the user downloads the app, but now he/she has to manually navigate to the products they were once interested in while hitting the URL on the mobile browser. This again breaks user experience which needs to be addressed.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
URL’s
Assuming the deeplinkingdemoapp.page.link has an Android and an iOS app, the link should redirect you to one of these apps for a better user experience. If the app is already available on your device, there are high chances of you landing on the equivalent app screen if the concept of deep links (which is quite popular already) is implemented inside the apps.
But what happens if the app is not installed?
With Dynamic Links, users get the best available experience for the platform they open the link on. If the link is opened in iOS or Android browsers, it can be taken directly to the linked content in your native app. If a user opens the same link on a desktop browser, they will be taken to the equivalent content on your website or web app.
If a user opens a Dynamic Link on iOS or Android and doesn’t have the app installed, the user can be prompted to install it; then, after installation, your app starts and can access the link shared that was shared.
Dynamic links provide a way for deep links to survive the installation step in a way that the user never loses the context.
How are Dynamic links different from deep links?
A Dynamic Link is a deep link into your app that works whether or not your app is installed. It carries the following information:
- Project information is available inside the Firebase Console.
- The package name for the apps that it needs to target.
- A fallback Url for redirection in those extreme cases where the app could not be installed.
- And obviously, the deep link that the app should utilize to reach the web equivalent screen.
To add dynamic link support for the apps, we need to add our project in Firebase. This can be done directly from Android Studio:
Tools → Firebase
On the left side, the Firebase Assistant panel click on
Dynamic link → Add Dynamic Links
- Adding intent filters in AndroidManifest.xml for the activity which will handle the deep links as:
<activity android:name=".MainActivity">
<intent-filter android:autoVerify="true">
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
<data android:host="example.com/link" android:scheme="http"/>
<data android:host="example.com/link" android:scheme="https"/>
<data
android:host="deeplinkingdemoapp.page.link"
android:scheme="https"/>
</intent-filter>
</activity>> Now upon successful completion of the above steps, we can see our project in the Firebase console.
Firebase Console → Select your project → Dynamic links (Left side panel, under Grow) →Get Started
> Now click on the “New Dynamic link” button on the new page which will open:
- Add the deep link URL (URL for which the transition from the web page to the application is needed) as per your requirement. For our example, it will be: https://deeplinkingdemoapp.page.link/GoogleMapScreen
2. Provide app pieces of information to define link behavior for iOS and Android apps. The instructions for linking both Android and iOS apps are pretty much self-explanatory.
3. Click on create.
Now as we see there is another URL visible in the above screenshot :
This is the dynamic link created which has all the information mentioned above, for it to be able to link (https://deeplinkingdemoapp.page.link/GoogleMapScreen) to our apps whether it is installed or not whenever the user hits the dynamic link on the mobile browsers.
Now the dynamic link has enough information about the app and it can open the app (if installed) or take the user to the play store or app store for app installation. And once the app is launched the deep link which can be retrieved from the dynamic link can be processed.
How to get deep link data from a dynamic link?
_handleDeepLinks() async {
final PendingDynamicLinkData? initialLink =
await FirebaseDynamicLinks.instance.getInitialLink();
if (initialLink != null) {
final Uri deepLink = initialLink.link;
print('Deeplinks uri:${deepLink.path}');
if (deepLink.path == '/ShowApiDataScreen') {
AppRoute.nextPage(
context,
ShowApiDataScreen(
deepLinkPath: '${deepLink.path}:Deep Link',
));
} else if (deepLink.path == '/GoogleMapScreen') {
AppRoute.nextPage(
context,
GoogleMapScreen(
deepLinkPath: '${deepLink.path}:Deep Link',
));
} else if (deepLink.path == '/UserSignUpScreen') {
AppRoute.nextPage(
context,
UserSignUpScreen(
deeplinkPath: '${deepLink.path}:Deep Link',
));
}
}
}pendingDynamicLinkData will be https://deeplinkingdemoapp.page.link/GoogleMapScreen and pendingDynamicLinkData.getLink() returns the deep link (which will be https://deeplinkingdemoapp.page.link/GoogleMapScreen in our case) associated with the dynamic link received by the activity. Now, this deep link can be handled similarly to any other deep links that the app supports.
I hope this post will give you a basic idea of creating Firebase Dynamic Links and setting Firebase Dynamic Links SDK on Android.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of Deep Linking in Flutter With Firebase Dynamic Links:
GitHub – flutter-devs/deep_link_demo_app
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
