By using dynamic linking, increase user experience, engagement, and retention
Why do we utilize dynamic links
You may redirect both current and potential users to any point within your iOS or Android app using dynamic links, which are clever URLs. Even new users see the content they’re seeking for when they open the app for the first time because they survive the app installation process. Dynamic Links are always free, regardless of scale.
What distinguishes a static link from a dynamic link
For managing deep linking for applications and websites, Firebase Dynamic Links offers a wealth of features. The nicest aspect is that any scale of Firebase deep connection is free. Instead of sending the user to the Play Store, dynamic links improve the user experience by leading him to the intended equivalent site or app content. This appears to be helping to develop, improve, and expand applications for various platform domains.
Firebase Dynamic Links:
The following circumstances are handled by Firebase Dynamic Links:
- If a user clicks on one of your dynamic links, they will be instantly sent to the play store or app store to download your app in order to view the link.
- Opening the link will launch the programme on the device if it is installed but not currently running in the foreground.
- The user can access a dynamic link in the registered listener if the app is in the forefront.
How to integrate Dynamic Links in flutter using Firebase
Initial Configuration & Setup
First and foremost, we set up our Firebase project to support dynamic linking. Click on the link below to start your firebase project.
Log in to the Firebase console, then click Add project.
Open the firebase console and tap the “Add project option” , and get this type of screen.
Here add your firebase project name.
- Select your existing Google Cloud project from the dropdown menu, then click Continue.
- (Optional) Select or create a Google Analytics account after enabling Google Analytics for your project.
- When you’re finished, scroll down and select “Create Project.”
The firebase console might take some few seconds to go through your application. Once everything is done, click the proceed button to see the project overview page.
Select here Android or/ and IOS platform.
You can skip this step if you have already configured your project for Dynamic Links.
Firebase Dynamic Links From the Firebase console setting
- Launch the Firebase console. Open the Firebase project where Firebase Dynamic Links need to be added.
- Configure your Firebase project’s App: (Android, iOS) option.
- The Dynamic Links section will appear after the Grow Section.
- To create a URL prefix, now click Get Started.
- Make a dynamic link with the app’s distinctive domain name in it. Using firebasedynamiclinks.page.link as an illustration. Here, the suffix page.link is added to the domain name.
- then perform the steps to Configure, Verify, and Finish.
The first step is, Enter your domain here and press the continue button ,
Dynamic links are created on a domain, which you can modify by adding your own name, company name, brand, and so on. Customized links appear more relevant and Display this dialogue, then click Finish.
The following screen will then display this dialog.
Click on the three dots on the right side, then select Allowlist URL pattern, then enter the link below and click on the add option.
Create a dynamic link inside the Firebase Console
a). Click the image below into the “New Dynamic link” button.
b). Set up a short URL link and then click “Next”.
Set up for short dynamic link
Put your custom URL in the URL prefix header.
c). Then, in the second step “Set up your Dynamic Link,” enter the URL for your dynamic link. There is a deep link to your application, and if a specific user has not installed the app, he or she should be redirected to the appropriate location. As an example, as the dynamic link, you could provide an app play store link. You can give your dynamic link any meaningful short name you want. Click the “Next” button.
add the dynamic link URL & name.
d). in the fourth step of Select the “Open the deep link URL in a browser” option. If the specific app is not installed in your app, the link will open in the browser. If you don’t have an iOS app, you can select “Open the deep link in your iOS App.” Then press the “Next” button.
Choose link behavior for ios.
e). In this section, we define Android behavior. Choose “Open the deep link in your Android App” and enter the name of your Android app. Then press the “Next” button.
f). You can also change some advanced settings. Then click “Create”.
Now , let’s move to the Flutter code side…
Installing the plugin for Firebase Dynamic Links:
There are packages available for Flutter that give users access to many different services on each platform.
Step : 1) Open the pubspec.yaml file in the project’s root directory, then add the following package:
firebase_dynamic_links: ^anyStep : 2) Get the flutter packages.
Add the command on specific IDE terminal flutter packages get
This will allow you to add Firebase Dynamic Links to your Flutter project.
Create a Dynamic Link In Programming
Make a dynamic Link instance.
FirebaseDynamicLinks dynamicLinks = FirebaseDynamicLinks.instance;
Add the function for create dynamic link
Future<void> _createDynamicLink() async {
final DynamicLinkParameters parameters = DynamicLinkParameters(
uriPrefix: 'https://croudoperationapp.page.link',
link: Uri.parse(
"https://croudoperationapp.page.link/referral?code=12345&userId=${123)}"),
androidParameters: const AndroidParameters(
packageName: 'Add your app package name',
minimumVersion: 0,
),
iosParameters: const IOSParameter(
bundleId: 'Add your app bundle Id',
minimumVersion: ‘0’,
appStoreId: ‘Add your app store Id’
),
socialMetaTagParameters: SocialMetaTagParameters(
title: "Example of a Dynamic Link",
imageUrl: Uri.parse("https://example.com/image.png"),
),
);
}
Use the DynamicLinkParameters instead of the DynamicLinkParameters to create a short Dynamic Link. method buildShortLink()
String? _deepLink;
final ShortDynamicLink shortLink =
await dynamicLinks.buildShortLink(parameters);
Uri url = shortLink.shortUrl;
setState(() {
_deepLink = url.toString();
});
Use the DynamicLinkParameters to abbreviate a lengthy Dynamic Link. method shortenUrl
call the _createDynamicLink function on the button where to create a link.
FloatingActionButton.extended(
backgroundColor: Theme.of(context).colorScheme.primary,
onPressed: () async {
await _createDynamicLink();
print(_deepLink);
if (_deepLink != null) {
Share.share(_deepLink!);
}
},
icon: const Icon(
Icons.share,
color: Colors.white,
),
label: const Text(
"Referral code",
style: TextStyle(color: Colors.white),
),
)
Add the code into the main.dart file.
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
await GetStorage.init();
runApp(
MaterialApp(
title: 'Dynamic Links Example',
debugShowCheckedModeBanner: false,
home: const LoginPage(),
theme: ThemeData(
colorScheme: defaultColorScheme,
primarySwatch: Colors.blue,
),
builder: EasyLoading.init(),
),
);
}
Now, Handling dynamic links and redirecting them to particular content.
Void handleDynamicLink(){
var data = await FirebaseDynamicLinks.instance.getInitialLink();
var deepLink = data;
if (deepLink != null) {
// kill state dynamic link handling here
//navigate here
}
dynamicLinks.onLink.listen((dynamicLinkData) async {
print('on listen');
print(dynamicLinkData.link.queryParameters["code"]);
// open and not terminated state dynamic link handling here
//navigate here
}).onError((error) {
print('onLink error');
print(error.message);
});
}
Github code link for reference:
https://github.com/kevalv001/deep_link_app.gitFlutter Dynamic Link – Integrating Refer & earn in app
Conclusion
In the post, I showed the fundamental structure of dynamicLink; you may adapt this code to suit your needs, and this was a brief introduction to dynamicLink using Firebase and how it works with Flutter.
Thank you !!! Have a good day 😊 😊 ..
