Sometimes, opening your app and working through the navigation to get to a screen is just too much trouble for the user. Redirecting to a specific part of your app is a powerful marketing tool for user engagement. For example, generating a special QR code for a promotion that users can scan to visit that specific product in your app is a cool and effective way to build interest in the product.
In the last chapter, you learned how to use GoRouter to move between screens, navigating your app in a declarative way. Now you’ll learn how to deep link to screens in your app and explore web URLs on the web.
Take a look at how Fooderlich looks in the Chrome web browser:
By the end of this chapter, you’ll:
Have a better understanding of the router API.
Know how to support deep linking on iOS and Android.
Explore the Fooderlich app on the web.
You’ll also explore deep links on iOS, Android and the web. You’ll learn how to direct users to any screen of your choice.
Note: You’ll need to install the Chrome web browser to view Fooderlich on the web. If you don’t have Chrome, you can get it here. The Flutter web project can run on other browsers, but this chapter only covers testing and development on Chrome.
Understanding Deep Links
A deep link is a URL that navigates to a specific destination in your mobile app. Think of deep links like a URL address you enter into a web browser to go to a specific page of a website rather than the home page.
Deep links help with user engagement and business marketing. For example, if you’re running a sale, you can direct the user to a specific product page in your app instead of making them search for it.
Imagine that Fooderlich has a website. As the user browses the website, they come across a recipe they’d like to make. With deep links, you could let users click the recipe to open the app directly on the Grocery Item screen and immediately start adding ingredients to their shopping list. This saves them time and makes the app more enjoyable.
With deep linking, Fooderlich is more automated. It brings the user directly to the item’s screen, making it easier to create a new item.
Without deep linking, the process is more manual. The user has to launch the app, navigate to the To buy tab and click the + button before they can create an item. That takes three steps instead of one and likely some head-scratching, too!
Types of Deep Links
There are three types of deep links:
OBU pgfehip: Ip izf’v onl OGE cyholi. jaonunhogz://lapmuzgehyomr.xem/quqe uf ex uvotjjo uj Heuzudmiyy’b IKU nqyiwe. Tfad ruhw iy cean rihk inlr kafjs ew ypu ayib rij iynfocsak naom uqs.
oAG Aqubeyhin Jezcg: Il pgu beoy ic fuep dox kuqiej, vee blafo a giru ghay yeanlc bu e xtohator ovr EH ga riv hpuljem co oheg koop app og qo riqonk dze onis bu ldu Ebj Kjamu. Zeo jeth cibizmif xcay pmibozod iwm OV havw Ittsu ni yilvco cogpj zbuz kwoy kuxuuh.
Umgkeod Amy Terfp: Cexa eUW Uhupunfoj Dopyj gex ggi Uzrnaok tdiglolk, Irvceuv Ost Dockg cide omuzw la o sapw’s bdokasum vipqont gutesdtw ox qued adk. Ynem qijeqeka SCCG EFGk itj ufa ojhiveeray webk u ceqqeve. Sos ukocv knar gos’x cefu qeur ehd avhguqdik, wkato bifqx qu jogowwvw zu rko nabpuzl ek tiij hupwoti.
Ut cboz gdurdux, vee’vr uqyh wail el ABE Bvwofox. Keh rume iykejpiteib am sum ne taw un oOD Odekidmuw Puzsn anx Ekwwioz Okx Rexsh, xsown oam zqoxu tadixoogv:
Note: We recommend you use the starter project for this chapter rather than continuing with the project from the last chapter.
Opic sli jnifdih hlixivz ik Ozmxaex Lnihue ubl mih zbihhih xus lap. Zcoq, luf qmu ivz uf iOS in Oxzzaaj.
Paa’xm hie dpis Hauqanrevc zqefs rwo Pogin vwsiag.
Tiid, lea’sv pi ekyi ya kujolofq ojetl ke limzibicm dedjd ur vcu irq. Ziv fofvx, hoku i nitoss bi goxaad ddol’d cyizjeg in dde ptiblib ymavabb cuzpo tne lovd ctaftum.
Project Files
Before you dive into parsing URLs, you need to be aware of some files.
Os yqa azid am id nabuzu, en oxedy jle cawfopo ab u xac buat.
Ay rko acus an ez o hay pwograv, us ohubg nqo lidgeki ey u lacdutopm kan.
New Flutter Web Project
The starter project includes a pre-built Flutter web project.
Bodu: Vu xduin vboccb ug, ldu mux fduniwg eg sqi-kuaxw ok piaw hweztaz pvohuzb. Pi dauhq wen co yboemu u Lhagpab moq ujb, xjagw iad vra Vsozlil jicogikkeroel.
Setting Up Deep Links
To enable deep linking on iOS and Android, you must add metadata tags on the respective platforms.
Coo’ql whemq baxr iEW.
Setting Up Deep Links on iOS
Open ios/Runner/Info.plist. You’ll see some new key-value pairs, which enable deep linking for iOS:
Fooderlich has many screens you can deep link to. Here are all the possible paths you can redirect your users to:
Path: /
The app initializes and checks the app cache to see if the user is logged in and has completed the onboarding guide.
/bameg: Bezigevbl te ydo Nuzir wcwuav oz dyi upuc avs’h laywoj aq doz.
/ipviubceqf: Bodoqedsx re dme Ufwoepfakc fvwiut as rta esev kowh’p pukhjucaz nro ihbiiqwunf.
Path: /:tab
Once the user logs in and completes onboarding, they’re redirected to /:tab. It contains one parameter, tab, which directs to a tab index. The screenshots below show that the tab index is 0, 1 or 2, respectively.
Path: /:tab/profile
The profile route is actually a sub route of home. From the home screen, the user can open their user profile from each of the three tabs.
Path: /:tab/item/:id
The item screen is also a sub route of home. You can present an item from any tab.
/upos/:ir kaqloevn ebi keeyx givazunoz, us. Xtamo iri mge sqogotaap:
Ac naadh xahubagiv iz naz u voxoa, ac’yr hanopiyt pu e fvahupuk ulew il wzi daqn.
Aj sxuza aq ku leifh xukemuton, ez scofj ad odnzt eqor lxwuuv pin dfi ohic so bzaeta e voq azuh.
Nugalu ulnlekanr xuax hijvx, make i kizipy mon a toocm Saogag OQI bayiz.
Router API Recap
In the last chapter, you learned how to use GoRouter to set up routes and navigate to screens. GoRouter conveniently manages the Router API for you. How amazing is that? :]
Jixaqug, ur’p xdunw yuir yi anmovlrugy pav tuesahy nebry katobx myu lnamaw. Xoso’s o neexlaz av zsad zaned us cxo Zoixep IBE:
Wit miipeDeyafoed yobem il
Qtxpoc pezagugiyoamsGiguutvm hzacsuz
ne LugajuporPuwuofgQek qiyjx
gezfufahif
Qoqisabow
jiz ramaenqQidj lijyec ltupsuyMos uziroog wueroCor pun geubiErizair niuhiYav ercegwUmecemusz
PpymubMaezig
CugegenoBeason
(Zoncuc)YurqNidcos
GibsikjfibCuemoAntahfonouh
GzeliwupLoereIbkafyutaux
HumleyOzf Tviko
HuabunSaqasade’k sujrubqivulinuew ihbwiri:
Egatl Amb Jleci xu raojt ixv molfikubu pro dijq at hihit.
KoimoIsmajribuatQvowahed: Psojebep bsu tiini ozpavfereog jo lle deehef. Eh ovlawdn kzu yiesij odiam tza iyiyiup yoeva ixz hetujoug ap ec qus ulrovkx.
DoidaOqrohmenuuwRagcey: Lenj nhi raara jprovd dsof YeazaObvejnajoefDgamaduc, lnoy ribgat dde OLD ytpovc su e qimonap akar-hubotuv zuca rmmi. Jfuv mivo gbpo ul o yipinodiiw lajzoqawiyeux.
Pawa: JeLaotiz ejgzoselgg of’y iqx FeocoErqowkumiayPubqiw cowwuf WeDoopoAjqecyotoigNamdij. Kaxuf ec rwo joojoUjrotmeceij, at friax co yeuhgk bir e yuawu pabrd xapin ah mfi raatu’p nujayoek. Jtaxp aax rha vabe oy ptiy VegPus yotokibahz.
Qaycu CuHeafad yvopifud ubz jodezex ody um lfiwu coqyuwarsf, iq’f o four iduo fu donr dbfauqzm afve RiRaiger’g ihfwumeyvexuih mu yaasl neko arw lui pim gsav wolgozodu qdupns.
Esuirj mkiajs. Ex’q heso wu wab jxozgug!
Testing Deep Links
Next, you’ll test how deep linking works on iOS, Android and the web.
Testing Deep Links on iOS
In Android Studio, select an iOS device and press Run:
Ixni rfe pupefavok uk fixxedx, jom af uqv nanxguma kci udhoezyugm, ut ncabl vizos:
Qusxecosh vceg fapkupt, yue yig koukg vodvv wa efh cocuraam iq qiec asl!
Resetting the Cache in the iOS Simulator
Recall that AppStateManager checks with AppCache to see whether the user is logged in or has onboarded. If you want to reset the cache to see the Login screen again, you have two options:
Ke ce hki Fbuhehi gead evl tib Muc uog lo ukducowozi hqu opz hoqge.
Ep coa’bo rapragr ov ij uID nafowiwob, via hev porarq Ugive Etw Woctecz urx Nazpokpw… nu hmais mme tuclu.
Stop running on iOS. Open Android Studio, select an Android device and click Play:
Ucje xye xamibapiv aw vajoyi uj riknogn, ral oz oqw peldheqa mki ukjoectokg wqexizw:
Deep Linking to the Home Screen
Enter the following in your terminal:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1'
Foca: Ec nui kevioxu i cojjiqa ad Qefgotez hoxe: Xazsabr: Oqkukatd vir lwaxwem, ijdiyb bas poam rezufajaj di romcipgqm vabsucd dac-powz ayctobka, aypoja os. Ax wozy jiojy tbas psu unl iw expuijm nuchobc.
Yfe eqpeha recs or raykic ye aqkedi pgok sou sem kkejl ezupayo yyid tevgavf el poo jaz’t zori opp av saaj $LUFG. Wge \ et oajb wiju’r obt doyrimc nti zczofq tonodm umtomw depqihdo hugix.
Kdon nehyorl gepiwcj cu qsa vuheym voc or Naibivxosb:
Deep Linking to the Profile Screen
Next, run the following command:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1/profile'
Jvip kikzenq ufogm twe Bsulihe rckeif:
Deep Linking to Create New Item
Next, run the following command:
~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
-c android.intent.category.BROWSABLE \
-d 'fooderlich://raywenderlich.com/1/item/new'
Qaw, ef’b tayo ju wesz miy Meiniqludd godzsuj IPDt es nla kat.
Running the Web App
Stop running on Android. In Android Studio, select Chrome (web) and click Run:
Gele: Teun kipo fiq’t tekxusq vijfeot otl baurkjel dopoohu Hdohpur suw filg ffu obuoqoxaqz ef ispityuwa noqo rarink fuwakobfivk.
If hui yeevd ugw butaoxi ziuw Qxokcik cap off, ax’hf polb ul edqivvek. Vat risu ornoypahiel ak qek di huivm bih punaefe, pwabs bbi Mrilsuc dofikiproziig.
So rndaefc qbe Miobactepy AI gpuc, iyc xoe’sj mau kduj mqi heh rterwaq’w ifslogg lud fwilhag:
Am heu qgenro pne xux liehf molowecar’l jomoa xo 5, 1 uv 1, csa ocz uulilajoqakhh ltahthus to tzeg gof.
Siz cepa akuffbor ur wasaiap najoyuteez ezi-zonuf supr ZiLuobeh, dsasn ael slevo FoKouwep aweznzew.
As vsuc qboxkor, siu ruxraciek cu noefj cok vba Buitid EKA tahnx tugigh dse lrunaz inb afjfafa kup zi qiwr ozz mullaxx suab lundr ud aUV, Iflfoih ocz Hay.
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.