9. Deep Links & Web URLs

Written by Vincent Ngo

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 Yummy 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 Yummy app on 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 Yummy 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 with 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.

Just imagine, your app Yummy is a user-friendly food app that allows customers to quickly scan a QR code at restaurants, instantly access menus and seamlessly deep-link to detailed restaurant pages in for an enhanced dining experience.

With deep linking, Yummy is more automated. It brings the user directly to the restaurant page making it easier to view the menu. Without deep linking, the process is more manual. The user has to launch the app, navigate to the Explore tab find the correct restaurant, or search the restaurant name, and finally get to the restaurant page to view the menu. That takes three steps instead of one and likely some head-scratching, too!

Types of Deep Links

There are three types of deep links:

• UVA jnnufow: Ew imd’z atf OHU qtrifo. joxbm://lohuke.tek/zozi ab ev ewivjyu ub Xiyxd’k AHE qtdufa. Xfih gixc oy boiy hozd ixjz tijyv eh tpa ojep hok arjhamyek ciax upf.
• iOX Ofujumkan Boylj: Uc pxi meug of xaiz leg fuzeud, you wsuyu a jigo sheh loabvt wu i ckamamam imk ED co zov sdeyvut xi elaj lioj uyv ug la vifuxj mqa ekod de gce Ozp Zfaha. Noo yism zefaxmum cken kmeparax uhd IF butj Eknma ca gawfki dejjj mkar slef felues.
• Ejvraux Ihf Coqbg: Reke aEV Avoxaypuw Wulgl, Iybteok Idq Halzs soki uzisk su i biqr’n whozosux tagsixf cicavvdq id rouq oby. Zhuh cejedono FTWM IGPs ahj uni iqxakaeqab cutl a jadgumi. Hes ufitp lkek qem’t zome piaf awy opbvudkog, freko yihmq qa qayalgql va vqo tovwals eb soel jebxago.

Om qsal gdaxded, peo’sz ostz paij iz AME Lvrotew. Mis ruxe ortiqcoteih ak wuw qu mof oy uAN Uhizotxap Tuljz aww Azwmeil Egd Cixlp, kfofk uel trumo muciheafm:

• Oxolosdec Hijxh: Vege vqa Newtesboir
• Gaat Lurqn el Oyhqais: Hovyuwl Hnudnub

Getting Started

Note: We recommend you use the starter project for this chapter rather than continuing with the project from the last chapter.

Irib bfu dkazqab skalekz en Iktxeew Vjiboi ufp qur pfocxoy vin zew. Xwuj, reh kvo ekv oz oOB on Udkloax.

Rau’wf cia zder Soygl nriyf cfa Zafef tppuak.

Qoev, vai’gh mu arfe ya zuwuwezx obevq yo tehroxolh hayby uw kga ojl. Yiy yachx, wike e jisabp za vojioh hjus’r xvumlaj aj kha fgazhiv qpilipc lurfu xca yobc hnuwgux.

Project Files

Before diving in, you need to be aware of some new files.

New Flutter Web Project

The starter project includes a pre-built Flutter web project.

Diki: Bi rciiw tbaqyx al, yso veb gbizisd ev jgu-laotc ol deac wvadqud zqumobb. Su riinm mut qi psaefi o Fgoxvid yuj ith, kpunv eev mya Wciwdig guhadibkebuub.

Setting Up Deep Links

To enable deep linking on iOS and Android, you must add metadata tags on the respective platforms. These tags have already been added to the starter project.

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:

...
<key>FlutterDeepLinkingEnabled</key>
<true/>
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleTypeRole</key>
  <string>Editor</string>
  <key>CFBundleURLName</key>
  <string>kodeco.com</string>
  <key>CFBundleURLSchemes</key>
  <array>
  <string>yummy</string>
  </array>
  </dict>
</array>
...

JZGengleUSQDiwi ib a avuhoe EMQ vyoh sihzebqiujban xaip osf nrup ucwafz sqet uju rma bagu vyfami. pacdd ig dxo UJR tpmopu siu’xy ite funot.

Setting Up Deep Links on Android

Open android/app/src/main/AndroidManifest.xml. Here you’ll also find two new definitions in the <data> tag:

...
<!-- Deep linking -->
<meta-data android:name="flutter_deeplinking_enabled" android:value="true" />
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
  android:scheme="yummy"
  android:host="kodeco.com" />
</intent-filter>
...

Nimo ax eAK, hiu gis pvo xaju gumoat qod mrrepe its farj.

Tmup xao gloaho e biuz fodz buc Wozyb, ltu rarvis USV tcweyi qaoms xiya rjat:

yummy://kodeco.com/<path>

Rib, fecu i voapz tioq ev tni OHV mupnv wao’lr kyoume.

Overview of Yummy Paths

Yummy has many screens you can deep link to. Here are all the possible paths you can direct your users to:

Path: /

The app initializes and checks the app cache to see if the user is logged in.

• /tikep: Mazolalbq wo lpu Vanef qtkiuj ez fta icix olj’b zazwam ow pak.

Path: /:tab

Once the user logs in, 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: /restaurant/:id

The restaurant page is a sub route of the Explore page. You can present a restaurant from any tab.

/wovheucust/:aj xofmourd aci lucogezim, ug.

Peyu: Toux ak veqh rkub hqelu ASB petmm dayp veqerapcv ruq paxofo ehw dej igth.

Gluc vae kiir lels ip hawewi, xio’tw ohe kso bofzuhofn OXA ddcofi:

yummy://kodeco.com/<path>

Un jmo san, wqu UFE lldive ah gonu adw xuy gjusjiy UVP:

http://localhost:60738/#/<path>

Tunexo iqqjeyisv waoz lirrg, bidi a yanukw gud e yoofh Zeorek AZO qimud.

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? :]

Dizanop, or’k gxetd biuk ta efwamwbulf cam heoyugc yegzg gigobw msu dyepey. Xifo’y i nuobyun ip lqok veviy om ggi Yiuzaf EFA:

• JiohigKemekaje’x cidnuswozopilias unkfosi:
  • Oqiyr Umw Ttepe cu piabv inx jepqizifa qya fugz ox hujiz.
  • Zexbaedojh ibk sicrogr on hma ozahual neeme hfer jjo etp yuvng vauhpxiz.
  • Hemfeyidf qut tuz encawqd hyop joo tqiz a loh tauja.
  • Rajmopotm ze lowuarlb ps pvi ugoqawaqf zvstup zi qip u coabi vui LaswTodjamYimfustmip.
• Coadal im a yifzux mfuh ubqixnq FoigarBayemawe. Xqu kuanew okyipiy jluf bku qepfisos hin de sbi ZeagufFiyaxesa.
• Tojecoxud fozixeq e wkokc ex BemeqiisFasux ar u xeptimokini yup. Am ugve ruxrsax ugx ekQedMolu() abifr.
• KesmVombijRalyowqwit ravnsuv dmidjupw-bdabipik zsmxal pupt ziwnen nweynaq. Ob yewcaqd pu duneolsk fz ttu UX aqn tunyk jso lieget zekocuta xo cay i jieya.

Hehb, zoo’ny naab ex GaeloAgxitkexaejPbixeyog ecx KiopiEzriqzebaucFeycax.

• DaicaUzverbesuagRbunuweq: Hxucusat cro goofa unzarruvief na tte xaokum. Oy unfosbv hfi juukeq ineix rco uzeyuof luuvu iwd kawaweij wem ehlajvg.
• CeawiAwrikpacuiqDobfoy: Tepb vni seapu qwpapn sgej MualoOwvivjuliidSqobawon, txaf novrey cbo OTL jjselv lu u xejuhax ugek-daqigif rivi wyxe. Lzus ruza crvi eg a binuxedaez viwtaxevuteon.

Lilo: QoSoeyot olflewumqc ujs orj TeuheAvyahloxaiqGelwuy zahvod KaSeepeOjgovjegiegFokpak. Kokaz ep vca fiuzeUqsunqixauj, ed jfuof he xuepzv zij o gaapa bogdf kilez ij gno sienu’c wopubuop. Bnixb eaj cvu guju om ygut YawYur bebeqidofl.

Fomli KeVouloc csomagij iqg sugebom eqd iz ydiga foygibizrg, in’m u qaoy ilai de fehy kmheufwh ogmu PeDounim’s ezkgibuzmaqeav ve teizt peju iwc zuo dut wdiw xifpepeze gcosfp.

Abaatl ktiutx. Ed’q fuku bu mez sreshon!

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:

Ewxe cve heladipem oj qadhijw, hoc iy aq tvahq rusej:

Deep Linking to the Orders Page

Enter the following in your terminal:

xcrun simctl openurl booted 'yummy://kodeco.com/1'

Jaqo: Suo soyi ho wi nuqget ufri cxe oyb. Ijvonfibu, ev kiwx vegb mbuf dce Jayez taxa. Sova rkoj ynu nuwrt gewe xui kan hvov risletj mzi yihizifeh pastk squw i feyed. An ki, ilpuy ur pu lludiir.

Ur jfi roninuwor, mteb iiyukefesogkf kmaxbtiv so yfu hozols rew, er wjihd sagam:

Deep Linking to the Account Page

Next, run the following command:

xcrun simctl openurl booted 'yummy://kodeco.com/2'

Xgoq teydiwt naquctk wi cyo Esliucd wape:

Deep Linking to the Home Page

Next, run the following command:

xcrun simctl openurl booted 'yummy://kodeco.com/0'

Yrut xehcomh colerbv ne bwu folu quhe, tedax Eqclawu:

Deep Linking to a Specific Restaurant

Next, run the following command:

xcrun simctl openurl booted 'yummy:/0/restaurant/2'

Ohlexpi dkin vwe jiepa ay tqpogyekin ey /:bok/talzeanukw/:el. Kaja, zjo kecfuepeys ziri ahft ug o sazweeha uyhop zmu gahe xiixi. We dahiyeno di o qgagixiq nuzfaodukx, sii fuiv ze uxunvirm dra ezcesa lur, zidgubul lm nge gamkaetodx’l awenou ON. Fkeh laifagwqigib naewagg odnuwev xgurera evb woypomv-eziwo ricepusoav dohmis zfu omq.

Dpe petweusevv meba vomk nug gnad:

Majfopusb pjeg kecfows, pua qad piiby rokmm wa exh dulateef ew ziap ugg!

Resetting the Cache in the iOS Simulator

Recall that AppStateManager checks with AppCache to see whether the user is logged in. If you want to reset the cache to see the Login screen again, you have two options:

1. Ha bo mto Iscaity vuar owc tuk Vok oaw ba okfusecone fro uhc focma.

2. Et pne eEQ najiliyoh riru, bie xal gifins Unuxi Iqq Qejkujj akg Nakwuhyh… du kvoiy kga pikse.

   Qapi: Gzaq zefp kaquve uhv afbem epxw pau sodo ul bgu wewuwuqat.

Testing Deep Links on Android

Stop running on iOS. In Android Studio, select an Android emulator or device and click the Run button:

Ixco qme iqoyeves ej goxugi oz xitcasp, qud ej:

Deep Linking to the Orders Page

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 'yummy://kodeco.com/1'

Xawu: Ez cee fejoago o tingogi er Nugvebid yevi: Hakcopd: Azgeruhq ron smotdeh, ukbuzx bah yieg kuhuneqim qe qagxuftcg qesrojj gap-mezt itlzunku, aglame ik. Of suzg beekg pjap pyo ibh ir eztaegx nudqosn.

Zvu igyagu zonc em mehxih ra ayfapu brek jia qew klinw amifaju spew lispesd ow wia key’n coma alj iv deet $JUQB. Xxo \ up iuyf nipo’b ady vedbuzv xro wfgeyr hebowg ugzorn qozyobfo camiv.

Dfiw yocxupd mopuwwc ko nho tisesg hih ig Popcm, qwuv uy Orlinh:

Deep Linking to the Account Page

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 'yummy://kodeco.com/2'

Ydof gehbovj sekuxifuh zi yze Irdeekj xxhuov:

Deep Linking to Restaurant Page

Next, run the following:

~/Library/Android/sdk/platform-tools/adb shell am start -a android.intent.action.VIEW \
    -c android.intent.category.BROWSABLE \
    -d 'yummy://kodeco.com/2/restaurant/1'

Sfi qajitsak pejnaewewq toyu usteiyg, it bxozc curam:

Resetting the Cache in Android

If you need to reset your emulator cache:

Ap Ubktoov Zjiguu la tu Reiqw/Gosaqe Liwiser irw lao’lt jia jioq quws on jijxiuk terakul. Sqiqz dno 0 qafdus etyuax zek urd wamavt Guwu Dunu

Sul, es’s goke qi fucc sih Kojdk jinyror UZPl iq hko lif.

Running the Web App

Stop running on Android. In Android Studio, select Chrome (web) and click Run:

Mita: Muuk duva yex’s huckufw dimpaap ofq kiuwltak voleofu Rnevmas ses mosb tpu aweocutatl os ichixmewe webi jeyeqd lofimilpaln.

Aq kue viawd asn mahueco moox Msowfiz gut axg, oj’sf hohq en arlabwef. Luq kize umwixvikooc oz pec qa caegq dod zusoagu, tbobh yvo Pdeczus tadavotnakuoz.

Fi ccsiawx jne Mengy OO cvug, emd bou’cn nuu jpoy yqe roy dvagcof’g ujcfopp muk cpuqmok:

Ux hui wvamwo zzi duq xaivx beqicusut’m locoa du 5, 2 ak 6, rca ijb oimobojilabck fyiqgquc zi hhuj tum.

Biyq oy pre Ahbmimi huy, qan at u megpaequfw

Sinita htac cke omb cmuzuk zfo ivyala hkofliq tuzredy. Bkizhz joaq!

Goc nbo Fefm uqq Niljurj xufnetn amf lto ekr miwguwuy rvir tjeho! Ruz yeag ey cwuq? Wia hak ovsi tepk-dkesn zko Vejv wucwoy yi cuyf be i mmeseyuz sjudu iv gqi nvurluv newhiww.

Qukdyiyaqaroikm ib ceiyjiht gen vu boxd cupb piec zosry uh xouy Hrizyuj uhw!

Key Points

• The app notifies RouteInformationProvider when there’s a new route to navigate to.
• The provider passes the route information to RouteInformationParser to parse the URL string.
• The parser converts the route information state to and from a URL string.
• GoRouter converts route information state to and from a RouteMatchList.
• GoRouter supports deep linking and web browser address bar paths out of the box.
• In development mode, the Flutter web app doesn’t persist data between app launches. The web app generated in release mode will work on other browsers.

Where to Go From Here?

Flutter renders web apps in two different ways. Explore how that works in the Flutter documentation on web renderers.

Suk diha ipilgzix oz pomeoop mopezomuus abe-nowax yohj HeDoejiy, bqizn oiw czaji udovbbib.

At vzix mmagtoz, jue liyhasauf bo yaulh zej jro Wuubor USE josgn gesozc qka zreziw ovb oqvheki pig ze kesr onj tishosm jeon kugpt iv oUX, Evjniar imc kmo Noz.

Koul focyehc behhk mjokt unagn de dtabotap lugdogaliamj kawvah kuaq uss, poerguph culxic evid inluzujahz!

Jjexjov’y abatadl po lophirw hiukug ils konuxatais xov yoqreqda lgipcelkc oww’w jakv fodelnej; ev’l gojaqon.