Implementing Firebase Dynamic Linking in Your Flutter App

Photo by Felicia Montenegro on Unsplash

Dynamic Links are smart URLs that allow you to send existing and potential users to any location within your iOS or Android app.

While Deep linking, in simplest terms, is the ability to link directly to content in your app. Instead of simply launching the app and leaving users at the home screen, tapping on a deep link brings users to a specific screen within your app. Think product pages, profiles, new content, or shopping carts.

While implementing Dynamic Links on a project I worked on with Flutter, I made use of Firebase — Google’s mobile application development platform that helps you build, improve, and grow your app.

Before going on, I assume you have basic knowledge of what Flutter is and how Firebase is used and integrated with Flutter.

While figuring out how to implement this feature, I made use of different resources and articles to enable Dynamic Linking work on my project. Some of these articles were:

Firebase + Flutter — Dynamic Links — Step By Step Guide

Handling Dynamic Links using Flutter and Firebase

Firebase Docs on Dynamic Linking

Through the help of these articles, I was able to successfully ‘open’ dynamic links in my application. ‘Open’ because at this time, clicking the dynamic link just opened the application and continued the running of the app without directing the user to any point. This was a half-win at the time and I couldn’t find comprehensive articles that showed how to handle this data in-app. Most articles stopped at the point of opening the application through the dynamic links. On Firebase’s Docs, this was their approach:

https://medium.com/media/ea06638ac1d5f7c53465df97e4af2bd4/href

To clarify, the backend developer did the job of generating the dynamic links while I consumed the links in the app. To give this problem more context, the app was a social media platform that had different sections for posts, questions, resources, feed, profiles, … you get the idea. Hence, I was expected to navigate the user to these different sections at the click of the dynamic link.

I was able to solve this issue by these methods:

Liaising with the backend Developer: I liaised with the backend developers to determine the type of deep link to be embedded in the dynamic link. Firebase dynamic links have the option for a short URL, long URL and deep link to be embedded in your dynamic link. This deep link should be a valid web URL and will be used to direct the user to the web URL in a case where firebase can’t open your dynamic link due to some reasons like the flutter application not being installed, and improper linking of firebase with your application, e.t.c.

Finding out a method for handling the data: In the case where the application is installed and is properly linked to firebase, I was able to handle taking the user to different locations within the app by manipulating the deep link contained in the dynamic link and extracting the useful data.

For example, a dynamic link, https://example.page.link/UmjXpFJZcmVnw7FX9 might contain a deep link of this sort, https://example.com/question/6245ae78170fad9eac3143af, with this format, I was able to handle navigation to different screens and dynamic pages by thus:

https://medium.com/media/0f2644823e45dea41280782cd04785d0/href

From the above code snippet, we see how the data is gotten, formatted and utilized to make different API calls before pushing to their appropriate screens. This controller/function/class should be called in a topmost widget tree, that is, a point in the widget tree where it is sure the user is going to reach before performing core actions/functionalities. For instance, this particular controller was called on the widget containing my BottomNavigationBar which was a top widget in my widget tree. Hence, we are sure this method will be called appropriately.

Alrighty then, this brings us to the end of this read. If you found this read useful, you can drop a like, follow, or both :). See you on the next👍

Level Up Coding

Thanks for being a part of our community! Before you go:


Implementing Firebase Dynamic Linking in Your Flutter App was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Donald Obinna Amadi

Photo by Felicia Montenegro on Unsplash

Dynamic Links are smart URLs that allow you to send existing and potential users to any location within your iOS or Android app.

While Deep linking, in simplest terms, is the ability to link directly to content in your app. Instead of simply launching the app and leaving users at the home screen, tapping on a deep link brings users to a specific screen within your app. Think product pages, profiles, new content, or shopping carts.

While implementing Dynamic Links on a project I worked on with Flutter, I made use of Firebase — Google’s mobile application development platform that helps you build, improve, and grow your app.

Before going on, I assume you have basic knowledge of what Flutter is and how Firebase is used and integrated with Flutter.

While figuring out how to implement this feature, I made use of different resources and articles to enable Dynamic Linking work on my project. Some of these articles were:

Firebase + Flutter — Dynamic Links — Step By Step Guide

Handling Dynamic Links using Flutter and Firebase

Firebase Docs on Dynamic Linking

Through the help of these articles, I was able to successfully ‘open’ dynamic links in my application. ‘Open’ because at this time, clicking the dynamic link just opened the application and continued the running of the app without directing the user to any point. This was a half-win at the time and I couldn't find comprehensive articles that showed how to handle this data in-app. Most articles stopped at the point of opening the application through the dynamic links. On Firebase’s Docs, this was their approach:

To clarify, the backend developer did the job of generating the dynamic links while I consumed the links in the app. To give this problem more context, the app was a social media platform that had different sections for posts, questions, resources, feed, profiles, … you get the idea. Hence, I was expected to navigate the user to these different sections at the click of the dynamic link.

I was able to solve this issue by these methods:

Liaising with the backend Developer: I liaised with the backend developers to determine the type of deep link to be embedded in the dynamic link. Firebase dynamic links have the option for a short URL, long URL and deep link to be embedded in your dynamic link. This deep link should be a valid web URL and will be used to direct the user to the web URL in a case where firebase can’t open your dynamic link due to some reasons like the flutter application not being installed, and improper linking of firebase with your application, e.t.c.

Finding out a method for handling the data: In the case where the application is installed and is properly linked to firebase, I was able to handle taking the user to different locations within the app by manipulating the deep link contained in the dynamic link and extracting the useful data.

For example, a dynamic link, https://example.page.link/UmjXpFJZcmVnw7FX9 might contain a deep link of this sort, https://example.com/question/6245ae78170fad9eac3143af, with this format, I was able to handle navigation to different screens and dynamic pages by thus:

From the above code snippet, we see how the data is gotten, formatted and utilized to make different API calls before pushing to their appropriate screens. This controller/function/class should be called in a topmost widget tree, that is, a point in the widget tree where it is sure the user is going to reach before performing core actions/functionalities. For instance, this particular controller was called on the widget containing my BottomNavigationBar which was a top widget in my widget tree. Hence, we are sure this method will be called appropriately.

Alrighty then, this brings us to the end of this read. If you found this read useful, you can drop a like, follow, or both :). See you on the next👍

Level Up Coding

Thanks for being a part of our community! Before you go:


Implementing Firebase Dynamic Linking in Your Flutter App was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.


This content originally appeared on Level Up Coding - Medium and was authored by Donald Obinna Amadi


Print Share Comment Cite Upload Translate Updates
APA

Donald Obinna Amadi | Sciencx (2022-07-20T11:52:50+00:00) Implementing Firebase Dynamic Linking in Your Flutter App. Retrieved from https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/

MLA
" » Implementing Firebase Dynamic Linking in Your Flutter App." Donald Obinna Amadi | Sciencx - Wednesday July 20, 2022, https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/
HARVARD
Donald Obinna Amadi | Sciencx Wednesday July 20, 2022 » Implementing Firebase Dynamic Linking in Your Flutter App., viewed ,<https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/>
VANCOUVER
Donald Obinna Amadi | Sciencx - » Implementing Firebase Dynamic Linking in Your Flutter App. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/
CHICAGO
" » Implementing Firebase Dynamic Linking in Your Flutter App." Donald Obinna Amadi | Sciencx - Accessed . https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/
IEEE
" » Implementing Firebase Dynamic Linking in Your Flutter App." Donald Obinna Amadi | Sciencx [Online]. Available: https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/. [Accessed: ]
rf:citation
» Implementing Firebase Dynamic Linking in Your Flutter App | Donald Obinna Amadi | Sciencx | https://www.scien.cx/2022/07/20/implementing-firebase-dynamic-linking-in-your-flutter-app-2/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.