Dynamic Links with Auto Navigation in Flutter
HTML-код
- Опубликовано: 28 мар 2020
- My Animations had to be removed because of export issues :(
In this tutorial we cover the usage of Dynamic Links, why it's needed and how to use it. Check out the full written tutorial below.
Written: www.filledstacks.com/post/dyn...
Let's work together 👉 calendly.com/danemackier/1-on...
You make the best flutter tutorials! All of the information has been incredibly helpful, and the video production quality is wonderful. I love the visual design of the videos, and the sound editing is on-point. As someone who has done a fair bit of video editing in their life, I highly respect the effort you put in to make these. Keep it up!!
Thank you Trey! I really appreciate the kind words 😊 It takes quite a bit of time to line up everything. And with this video I spent almost 5 hours on an animation for the first 2 minutes of dynamic links and it couldn't export 😔 It didn't subtract from the content but it would have been easier to consume with those tiny animations.
@@FilledStacks Wow that sucks, maybe you can show it in a future video? Regardless, all that attention to detail shows dude :)
@@treyshaffer Thanks man, I'm very happy to see that you notice all the editting I do :)
Ok
it feels good when i have to do smth and you already made a tutorial about it :)
hehe, I can only imagine the feeling :)
Whats up bots
haha reported them as spam. People use weird strategies to get some traffic. Instead of spending that money improving the product they spend it paying bots lol. Strange
Your tutorial is so easy to follow
Your introduction captured my interest
Nice one bro
Awesome! I'm happy to hear that! thanks for watching and commenting
Bro I from South Africa JHB and I'd love it you you helped me build an app I am willing to pay, you are by far the best Programmer I've seen work on flutter
We have a 8 person development team and we can probably get some hands on your project. Send me a mail to dane@filledstacks.com with details and I'll send you our retainer contract details.
I was waiting for this tutorial.
Awesome! I hope it doesn't let you down :)
AMAZING TUTORIAL, thanks so much
You're very welcome. and thank you for watching and commenting.
I love those little bass drops when you hit your table (or something)😅😂
Lmao, I'm always moving when I record. It's either my knee hitting the side of the desk or me hands
Props for the tutorial, can you tell me what design pattern you're using to keep your code organised? Or maybe provide a source for some coding guide you like? Thanks!
Thank you. Yes. search provider architecture on my channel. Then watch the entire "architect a flutter app" playlist after that. That's exactly how I write all my production code for clients. It's a pattern based on MVVM, but with no two-way binding so it's basically MVU. I called the package stacked
excellent breakdown
Thank you.
What if the user isn't authenticated yet ...
Will the link and it's parameters be preserved as the auth service runs to be executed afterwards?
That's all dependent on your logic. You can keep the link in memory or in shared preferences until sign up is complete and then get the link and perform whatever deep linked action was intended.
Thanks for this video!
If I'm not mistaken, use case point #3 isn't actually covered in this video?
Is it possible to programmatically create links for posts that take users directly to the post on the firebase hosted web app?
You're very welcome! and yes, It is covered. It Starts at 13:15
I'm a bit confused about the differences between the urlPrefix and the link parameters. Which one is actually going to be used to create the final deep link url that will be shared?
Also do you have to create any links in the Firebase web interface if you don't want completed static deep links and just want to build up your deep links dynamically through the app?
You send the dynamic link url. It embeds all parameters and prefixes. I also show how to create links in the code which is how you dynamically create the dynamic links.
This firebase video series is an amazing... Can you do a video on how to sort and filter data in firebase?
Sort is built in you can use the orderBy call and that's that. Filter is the same with the .where call. I might cover that at the end of the series.
Again a great Video!!!!, Awesome.
Thank you. I appreciate the kind words and the comment 😁
what if i don't have any website link? can I use there default link and get the value from that link in app ?
Yes, you should be able to do that. You can encode anything you want into the dynamic links.
Thanks for great tutorial, I have a question that in firebase console we set the deep link, if I want to create deep link to specific page like crypto, should I create one by one based on crypto code?
No, the package and the end if the video talks about creating dynamic links in code. you van simply generate one using the code and share that instead.
Thanks for the knowledge
You are very welcome. I'm verry happy sharing my knowledge that I've built up.
Thank you bro from cambodia.
You're very welcome :D
I was trying your code in my application. It definitely seems to work fine but I have one Issue here. In dynamic links section in Firebase, there is count on the First opens and Re-Opens both seems to be stuck at zero, even after clicking the link and the same happens in your app. Is it a bug in my app or this issue is from the Firebase side? and How can track the link from different campaigns. BTW video was great.
Awesome. The stats take a while to update. The same as with the other analytics and push notification open data. Takes a few hours, most likely 1 day. So it's not a real time stats tracking system. Nothing you did wrong, it's just too much work load to make dynamic links real time as well. I suspect in the future it will be.
Hey, i‘m a beginner and don‘t really understand the minute since 8:12.. what are those dart files and how do i ‚understand‘ and use them? where can if find the tutorials to that?
This video is apart of the Firebase series. To have all the files you can either follow along from episode 1 or download the starting project for this tutorial from filledstacks.com
I am sorry to ask this question here as it's not relevant to this video but it's an important one. I have seen your provider_architecture which is amazing. In flutter Europe I saw the presentation of BlocProvider and I find it very similar to your provider_architecture . Could you write a blog comparing both provider architecture and BlocProvider. This will really help to clear confusions. I know you aren't posting on medium,but will eagerly wait for it on your website. Thanks for the amazing teaching you do.
Thanks for the kind words. I don't use bloc. It has too much boilerplate and hard rules so I won't be able to write a comparison. They're also very different and not close at all. The key differences in MVVM, which is what we use, is there's one ViewModel per view/widget. Bloc has 1 bloc that contains logic for multiple views which I don't think is good practice. There's no clear rules for what a BLoC should represent, a viewmodel is there ONLY to control state of the UI and perform the actions the user wants by making use of services. View files ONLY show and pass UI events to the viewmodel, nothing else. In Block the views also know about some event types as it's supposed to update the UI based on which results are sent back.
That's about it. With BLoC you HAVE to use the stream in / out approach which I don't like. With Mvvm you call the functions on your viewmodel directly. I don't use bloc so won't be writing in depth articles on it.
@@FilledStacks Ok , thank you for the reply.
You are right that bloc has a lot of boiler plate and BlocProvider is very very similar to your design with only as much code to write as your provider architecture. If you could watch ruclips.net/video/knMvKPKBzGE/видео.html once to let me know your thoughts.
I really love your work and I would like to give you a suggestion. You already have starter templates on GitHub and I believe many of the users would love to buy a maintained production ready template from you with all prebuid services with tooling. Other than the paid production ready template many users would also like to buy a coffee for you if you could add a button from "buymeacoffee.com" to your blog posts to support your awesome work to just show how much we love your work.
thanks you.... it saved me...
It's my pleasure :D
Awesome video....could you please do another one on splash screen?
Thank you. I don't think that would be necessary, nothing has changed for Splash screen setup since I posted my last video about setting up a splash screen
Thank you!
This works for android and iOS?
I want to create a link to open the app if its installed, and if not to send the user to the install page? Is that possible? I trying to figure out how can I do it
thanks again
You're welcome :) It sounds like you commented before the video because what you're asking for is literally exactly what I show in the video haha.
@@FilledStacks Yes, I know! but I meant that what should I do to run it in iOS :)
I have a meeting app in which I want when the link is clicked the app opens and the details are filled automatically from the link which contains the room is and meeting starts. How to please make a video.
Hey, it would be exactly the same as this video the only difference will be the view you navigate to and the parameters you pass to it. In the view when you get those parameters you start a meeting on your meeting service with those parameters. That's about the only difference.
@@FilledStacks thanks but how can I get put the meeting id at the last if my link and retrieve it when clicked?
Hello FilledStacks this is an awesome tutorial but can you please help me with :- I am facing issue in ios when i click on my dynamic link then app opens but i am getting link NULL. in my console . Can you please help me with it.
Thank you.
Thank you. Open the debug view and check where it goes, then check your package id's line up with the google properties in your application and the id in your application on firebase. then check that lines up with ios project bundle id in the runner properties in xcode.
Hi there, thanks for the tutorial... My doubt is if I don't have any web app and all I have is Android/iOS app. How to generate link out of app and share.. like fb does
The same way that I show in the tutorial :) The function I add at the end to programatically create a Dynamic link is the function you should use to create the link to your app. You don't need a web app. You can just set that the link opens the app or try's to install it on the device.
@@FilledStacks got it.. so for every page I need to set url as shown in the video?
@@Cherupakstmt Yes. Add the proper parameters and then set that as your deeplink
@@FilledStacks thanks
Can we hope for audio series next? As in a music player with play pause seek forward and some other basic features?
Hey, that is very low on my list. I haven't built a production audio playing app outside of recording audio and posting it to an api. I don't think I'll ever make a video building a music player, at least not in the near future
FilledStacks no problem still will be waiting for your next video 😍
How can i make the deeplinks routes without your navigation service?
You have to implement the deeplink parse functionality where you have the context then call Navigator.of(context) and navigate.
a bit off topic request but could you please make a guide on your website or RUclips for a sqflite service like your other services .... your style of architecture and dependency injection really change my way of practice flutter ... thank you for sharing it with us.
I'm happy to hear that. It is in the plans now that I've implemented it for a client application. I'd like to share my implementation so I'll be making a video on it.
I'm glad to hear that....I'll be waiting for that video
but now the firebase dynamic link is deprecated. any other solutions?
Yeah, it's a shame.
The most popular option now is branch.io but they become quite pricey.
I know to Flutter founders building a new dynamic link tool that I saw a technical preview of recently.
Dm me on Twitter, I'll refer you to them. X.com/danemackier
is there a way to do it without using firebase?
Yes, it would take a week or two to build, but there's definitely a way to do it.
hello there! Amazing tutorial. Actually I want to reward the referrer with few points when new user click on the link and install the app referred by them . Any tips how to do that. Thank you.
Hey, you can add parameters into the dynamic link which you can parse out after and use that to make your decision on what to do.
please make a bluetooth series
This isn't something that I'm currently working on or with so it wouldn't be soon. But I can tell you how I would do it. I'd make a bluetooth service and expose functions on it to connect through a package that exists on pub.dart :)
All seems to be working except the debug messages I am not getting anything on console
Ok the app opened from browser seems to be using the older version of the app installed
Logs have been weird on a Mac recently so if you're on there you should google the flutter log problems on mac and then fix that up.
do you need to upload the app to app store ??? to do this, im getting an error when i try to link the app in firebase dynamic link creation menu
Well the link will open your app in the store. If your app is not in the store there's nothing to open.
@@FilledStacks just for testing case only(opening the app if installed), can i just use the url option only ? or do i have to provide a id . and i saw in one of the fire base video they have used google photos app id as a temporary solution.
You can use any id for testting to see if it works.
@@FilledStacks one small question , have you done any configuration to app such as xcode universal links ??
Hey, i think so. If you're talking about definine a url schema for your app that other apps can launch it with then yes. I have done that
the user has not even loged in so how does it go to creating a post using the link
I don't think it'll get there if the user hasn't logged in right? or did I miss that part. If I did you can move your initialisation functionality to after a login has occurred or in the startup viewmodel in the block that checks if the user is logged in or not.
Thank you
You're welcome :)
How to check if model is already registered in get it before registering as lazy singleton
Those are two different things. Why would you check if a viewmodel is registered before registering a service? A service won't be constructed unless it's requested. I don't know what you're trying to prevent with checking the model?
FilledStacks I registered my service in the homepage of my app. Couldn’t do it earlier due to my app nature. Sometime i push my homepage again and thats where i get the error “model is already registered”. I solved it with a try catch but was wondering if there is a more elegant solution. Thanks for replying.
I was trying your code again. There seems to be one issue with the inapp deep link creation. I created a new link inside the app and shared it through the whatsapp but when I open that link in browser it says that the link does not found. Can you help with that?
I won't be able to help. It's your code so you have to check. Check in the console if the link was created then debug from there to see where it should go per platform.
@@FilledStacks the link is generated as required but it is not showing in the firebase console. And when I relaunch the app it shows that the Deep link there. When I open that same link in the laptop it says link not found and when I open it in the android it takes me to the play store where it says not found even if the app is installed already.
I have posted issue in the github for the same with #2512 you can check there. FirebaseExtended flutterfire repo
@@vipinmalik4243 I see. Then I don't know. Lets hope the team can help you out there.
Please i've follow all the steps but my android app is not opening
Then you should debug and figure out what's going on.
How can I pass a promo code through dynamic link
Make it one of the query parameters
can you make a video on getting location and shareing location like uber
I have made a video about location. It's on the channel. If you want to share that location update a document on firestore. That way you can listen for changes in that document using firestores realtime database.
how do i pass the query param dynamically in a short url?
ex: my link is something like this 'xyz.page.link/auth_redirect?url={url}'
short url becomes something like this 'xyz.page.link/3XBYA'
how to pass param through short url ?
The param is in the short url, that's what it'll expand to. You create your dynamic link in code with all your params and then generate the dynamic link and use the short url from it.
@@FilledStacks so to give more context, im doing some app to app communication.. so the link should return some param from the app invoking it
Hi,
It is possible to have parameters in the links? I mean to pass some ids without having to create one link with that Id in firebase.
I'd like to have a base link , for example: mydomain.com/myapp/. and then generate QR codes with. mydomain.com/myapp/1. mydomain.com/myapp/2 ... and inside my app detect the parameter, but not having to create the complete links in firebase.
thanks so much
Yes, I show how you can create dynamic links from the code so you can generate those in the code when required.
Please make a Flutter Tutorial on how to prompt user to update android app and make sure always to check the app is updated using any package.
Not a bad idea, I haven't done that before so if it's required in one of the apps I'm building I'll make a video about it.
Thanks dear
My pleasure :)
@@FilledStacks a tutorial on native bridge with method channel would be great
@@nagaprasannabharadwajsarip1485 I've seen quite a few of that online. There's nothing I want to implement natively that there isn't a package for but if there is I'll make a video about it.
Good afternoon, did you publish your application in google play for firebase dynamic link can work in the application?, because my application redirected me in google play
Good morning, no I have not. If you publish it you will be directed to the page to download it. Mine is not published so you won't see it going to the app.
@@FilledStacks I implemented firebase dynamic link in my app but it redirected me in the Google play
@@FilledStacks veo que el tuyo te redirige a la app
@@emanuelantonio4783 That makes sense. If you don't have the app installed it will direct you to google play and look for the package id you defined in your dynamic link
@@emanuelantonio4783 ?
What about share a app link and reward both user.Thanks for accepting the request
firebase.google.com/docs/dynamic-links/use-cases/rewarded-referral I am looking for this type of tutorial
What about it? You could probably do it in the same place I run the deeplink logic
@@himsha64 Well luckily you have that one above with mine so you can figure out a great solution :)
@@FilledStacks Thanks for Your Response
I just want to implementing this on my personal project app, since I want to add a feature where user able to reset password from mobile app & I don't wanna to create a website just to reset user password by a link that send via email. ;)
Yep, it works great for that as well. We do password reset using dynamic links as well.
Hi ,you find a way to implement it please ?
you can use dynamic links to open a page in your app to confirm the reset or send out the email for you
Thats a slick website, made with Flutter Web?
Thank you. No, I built that using VueJs and Gridsome. Flutter web wasn't an option when I first built this. Will probably swap it out and produce a series around it when it moved up another stability channel.
Where is the NavigationService class ?
We created it in one of the earlier tutorials. You can get it from the stacked_services package as well.
finally!
haha, I had some cool animations at the start to visualise the entire process of deeplinks but the video didn't want to export. Now you just have to look at the text on my blog :)
@@FilledStacks been waiting every day a week from your last upload...i'm sure that its just not me.. thank you so much i'm reading flutter like a,b,c easy because of how you make your tutorials. please continue making tutorials for firebase episodes..and upload weekly lol because while waiting i'm watching all tutorials all over again...thank you love lots and keep safe of the spreading virus
Awesome Dude, Can you make for Me a apps
yes I can. You can email me at dane[AT]filledstacks.com
@@FilledStacks it's ok
Very good tutorial, but on iOS that tutorial might not work.
If it's not setup it won't work but the navigation will work just fine. You have to add the correct data into the info plist to allow the deeplink url to be passed through. That's all documented on the plugin
I find it hard to understand and keep up with your videos. Maybe a little more explanation in simple words will help
That's exactly what I try to do. What exactly are the things you don't understand? I don't explain any beginner concepts in any of my videos in depth.
South African Accent
That is because i am a South African :D
@@FilledStacks You skipped the IOS Section , took a long time to figure out the current documentation of the plugin is missing some configuration lines of code
@@charlesoruko I did skip it, I mention it in the first video where i said i don't want to do both setups because it'll take to long.