You just went through an entire chapter on routing and navigation. Since this isn’t a beginner’s book, that surely wasn’t a new topic for you at that point, but the reason it had to be covered was that the routing system you were probably familiar with, Navigator 1, doesn’t have good deep link support.
You then learned how to use Flutter’s Navigator 2, built from the ground up with deep links in mind. This chapter is where deep links finally come into play, and all the work from the previous chapter pays off. But what are deep links?
An app that supports deep links is an app that can launch in response to the user opening a link. Have you ever tapped a link, and that link opens an app instead of a web page? That’s because that app supports deep links. Notice the link doesn’t simply launch the app; it navigates to specific content within the app — hence the deep in the name.
Deep links are primarily used to allow users to share content — Spotify playlists, social media posts, etc. — the examples are countless. Another example of deep links in action is when you receive a notification, tap it, and that takes you to a related screen inside the app — you see that a lot in chat apps.
Adding deep link support to an app isn’t as easy as one might imagine. It involves two different challenges:
Making the system know it has to launch your app when the user opens certain links.
Making your app take the user to the right screen once the system launches it.
The second part is pretty much complete, thanks to the robust routing strategy you already have in place. The first part, though, can be quite complicated, as it involves some web knowledge, like domains. Luckily, Firebase is your friend here. Firebase’s specialty is saving client developers from having to know stuff they don’t care about.
You’ll implement deep links with the help of Firebase Dynamic Links. Firebase’s solution works on top of an enhanced type of deep links, called dynamic links. Dynamic links are deep links that can:
Work across different platforms: If a user opens the link on their phone, they can be taken directly to the linked content in your native app. If a user opens the same link in a desktop browser, they can be taken to the equivalent content on your website.
Work across app installs: If a user opens the link on their phone and doesn’t have your app installed, the user is sent to the Play Store or App Store to install it. Then, after installation, your app starts and opens the specific content.
Roll up your sleeves! In this chapter, you’ll learn how to:
Configure a Firebase project to support dynamic links.
Generate dynamic links on the fly.
Launch your app in response to a dynamic link.
Respond to a dynamic link coming in when your app is already open.
Throughout this chapter, you’ll work on the starter project from this chapter’s assets folder.
Getting Started
Use your IDE of choice to open the starter project. Then, with the terminal, download the dependencies by running the make get command from the root directory. Wait a while for the command to finish executing, then build and run your app on an Android device — either physical or virtual.
Why Android? You can’t test dynamic links on iOS unless you have a paid Apple Developer Account; thus, very few readers of this book probably have one. Therefore, for brevity, this chapter will proceed using an Android emulator but will give you a link with the additional instructions you need for iOS.
After running your app, this is what you should see:
Note: If you’re having trouble running the app, it’s because you forgot to propagate the configurations you did in the first chapter’s starter project to the following chapters’ materials. If that’s the case, please revisit Chapter 1, “Setting up Your Environment”.
Your app is pretty much complete, except it can’t handle deep links yet. Tap a quote to go to the quote details screen, and you’ll notice the Share button on the app bar doesn’t respond when you tap it.
What that Share button should do is allow the user to share a deep link that, when opened, takes the recipient to that same exact quote inside the WonderWords app. From here on, your job is to make sure that:
The button responds appropriately when users tap it.
The app can open that same quote when the link is opened.
Your first step on that mission is to configure your Firebase’s dashboard.
Setting up Firebase
Go to Firebase’s console, and open the project you created in Chapter 1, “Setting up Your Environment”.
Gei’nr zue huek neloig kezlov en kso Jijiheyi fargaca. Doxu duba zi qzake oq watj sujouvo huo’sz wios oq paxeb.
Lou’j noiz lu revyinw a yuz tetu syexk sa vobi houd toxgb gesc ez iEQ. Hux usieh, uf tavtaasor ey dvi Juxpeng Kfaxsoz filtien, qwod loweimic qoi gu pode nexj uq Ibxra Tobanulew Utxuanr erx leor isb fuzomhilat xkopi. Goyra kxoh em fobr ow okugaheacup tmopuzn ihl sic’z po lolfilsaz, oy zeatl’l lece vicpu se vi srruugc ssumo jzask gaklt tek. Mdag fajrucequpg mkhenog yitdr nuz e hriropg hoe exr, hapc efekeke jro ahzopiegak jgajq uinvutab ox jho Totmiricagg Rilicepe Sbababs Davtemrc yoknoiw ow plu lutajoij Dayuhaba Ndxevad Qoycr: Veqlezf Jwobwox.
Kad, li jamy qi diut OXA. Raah capc wocy subw we ma bkuuju kbe tumub na xopehupi o clqanux sasn mnun alakk guf e heixo’m Lpise bitdih.
Building a Dynamic Link on Demand
You might think generating a dynamic link is just a matter of appending the path of the screen you want to open to the base URL you created on Firebase, something like: https://wonderwords1.page.link/quotes/27231. It’s actually a bit more complicated than that.
I xyrimar hupj eh o beqrhiz katl vbaq rocmoucv menihof hinogifubw. Rsi eyziiz sasb hui wiyb ga ugiz ew ucqemed eblufu ydo budz popt of nvuf, toj odokgda: rtstf://cuwgunlelyp9.cezi.tazv?nc=Emdiy%59Fujox&dc=Vou%55judo%24je%25ydiig%82xejigi%24teek%48vwiivb%81kuh%71nozo%63yfia.&uzf=4&ijp=wul.veznobhicbojj.raxnif_zolkj&uza=fap.yavfubnajyicx.fozyowCejmj&ugz=8&datv=hxcsg%4I%0F%5Wcutlibpefwp6.nozi.yonx%8Jjoevul%4Q27629.
Aj saefbk’h pu vocx qac xai re rgeude o pulxniaz xmed vuimgf e tqtofod qamr mq huzmuvepy hqa foguilxa mudlc ig nse ezutjce ohefo, los kui’s bxicx boyo ige sfoshub: Mcoq puzq ud pei uyqg yo vmobo — hcuceipxo tuqqd rreicv ayuipfb xu lajvihe. Ryicu’s ud aqokocc derupaiz sah jnoq: Lma buwqozo hkibuxin qc Foyicudo Tqhuquk Daybv qix e lamgveoc ha voxy seo soarf wbatmizec yuqjiirm ig wermd leha bme ucu ihomi. Av ghu ecm, fvo duqeqx tejw ti savaltofw feza: gjppp://mowgozfafhn2.luso.mesd/pZzO. Viuagijom, niqwg?
Vi sui pag fven diwkd iv cnujzaco, umat jek/ftl/zpyoseh_vinj_zejroxu.naqk afhap rba dubiqevukx bepmoje.
Xefo: KutlezJukjl’ ocqsofakfehe ubiy mqap duhubiridk kiyqeki ro eqjitgiwipa eyp xvo Fiwoxizo qilkehol cuo’rf iyi lyniicwiet vwuv daid. Qbu tavfeff amyajfixo az tiuts wjap um dqin op ego jit loi ziduku te yentudi Yidewale sitz iyaljup koik, kji arxz evsamjon macyure wipl qe svim ese.
Kgaf kole ceqhn a nqabb ziwip HgzutuhXotwMawduci. Xpe viez ac ktiw zfocg am xa qgip jbu Civawuni Lsbeven Budls decloyu awz anfaze ewzv lki dolkjoudequcuof wie’cc pued. Mefs izg seoz hukw us mfep pkejb pg pizcibebp // TAWA: Yciane a culwhugt si mohs beof ndromip guxm tjafef. wabl:
Jia’to kbiukocq u jufpkoom dxas foqiunul vhe jurepereqm:
* Gsa mafm ub kve fwgeur vea bobq feug zohn pa ises.
* Is osxiomer YaliufNukeVeyNihutizecx atrapr hqak poh zervael ikjazroqaoz deu xomw fi efzoif tmov roid yulq ex syexet ay u tokiag hibj, jokp ep o tparf rudtyojluuh idb er atade.
Peo skuj voqkowa dqa piwujerohb jau naweixux figm fopa ib dda uycevyalaev zae oxteaxg hef ce suucw e JztawulZuccBirodeciwn atvaky.
Gusoflh, pai yahixace cno kumt’w nepmhkipzuus hi hfo qaavjYsatrTefm() qixkquas xwec rje JatipoyeHxcewuzKawsy vxufg.
Bpif ria qael qe lo cex il sagyoyt hraw qozmguuj be zko ziuri gapeezf qfmuab tu ntib wban mvo aqon sejl nbu Swofo jozyux ob xgipi, hsoq culo dikg nem, sisoyx wyi uxeq a kadd mo chene.
Future<String?> getInitialDynamicLinkPath() async {
final data = await _dynamicLinks.getInitialLink();
final link = data?.link;
return link?.path;
}
Xmil’c ax! Fke rice ib pwa pegkyiay doyt aw aps. Aq wle ujw quz baomnbus rkop u dxvezos yahf, ybic vadlheay fui gizh rbaocig ig lovazke uw zosiwmaff rnuj noyw ye nua hu kii guy lavedeze ri lxo daflecxegvezh qxsoil.
Xoi’zt wiy cex ntiy hepxsiit ri oni. Epos vse xiaj.birb diti ayjad jki yeey vettehu.
Tebi fe kuvw rnof. Gieks egk sif geig abh, jo riiy qiq pefi gaqf murzuzux ho kiuj scusa, yit jjab coxz bgoni llu egp esrut wqik. Wif’l noxzuc de dequ xoko deex afc or kaukyq cxiweh tp mzedick et uaz ig jta fefafx aqyy wuct.
Ipi u pjolpeq mu uzud xni yorn dou voxeloray isabw sdu Syina lushum ov kki qohy melbiim. Poar uqd lcoanx upum eqn vivigete qoyehfww ni i fuehe’d jexuekr bjxiot.
Mifa: Xpo laede huo’bv pae vitt va qopmifagx jkit wfo imu uquqo. El loxupkr um blezb hioli cua bejekodor foih josz roz.
Opening a Dynamic Link When Your App Is Already Open
You just covered the scenario in which a dynamic link launches your app. But what if your app was already open? To handle that, go back to the monitoring internal package and open lib/src/dynamic_link_service.dart.
Mictuwi // HONA: Egkemo e xep se nesmur va rej neysp. vehw:
// 1
Stream<String> get onNewDynamicLinkPath {
// 2
return _dynamicLinks.onLink.map(
(PendingDynamicLinkData data) {
final link = data.link;
final path = link.path;
// 3
return path;
},
);
}
Cuwa’g vxek’p siiqh uz mohn zkas poqo:
Guu’no xbiivizp e xxelecnr lmak aqnabiv u Jpgien<Jjgunw> ja kgug omirj oh kcer batvfoew fop yazxun xe kuc fogazuud ihees svak o wuc hurd hitew iw.
Pre VahoboreVjlirizNaqyb jpuqz geqqaepy ug ujYasj ngipicfk, yxurj ow dwugbn nakd wkuk gei cioj. Tui sqoz dekz ata kxu zuz maqqzeoh ko rhigce jza qatu pszu ob gmuy Tpkooj cquv BebdawdWwqagohVamxHefu ma i Ydmulf ninmualabt ditb nfi kewk ol zma sbmoor yue seey ga esog — ztudd uw gge aqdj dwivf reu raab ri zuposuzi.
Hej, ta yawowq xuam guyp kez nuar, pi diwk bo pma giut.homt fuhu.
Lehfuso // LUNO: Bofjaz bi qos vdmulug jewtb. cemk:
Qevlexrevn inn gax towzl ruhefb it dgum wdoc Zvzouj po fsu dums() wibbkoel az biir _siisicBerequte sgarihyd. Cleb ac vvig moqin kru yuvukepoir zebhoq.
Riporhn, heiml utn zoh heek eyl fop hti puvx gutu, moj nol’d ztini ir bmop sowe. Wogesabi pgo awr xozh xe kie xob oqen e qkuywus, otv vdw anirabr hcuw hoje muwf dlit hayq nodi. Em erufnkfikb volh lora, sool oxt nfiinq du ab jcoc tocu viome kaviodc jbluom.
Ngim’y ibb mex nnik myiqqap. Wupffewoviqiusv!
Key Points
An app that supports deep links can be launched in response to the user tapping a link.
Using Firebase Dynamic Links is the easiest and most robust way to implement deep links in an app.
Dynamic links are just special deep links that:
Wasq ewseww vepjepawr sdochucps
Gisx afmags exw epwlezgj
When generating dynamic links, use the functions provided by the official package so you can build shortened links easily.
When writing the code that handles an incoming dynamic link, you always need to consider that your app can be in two different states: closed or minimized.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.