Explore Deep Linking in Flutter
Think about having your own website or web application as well as two amazing applications (Android as well as iOS) to make your product available to customers. There’s a reason why the analytics show that users are accessing information about your product predominantly through browsers and not just on desktops as well as on mobile.
When a web application or website isn’t mobile friendly users may be unable to locate the information they are looking for, which could lead to users being dropped off.
Why not redirect users to the Play Store or app store, and let them use apps that are specifically designed to offer the best user experience on mobile devices?
This can cause another issue where the user downloads the application and then has to manually navigate to products that they previously were interested in by clicking the URL in the mobile browser. This can also affect user experience and needs to be fixed.
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. In the event that an app is installed on your device, you are likely to see you being on the same screen in the app if the idea that deep linking is a concept (which is very popular now) is integrated into the applications.
what happens if the app is not installed?
With Dynamic Links Users receive the best possible experience on the device they are opening the link on. When the URL is open in ios or Android browsers, it will be directly taken to the related content within the native application. If the user opens the same link using the desktop then they will be directed to the same content on your web site or application.
If a user clicks on the Dynamic Link via iOS or Android and does not have the application installed, the user will be asked to install it. Once installed, the application will launch and will be able to open the link posted.
How are Dynamic links different from deep links?
Dynamic Link is Dynamic Link can be described as a direct link to your application that is functional regardless of whether your application is installed. It contains the following details:
- 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:
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
- 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.
- This is the dynamic link created which has all the information mentioned above, for it to be able to link
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?
- PendingDynamicLinkData
- dynamic link received by the activity. Now, this deep link can be handled similarly to any other deep links that the app supports.
- This article will provide you with a basic idea of establishing Firebase Dynamic Links and setting Firebase Dynamic Links SDK on Android.
_handleDeepLinks() async {
final PendingDynamicLinkData? initialLink =
await FirebaseDynamicLinks.instance.getInitialLink();
if (initialLink != null) {
final Uri deepLink = initial Link.link;
print('Deeplinks uri:${deepLink.path}');
if (deepLink.path == '/ShowApiDataScreen') {
AppRoche.next Page(
context,
ShowApiDataScreen(
deepLinkPath: '${deepLink.path}:Deep Link',
));
} else if (deepLink.path == '/GoogleMapScreen') {
AppRoche.next Page(
context,
GoogleMapScreen(
deepLinkPath: '${deepLink.path}:Deep Link',
));
} else if (deepLink.path == '/UserSignUpScreen') {
AppRoche.next Page(
context,
UserSignUpScreen(
deeplinkPath: '${deepLink.path}:Deep Link',
));
}
}
}