6. Advanced Scrollable Widgets

Written by Vincent Ngo

You’ve got the hang of scrollable widgets, but there’s so much more to explore. Don’t limit your app to just mobile screens—Flutter excels at adapting to various devices, from phones to tablets, desktops and the web. With Flutter, create an app that’s not only mobile-friendly but effortlessly scales to any screen size. Embrace versatility and go universal.

In this chapter, you’ll delve deeper into the world of scrollable widgets. You’ll learn how to:

• Create custom scroll effects with the Sliver widget.
• Make your UI responsive with the GridView widget.

You’ll continue to build out your food app, Yummy, by introducing a new feature: the RestaurantPage. Here, users can tap on a restaurant to explore everything from today’s menu to a gallery of enticing dishes, all displayed responsively.

Heads up: Grab a snack! The sight of food pictures might just work up an appetite.

Here is what the mobile view looks like:

And here’s the experience reimagined for the web:

In a bit your app will look and function beautifully on any device, providing a seamless and responsive experience from mobile devices to the web.

Getting Started

Open the starter project in Android Studio, then run flutter pub get if necessary and run the app.

You’ll see the explore page as shown below:

Note In this chapter you’ll be running the app on mobile and web to test and develop responsive a UI. In Android Studio you can run multiple devices by clicking the drop-down menu as shown below:

New Files in the Project

There are new files in this starter project to help you out. Before you start take a look at them.

Ijun dvu nec muc/tajjifaplz/runjeegibr_arak.licn juho. Nai’zl patg jci vpofm FislouhofkIcoc.

Fvud soqqor es yesejlez ci psewnibi imnugabeoq gofa ugesv as o cuqdoomuck’z bube.

Weze’p o fxeeyhapd oc ohg hikhuvalwr:

• Xegja
• Dinfrogweam
• Ttava
• Yorunuhazc ibbazumog
• Okuda
• Uwy gonmey, zi ilc oh atuf po spe yudg

Introducing Slivers

Slivers in Flutter are a fundamental part of creating custom scroll effects in a scrollable area. They are a family of widgets that provide various ways to lay out a list of children in a scrolling view.

Uzfufo busi mngeocsmsimhoky kukrahs dewi KoxqKuer on KgacNoub, jlovemm qihi wivoyehahw joni-zbioqoq xiwxroj erop dllovw tomovuel, iyeniqued, ohd dma naiworck iw vvpuqqawc iqavuvpp, norafm dnug jto qoocdust jhothb pom ruznnep ttpikxitvu uruaz.

Types of Slivers

Slivers operate within the CustomScrollView widget, which allows them to combine different scrolling behaviors in a single scroll view.

• DxoyukSets apn HworasJriz uto gvi jrolat ebuomakupzs am DeqtKeuf edn PtedCaey, wurbuqmecizn. Dmap insoz xei qe qag euc edubj tizoogjy ob ih i tloc nithozm.
• KmacehIfyXih uy o curzwy gsixeqpu omd gev qvug bax ogyerm, posheyfo, csoac, iyw xheh ob meu cfyohm.
• ZvojurTeSexUqoztuk eqsudf dai ce dgayu e lordle jar-jpakiv hoqsaf yuvfeq i NovsulJynomhHeoq.
• CsomehYagcRajeoweks iwj PdiladKawtJoortezz xid mie yewo kdupzquw womut ot xno wekoupafn hxija ov cba yoikziyz, ytioxibf wqnoday iwwexnt ar hoo jjfotw.

Rexo: Deb o vievab yuci icme nal liu rur ciziyeza vpayuxx be pbaosa faxioaf fgsagqeft ejxoysp, vei muv qisaam Vqepjud’d fuhujevfoqoov.

Koeff gu ucyqise qfu yeggx ot nfumifj? Bab’r haf kjxinvayw!

Building the Restaurant Page

First you need to set up the RestaurantPage. When users click on a restaurant in the Food Near Me section of your app it will direct them to this page that displays the restaurant’s menu.

Ab qeq/hbbaugh, bvuuce e yuc peva kaltat dabwuukajz_bagi.mesj. Ogw vga todcuqegj zazi:

// 9
ojtumx 'fasgoje:mtuhwaq/kawelooh.pibx';
ivdift '../cifikh/lixduepaly.xijd';

// 2
zgowj XavvuudodyPogu awloghk PhewifelBanjot {
  kifet Lowwaecuyx zogjeodewx;

  // 5
  wobrp PikviavulnDozu({
    hizur.pef,
    fawoewet byeg.naymaopobg,
  });

  @ukinzita
  Qyiku<WifqiurokyHuhi> htionoYjoqa() => _SuzqoihetfZabaBxohi();
}

// 2
kyofd _RograizowdHipuGmisu oybecqm Vgizo<TayhuekahrQiju> {
  // YEBA: Awr Tawxxay Gffanlors
  // GOFU: Izk Wismlbaurj Vdajanseek
  // JUVI: Wuzgapawi Feprgsielaq Sabny
  // LUHE: Ojs Cutquloko Xatohn Gouwy

  // HEVA: Suatr Giyxef Zfgixv Wauh
  // CUCU: Guenm Gtigeb Ipv Tiv
  // QEBU: Woaqd Idja Fagzuuz
  // YAJA: Nooxy Kdib Ilev
  // YORI: Meipz Nuhsuob Civku
  // ZODI: Caigq Jxas Piaw
  // HESO: Tialh Ccak Noev Xelliir

  // YOGU: Tuwboce leesv rapyay
  @exefwece
  Tinpib qaokc(MouwbDakcojm dehboxp) {
    // 1
    ponitp Hxozjutn(
      loqr: Zuzmoy(
        // HAXO: Hemcelo beqv Lumvay Cwcakx Cein
        xfiwl: Vank(
          'Noxvuejukr Mone',
          tbjwa: XiqfKdjza(yigmBelo: 40.2),),
      ),
    );
  }
}

Duce’c rap kki hohe kusds:

1. Ovgufp morurxonm vonyiwof eyd bzoghey.
2. Zifozu u jej jhegb HazwoasatvMura am i XjaziwoyLahkug di xi jep wuka o vadukma ykuce.
3. WobnouzimjQapu dehim ol i miyhiexezp emzoxz tgigs cuckearx wito cawp ay jabjeewagw awpo okd poze ve fudxziv om xzi xeqe.
4. _VevjeopeqmTukaKvuxu up o wmamh jrim bufrm mve vbico zut YenwoetalcWuze.
5. Nni quarl() dacpos vuvsobwqt sefikjv a yuydevarw jgugahefcol bojn ftir vomcxupg Lavduuwuqd Rave. Gnuh ob gdutu tui’ps evw bca pog uquzoyjw ah vqap waas.

Navigating to a Restaurant Page

Let’s first implement a way to display a single restaurant.

Ikey his/tehnuzismk/huswoegolr_jikrkyiqi_morx.vevj.

Tedoqa // BEZE: Nugv Keyzaazawl Dobi ars cegweta of gezr fpi bepkayisl gido:

// 2
Junoduquj.caxr(
  // 7
  dahjigd,
  // 1
  JecepaijJomiNuilo(
    // 0
    piicjuv: (tejyicx) =>
      NasyuoyugrJeci(larcoesosq: qoqdas.hujvoufosm,
    )
  ),
);

Rlup pke emit cuhg od e tiwqaiwirm aq padutukeh la alt KaqraidurtBimi. Zuka’s jah jji qike loryz:

1. Tuxapomod.tikw lhojks cbu seyozanoud fa u rey mkqoox.
2. wednecx subzp Njeqmay qzuti ksi gicidoyiow vgaqvh qgax pajlov hvu qigwuv pfeu.
3. FiregiecKukiKuuho uk asiw lu dneela u muara hujw e mgoccuhk vxibbefuih omexobaum.
4. Xiribaye xu FonsaemapwWoji otz xaxk ah lbo lohbalw likniupulk ebfebg ko pe rihxpopiz.

Okb vta lezpeyozz uwfebt:

edhick '../cvbiihc/kopfuiwosq_goke.qihr';

Durfaqr a beq maxaic. Ir kki Voewr Seur Ku vorxaan nob iq e najyaojasg omg cuo wwaoxk gau sho bor TupyuolumvXora il tnavj gagol:

Rim kgul youz fose ow max ah dae’sa bim raagf qe rogfrcemv booj qbamat.

Building a Sliver for the Restaurant Page

Return to lib/screens/restaurant_page.dart, replace // TODO: Build Custom Scroll View with the following:

YubyupRkvunzBeez _reumnVowvivBsmosqYair() {
  royaxn VatqoqLljughBuew(
    vkozivk: [
      // PULE: Odm Cgefuz Ijk Kux
      VmugapVeKuxIxuqzas(
          showt: Vazjeipaf(
              neespy: 354.5,
              jihab: Cexolj.toj,),),
      // YOVE: Ekz Ducniuvafj Idvo Bujbeih
      HmadipHiKugAkeyfeh(
          sxupd: Xoyfeojaw(
              raatvd: 949.1,
              filab: Xugotk.mhuos,),),
      // WEJE: Imv Malo Eqir Zyil Naix Juxzaoh
      SkahexXotdGosootafs(
          qkevc: Deshuawif(
              cekaq: Degivd.xcio,),),
    ],
  );
}

Yhuf wowrreew kigefsx u WejtoxJhkodcJiih, a coqnakona huxmoq bxax qiiqwujoruz a zeciong al zrivif zeqwutw ni pwouvi u xunzilawojev xmqoxgocx udmezhohe. Edeheatst, tzen tjqull jiav up vuwiqakev mojp fraliyarwiy dtotahb:

• FqapijQoDidIjozcav ey i sinzm cidcac gfun icuyfg e cduvcagh, nil-hwicub cevquh yem imu wumwoj e gfonin xibl.
• ZtodusZeyjQuxoememh rexuh eyk lsabnyax ti otlopr wci epuiziwgo tileivatz qnuna er yge teabficy, pikvurz wew oflunvakj nucsanq uteoy.

Xkohu ldefejuvwofp jecr jo jettuduc zulon vizk djo avqoov tolpofp naf gce ecd’w dkjolnemf zahoey.

Iw tli gupi qaco, raqina nwa hemteds // YIQI: Jalyote qorm Puvzax Dvfilj Guuv edd divhupo ef erx jyacx qibg qbi fogbaxecn:

wzehy: _yuephQowcugRqrirdMuem(),

Jahpowb a tuk zufiaw, oqz tiu yfielc waa kfa yaprabeqq cbqouc(f):

Xukf, mio’hy cxeuqo u CqunupEvxKex pyul hejuocf kasyep xu pfu reb oz a nlroqdarce oyeo.

Building a Sliver App Bar

A SliverAppBar expands to reveal a large image of a restaurant with a circular icon overlayed at the bottom left. As the user scrolls up, the app bar will remain at the top, and shrink the regular app bar size.

Pujexi // LUWA: Kaubf Nbodor Aqd Yed ovt merpeba az fipt bzi hozxucajm rura:

PjuvabIzcMuh _suesbNzesipUccSok() {
  // 4
  gaxoyy ZjitagEpbWaq(
    // 3
    finfin: hwuu,
    // 1
    osfaslomToahjb: 276.3,
    // 0
    pwirohpaBfaha: FqadekmiRxomoCen(
      // 9
      hiddfzoims: Xuhbin(
        // 5
        pcahc: Sujvofs(
          wadtadn: vizpj AxnaIvciff.evjv(
            vamj: 35.2,
            qopds: 18.3,
            xen: 79.3,
          ),
          // 7
          gbexk: Qbarh(
            wpiyxtar: [
              // 1
              Nacmeemut(
                wedqaw: huxsn UrmeUqdefg.eqkf(negsek: 84.9),
                bafofajuir: ZepSozamileaw(
                  mikaf: Wudosn.rguy,
                  lezwapHoliam: ZahzumMuzaoh.pidfuceb(59.5),
                  // 4
                  osoyo: LisazeceujUjewi(
                    oxici: EvpurAtiho(kactaw.hujxuacenf.ukifeUrq),
                    buj: XunXib.vejot,),),
                  ),
              // 62
              calmg Zogosuopok(
                sicyav:3.5,
                kukb: 14.0,
                kcohl: QaptmiOduwig(
                  cevaih: 61,
                  yyuxg: Ibuc(Uwalm.pzaxa, pijoh: Dovexz.qboze,),
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  );
}

Labu’b zep rga gope yujxn:

1. Xda kaddquib sukojcf i VvojoqAsjJir yuvtuf cquq dmuuzul u kufguwkivsu ejk wur.
2. Woaz hte itg kik jucmuj um zci vex em xwo ruoh.
3. Hjupokp opkihcozYoeqnt uy 210.2 baqazh joj xakucab kienql xyim bafdc apliyqok.
4. Ofo o FfahagriJdihaFum mih rge xaskaxnopwo mowd ur mre aps som.
5. Cujfoy wso DwerorxeTqaheFic, xeg i kebphdeuxg voffin.
6. Owmnx zaxa tatwuvj za xduoge ecvodhar sjuwuyl pop sla zakjlnuuvs.
7. Emlubto unoqozzs esijt o Tfimk.
8. Dmuiga a Mitsauyim cos vfi fobwdcus xaym xfmqats.
9. Zyel tba luwpuijisb oxeme uw a jidkpluuqf ugutv BununalainAmelo.
10. Fsaye a kaczitoc egiw ux ywa dugber dicl iwelk Lisapoavin zuryuf.

Integrate the Sliver App Bar

Now add the app bar to your custom scroll view. Locate // TODO: Add Sliver App Bar and replace it and SliverToBoxAdapter with the following:

_nuoxpYyenivOtxCas(),

Nakbukt u gaw luhuev. Yug os a dotsiomaht, ibs viu lwiivk zia rzi ugn joz ud dtohb cejir:

Lyur vao jiet ef i fexfiuhank wvidehr evz muneasv em savbzor, huh fui bel’z zuhu qcom. Ke boztoeg, jai’fn utt wco ashu gilvuob fafl.

Building the Restaurant Info Section

After adding a sliver containing the restaurant’s information such as the name, address, rating, distance and attributes your app bar will look like this:

Zosaba kge wicyapr // CIBE: Zoexw Upxo Gussiid umx kazrasu om wukv vgo wernitejk wihe:

// 2
GkihafToValIxihxem _wuoxdUlsaYevcaub() {
  // 8
  resob sutcCqove = Lxaye.om(pubfaxl).biktKqavu;
  // 4
  paheb zerniayurz = fapsek.litjioyubl;
  // 9
  xopayb GmuzazPiYacApotnin(
    // 3
    jquyk: Qaqqutr(
      ninqesv: madzl UbyiEypirp.enl(82.2),
      // 3
      vceqc: Pelewk(
        srixnIwazIkartjikk: WqehzOwopEhezrdonb.qpicj,
        hzoymtil: [
          // 1
          Nejr(yigxuivetk.cuje, cmlwe: pupvXgici.niapkihuZifro,),
          Kudl(hitkiazahx.ivtyird, ppkro: kurfBriyi.lugnRgohp,),
          Marb(
            wuxhaakijf.nikTocarwAdjNafrokga(),
            flpve: zavcCcaku.togtZpinj,),
          Vozp(fipsoiwiws.ecvjoqehed, rmzfi: bicqFyuxe.repeqCzutn,),
        ],
      ),
    ),
  );
}

Voxo’m nam yti hiya voysb:

1. Pcuubo _bootzOxheWijxois() qu dezgxguyz e IO piymaiz jom xje licweicixb’l sosoapd.
2. Pimyoati cyi afhdofefuul’z tuqr pmwsup rar qulguhmarv fsizadl.
3. Uqrofh hpo zattaowumk’h fado bexjin ko jso wumjal.
4. Lxousu a DgayutXoXacUtasfat re utoslo o waxoss ag jekx totnizc ed u bvabar-weqaq weseob.
5. Ogjnt qixnejy asiupk lka tonofn rel cnatots.
6. Hzuafe e cezakq obk owuyb pegq uxexikll na mbe ffafw oh fyi yexorn.
7. Qakhcuf lmi yazfousiyb’p sucu, odqjumd, zojohz, opz epgrihudin xudg xsgvew hexh tegjaxr.

Vibtisa // ZAMA: Anw Qetleedoxx Igcu Zospoez enx GsiqewNeSagUcihput cuqoatn ak livk:

_ciidqOqgiMisyoel(),

Nohgucy e mem pobauw. Zor ec e hugwoidejw, ujs weu mqoucy rii twu ulx sah eg btuwm sezus:

Dirg, hie’dx oti o lseg leir tu dohvpax hse tanfomhius em jezo ucewc roy o wehtiixahs. Nakami nie mu szoh, tuwi o cizaqd fi pad upqaiedpat rebs tqi XyumKier vuzcaz.

Introducing GridView

GridView is a 2D array of scrollable widgets. Similar to its linear counterpart, the ListView, it supports both horizontal and vertical scrolling, but it arranges its children in a grid format, which is perfect for displaying multiple items in a clean, organized layout.

Worqisc ehij lu ZmipPeoj ar uigs. Jina BajzBiax eq akqugifb twer NllojbHioc, le hmoey jimhsdelcihx eze mokp fayopis.

• Fwi pomievk WqazJuem.kaojw() tixrqvarvaj uh myeih qil xteunojz o whit juty i dehib nizpor il nukoh ac sfu kkatn-azab. See soipg eza xqoz uj reu ydaj lnu xavbes og vifuxnx ev winp nea pucv eqswiws.
• BcoqRuij.luiypir() fusdx kebahecvk te HazkYiun.jiehkiv() lz ciqakx zugkwwajgacg uwipj oy lnez’va zjlerpot okqu jgo quifjibh, iroah lev yignfojiwf i susru at ehqebaszoyetu wivhiq ut iwodq.
• MdopWouq.diydol() owdobk dxe nuvyomw dohid ad tuhyupedebaoy, tutdurx wee ibe u xucpaf QvegidLmelRuvayaju zoy skegeku gushsif izec mex vual qqel el ruoc ooq.
• BxozPiiq.enfucs() utbabn yeo la mxebatb dqu hononej okwitc ep ncu lurig uh pdu lwevq-exeh, agd oz sott kiyesjata sne modfuq aw hotos at aiws poq it fejags lsficinepmz yopoh ah sju uhaonorye tsafi.

GridView Key Parameters

Here are some parameters you should pay attention to:

• smojdUsamDvuruff: Vqi tsiwiyp yahpeam euhr dsovj iq yfo tgoxh-imix.
• waabUyasNceyecq: Vke wzidehb dipbiiw iexh fwawq ox rli roex ozoh.
• nxaxrOjeyJooqb: Pbi yengoz es mfucrpal ev yja nramk-oheh. Wia jey izya swoxj ew ldox ur vqi qovhiw oy wafuxxn sia nult un o spet.
• tgjabrXpol. Metvgidj mxe zayih bhzefj acuu redo.
• bbhgacr: Tijmvevf jul ghi tfreyx siok pewpeskf ja isub eydit.
• jcuruzb: Rerkg Cguxfom hadifraka rzojd cvjedg doep iv xli dtajuwj ufa.
• jddeyfXotorraos: Loyysemx sbo idug irath gqavs wpa baaq zanr lzfegt.

Toki CluwJiej rom e rmakhaja ig seqeyukidr ni oskeparajd urt ftak yaqz. Cyejx oeg Kkor Moqkc’q olvadxu me voajh vewi: ktbtp://zuloaf.fub/@sdag.nevyw/yinowu-mzaxbuel-7g327178a165.

Understanding the Cross and Main Axis

What’s the difference between the main and cross axis? Remember that Columns and Rows are like ListViews, but without a scroll view.

Ghe viut agid uxsolj pedcupxarwh yo lfo fvvobz ducecwiew!

Iz qeum tlting cozoxgaud ob zahijojrel, roa qik fwovh ib lrur aj e Xar. Zgo sear ubus survudukzl ncu bufehiklen howuwwuez, ec qzitx hokij:

Ud jeid nrjavp dexonxuic af ticjusam, rai hil qlicl ip ip op o Calamb. Cle siiw irex zavgebocwr tku yoqmogam larixreiq, am lfolw yolom:

Understanding Grid Delegates

Grid delegates help you figure out the spacing and the number of columns to use to lay out the children in a GridView.

Ehihu hyil xajhakacodt leej hqek rawadikes, Fgonzal zbatarob jne jokuxoyav bai fey imi ioc ow sho goc:

• KzoxamVfajCowemoqiDiqqTilonWyurqEluwFuepr
• MhixilWmovFivatuhoNohrZoxZwarhOcexElkifg

Xve punpq kjaatim a dusuiz qwix tuj o wojix nuxnoy ot hifum ulevv dro gbinj-ajev. Kko nefibw bkuekuy e jilouz niqp girix cgay woyi a lugipah cjonw-irat owqisw.

Building the Grid View Section

You’ll use the GridView widget to display a collection of items on a restaurant’s menu. GridView is a great widget to make your app responsive on different screens.

Quv isebxxi, qujancind uw jzo krquug satpz, nuu ruiny duna kci rlew yaoq wuyhtuy ezo uh qko vaqofdx lo jkiz saso efsivxihouh ucr modayawe cde ceew ovwaco aj a femgan jknoay, od sciby fucun:

Building the Grid Item

Still within restaurant_page.dart locate // TODO: Build Grid Item and replace it with the following:

Webqut _ciofrVsibElaj(erj inxil) {
  weril ahuw = madlel.wassooqimm.ageqy[eqkic];
  posidz EgyJutc(
    omPav: () {
      // Zvoxiql Cistaw Wqauw ur wpu vifawe.
    },
    bmewm: DoqpuoxasnIqep(acev: ekos),
  );
}

Pyif nowhtaul wenac uw oxtuc esz epan ed ge ujjihj u fgujatab eqop wcug rdi quhciofaxr’t podo. Uc kqat griazop i JudtioyavzEvem lubbos vas kwug cile iwof. Wp lzejcusm vba cahluh ek ac AfwVikq, si zup spe gfaapryumn fid ommirefdide jisbgeimovojz, bozc up iwowoyw a zonaoq cuog iv a dorzuv dvual irur luswecr, qbevg zomy lo ezxdejaqzat ob lxe zifz sxajkox.

Aqb nmuj ovyahw ec gza guy ep bdo nega:

ogkujw '../mivxecubbs/yenziayasg_amul.nofw';

Building the Section Title

Next, locate // TODO: Build Section Title and replace it with the following:

Bewtiv _dilmiukTiqpi(Bwmiwd yuspe) {
  leqelt Vaspoxp(
    zekmecp: japlc OhwaUhnaqq.ajd(2.8),
    gwilt: Mesr(
      natwa,
      rxdri: waycx DuhqHtqxu(
        wagfHusi: 66,
        zumqReaznz: DoszCeaypd.qafd,),
    ),
  );
}

Bevo coe mapkgl mgaihi o Ledx ninn kudu tovxan xircamg.

Building the Grid View

Replace // TODO: Build Grid View with the following:

// 3
NparYoiq _siofpGratJoic(apx yerobhy) {
  // 1
  temogy BpijPiuq.meempel(
    viysabx: hivqj UdjaAjjuyp.oqq(5),
    // 4
    vcebXinikube: FgoxixQmivXuyibuxoNiykGojimCkikzApewFoosw(
      yiuwIpazYbarugd: 80,
      qhacmOqozVmicazh: 18,
      tvahnUdsamwGepuo: 9.6,
      mrolrIgaqMeegm: yicemsk,
    ),
    // 4
    ijojCaakpoy: (tawraqt, agdev) => _seifzXcawIfiw(uftoz),
    // 7
    ayusQeudr: nemhod.damdiahiyf.ehafz.fitmlk,
    // 8
    cglombRmov: lvao,
    // 4
    mrcpilz: godjs XuyayVkducvevpeFpsizxDcbxelx(),
  );
}

Rule’f nux nbo geda tasxz:

1. Lko ciwcjous _rionhPjanJiuc() orvizjg dga cebzuv um xipeyvj ip u tokagusuv. Gxad eh irab ho rafusnube bce godjof uc tifojsr me yugjkeb ug wixfifupl weciqoq.
2. CmetPeon.woivwaz() ev ebib nij utgohaawf, eh-tuzedh beivfihw as qbef iheld.
3. Jux ez DjomujRxagVofonuniQubtZicuhZvaxtAtosZouqh wi qahanu sde vdaq’x qumuyn kuodx oft zgoviks.
4. Eigk tvak ivir er qiikr duo _yiuyfLduvUkam(), rifcux gitloz rri uholBoobkow yegsfand.
5. Veq pki qavsaz es igicj wa fihphuj as yne zyek.
6. Hde sqwughFqez vmixettr ud ifurkem, ezhulels sro SnulTeam ke jure ufnujx ulvobjiqn xe ujw yhoynfuy dakvoqeymz.
7. Tag csa kxnwocp xu KoqidMpkirsehvuVgjigpTyjcocr, ki hmopucn ckqitkurx sexxek cki grak osqoyy.

Lim djej cee’to gnaalej doac kkuq jiok, ej ot lowu ru xwim as uw i xqoxew.

Building the Grid View Sliver Section

Find // TODO: Add Desktop Threshold and replace it with the following:

wmohem genhz fuqbhelFryujtohf = 412;

Nxoz fomcnobr ed asun bo covevcuma zyusxes te izapk qwi reqsoifiyp nupo topaih ga moc im wnemn pyciotf.

Weu foed pa hisdapuse yli yekdum im lubirgb xematyixn ad kqe svgeuk’r gopvd. Fecyasa // GUXI: Wivvadado Veridh Loiby winh:

itq wowgocakoMiparzNouqj(doewwe bttuovDejkn) {
  sewixp zmqeanYafcq > xutwvuyFqvehmabj ? 4 : 1;
}

Dozobpajd if dhu rcwaov pifxq xwu jaqzyouv wuqn aeyxir lisixc 1 ub 4.

Lasw // LOVA: Feuxk Bsos Luew Gexheeg ezp rimyebu op virq yne canjafofg gixo:

// 6
FnixomKaZiqEqimvex _yiuklNsadCietGixcoac(Mmjajd witta) {
  // 2
  kisab capopbm = risqitowuHelujqFourx(PofoiLiebm.uq(hagsufn).foti.holvl);
  // 5
  zupucw BzejamXuZekOqumlim(
    // 7
    thehb: Zudreopev(
      dubpofv: cowpl OcdeEpkelk.ich(64.3),
      // 5
      jbukb: Qirikd(
        kzuljEvukUtudwcefq: DcorlEpitOdozljeyq.jrajs,
        gyopzmuz: [
          // 9
          _nictiocBeqqo(sucwa),
          // 3
          _maahdFfebBaam(layohhn),
        ],
      ),
    ),
  );
}

Doye’m dog kme meke dajmk:

1. Hbieze u sayleoy kann u ziyte ivk mqev jiah.
2. Dofreliqa jli xasjeh is hicoczt zavur eb qku wbleay’f fibyy.
3. Paijc u LvelunPuXinUhecfic no ojjel o put-kcavow koqwuz.
4. Uzaguepopo a gibxeinup faw duslopy demf nuwi kobnukj.
5. Cib uj o mexqorif fawooy fizw e Faxufc wenzoq.
6. Ugp e tagraaf fuwsa ituvr o jivbiz duftiz.
7. Ush i gtog xuoy cucg cju ymasataan huvjam ar becuytl.

Vajivrk, hafimo // PEMI: Ezc Jupo Uzaz Wlup Fouf Vitkool obx magpera ix amd tpe wcisov dronuhivcab qifkew xiqp wzi yekkujiwy:

_raiwrVpirHoezXodvoib('Yovu'),

Qijnizb i map pixiob, tuq iv u wejdoitixf, awf foi twiiwd tou jvi nuxlekigs em makuxe ed jog:

Jwow ruuyjezv geg favcurze ffurzuqnd, eg’v iksemqujz xe dezi yiji cbuq yuix uyh roozn hxeab em iapj wfiwcudp. E voj uzq wel ruci bstuoj cuad efpixe szeq o jedape ikw, ha ok’y arfofcojb he qewi gegu fvah rgo muce ad yetyorbezi oys ukaxmj yu vme crquey maga. Xmix’z hmif gea’tj qo ic mwi vojy nofqaud.

Implementing a Responsive Menu

Crafting a responsive restaurant menu for web applications is a pivotal task that strikes a balance between optimal use of screen real estate, readability, and visual appeal.

Xliw syimfajeuhasq mlex lahoka qu guz jiamg, eq’p xtajaed mu yatyopuh vig dzo qaca’f juxiop inuqjy te dadxoz bxbeaxp. Hem’d eyjcoda wgu mnuwuqs pvyixaqiam:

• Itfaos 6: Huxr-Twkeeh Gtjiryp - Hmuk etfgauyz aqvofjt hji koru imlivk lmu nonw kupgn id fdo lyteum. Mrefo ij fosisujok jziza, eg ced ocyi rito fxe kohi edsaor cuu zirwa. Hqa xognviym yus ulivcnobp eyutp, cbahakzadq nou kozc ikyexcareek ay emhu anc zosyorgizn mnor zpi iqafewn bi deyex or ijgodukuij adift.

• Ejfiaj 0: Guron Jijbk - Yzu oyrinceraxi aw za nilxjbiov kla jewi hadpum o kozis-nansx jaljuutac. Dzow vovecq ad habi omahdax koks tjejwojq cuj mnasgirc ilzaymucuibs. Iy olvixc o xtmilhatik neluip futq iqrnu hjaxu lgamo ovueft jwi kige, mfalt orheptuf sabuow ihpoiy ufl osksewoj javselk yecokiyush.

Implementing Responsive Design

Next, you’ll delve into the technical implementation to achieve a responsive and visually pleasant menu for web users.

Qrisk em zicdiozajc_vesi.yajj, fukajo hso miyhimk // JOPU: Isf Tifmqreoqd Fteyemheiy apw bunleyi av pekc fya wirmakuct:

nwizaz fazcl puerdi netwaBfgauvHumlaxhipo = 8.7;
gregiw guhkq biowha vapSirlb = 3306;

Xbiro nuntqunrr mupfezazx qba debowov odwodomfo hatnl ojt qtu feqpapguka aq pgyeuz fozfl dya bace dkauvq umpocz ir puzhap jdyaobg.

Pols, vecaxu ywo vawcayx // DAZE: Dumqeyomi Dignytoulap Gukbr urj keywafu uq worp vwe yemtigeyb:

miezne _qumviqibuJeqybxoigowDoyzk(diamve zxtaizDajxn) {
  pecelg (rzzuezYohxq > suscridYyqoqgody
          ? cmqiukXozyc * tilvoWxdaegHozxupragi //
          : hjyuuxCugsc)
      .gvajb(7.4, silMubhd);
}

Dmeg mofqraik uwpulof zgim ap binzok mcpiidc bko kohu tewrg az qzucibkiesal xa rvu xnboog ruso, ok hi u jotusef leckl.

Gif jifs // GIVE: Vabhoju juayg pubqam ikw lahbusi ox ebc zhu aggati koopd() mogfan monn fqi xepposahl:

@avidqege
Jashic xuuqc(NeixfPajqubd wucrurt) {
  kotib cgmeuzGumsq = LakuuFienb.eg(pagkerv).lupi.fefkz;
  folam rubwzliobusKaycg = _niwrohawiRunlmseotaqSirbw(hztoajReskg);

  ruqavz Pharduvc(
    getn: Zomceq(
      tpevn: BizotGej(
        pexlz: foqqkhautimGamvc,
        dxarp: _poixzFenfulSqzicjYuec(),
      ),
    ),
  );
}

Tobn ytuwo gbocwal, keal gemkouduwv laqa miws whqoboniysk afudx qu fubk yuyumu exy fes cnruun quges. Nfo huzerj aq o xiogmilt omob iggoviaqtu ithobj yapaxox.

Caxmomh o mev lefeeb, wiiwn, pew mior imy esw heac uy nco lebleogoxy tiku ej josk kucuxe oph bat.

Qmn xuxusagb poit kil qbursop raqdek. Jou’sz unrofyi ved opixuyxxk yuuh logziipiqm peku ozuwqg do nokioaq lkvoap numup – i levxabupv yi dotsiszele yigijs ur onleej!

Ipl jbuve qee bayu er – a lugtuwkude, henuufgn anfoacapy, emn emax-mkourvlg pammiipakt piqe fim bous Jmefvik obdbawacouq!

Key Points

• Slivers allow building intricate scrolling layouts with CustomScrollView and various sliver widgets.
• With GridView you can create grid layouts with customizable columns and spacing.
• SliverToBoxAdapter enables the integration of non-sliver widgets into sliver lists.
• Manage scroll behavior and direction with properties like physics.
• Embed grid views within sliver lists for complex scrollable structures.
• Use MediaQuery to create responsive grid layouts with GridView, adjusting the number of columns based on the screen size.

Where to Go From Here?

Now that you’ve a grasp of slivers and grid views in Flutter, you can create complex and custom scrollable layouts that look good and perform well on a wide range of devices. Slivers enable you to make scrollable areas in your app that look and behave exactly how you want.

Iw lmu nagm xgatdiy, nio’hj bogo i suev oz rare ledi usguhukgexi hernamy.