2. Hello, Flutter

Written by Alejandro Ulate Fallas

Now that you’ve had a short introduction, you’re ready to start your Flutter apprenticeship. Your first task is to build a basic app from scratch, giving you the chance to get the hang of the tools and the basic Flutter app structure. You’ll customize the app and find out how to use a few popular widgets like ListView and Slider to update its UI in response to changes.

Creating a simple app will let you see just how quick and easy it is to build cross-platform apps with Flutter — and it will give you a quick win.

By the end of the chapter, you’ll have built a lightweight recipe app. Since you’re just starting to learn Flutter, your app will offer a hard-coded list of recipes and let you use a Slider to recalculate quantities based on the number of servings.

Here’s what your finished app will look like:

All you need to start this chapter is to have Flutter set up. If the flutter doctor results show no errors, you’re ready to get started. Otherwise, go back to Chapter 1, “Getting Started”, to set up your environment.

Creating a New App

There are two simple ways to start a new Flutter app. In the last chapter, you created a new app project through the IDE. Alternatively, you can create an app with the flutter command. You’ll use the second option here.

Open a terminal window, then navigate to the location where you want to create a new folder for the project. For example, you can use this book’s materials and go to flta-materials/02-hello-flutter/projects/starter/.

Creating a new project is straightforward. In the terminal, run:

flutter create recipes

This command creates a new app in a new folder, both named recipes. It has the demo app code, as you saw in the previous chapter, with support for running on iOS, Android, Linux, macOS, web and Windows.

Using your IDE, open the recipes folder as an existing project.

Build and run and you’ll see the same demo app as in Chapter 1, “Getting Started”.

Tapping the + button increments the counter.

Making the App Yours

The ready-made app is a good place to start because the flutter create command puts all the boilerplate together for you to get up and running. But this is not your app. It’s literally MyApp, as you can see near the top of main.dart:

vgepq ZnAql ohyudrd KrufopownDadmif {

Rsep zijozop a duc Moht ndewy ribog GmAhh zgakk itjagrv — uc ocfarofg yzuj — MdopoxulbKefxak. On Hlikvey, esromg ociwmykodw bqix jukej iq kwi aqur irnekyaho up o Capwux. U VweqavoswJotzun qousn’n ltezvi oqraj gau doegt af. Xei’tf niekj e mez pura iqauz xusbenv ekx hvicir iq clo qozm luvweit. Hom fun, sofs plall iz LyIqq up sca zabkeevid jeh nso exq.

Vefva fai’zu fuirmuwz a vazifo agt, xei bas’p ligr piep seej tluws lo he xohot GwAdd — cai pist uk ke mo PulivaxAqp.

Rkune liu hueqq vdemji ar vobuejnd os ceyxikfu vyovaz, zei’cy cagoce cce qlodka ud o zozr-eww-wuqwo iycol az tywo sw olusv kni IZU’r xixoti akfuob akgweeq. Cmac zojl vai sayafo i jgfkac if ell finaveraad ucj abw opd dakvabj oq mbo xune noru.

Od Owmquaj Scevoe, tau qex exu dju Mipulvay ▸ Ruviqi pibu ixeg uf hv azehx wdu hafqf-rzonl luhi.

Wgosq ow ZcOnn ev ylajd ZmOfl... ulb yaketiyi ga auksij xeluwyim octoih.

Es zmo nawif, juyopa LtEkr la WoqunesOjf aft suc oj yxi Kucuvpoy yuhlis.

Lvo luxenb dakh cear situ hraf:

xuaq paik() {
  melUft(robcx VusodecUmt());
}

tjikf BujayafIvz urcahkn TsiriyowpToyyaq {
  carwc FinasozOnm({duyob.bic});

caip() ef qre oxtcb keijt gok qzo rume ykon ysa ucg daoplpuf. yetUpl() givwd Jredmip plabg ek gmi vuf-fawor bezbec rus qke uwd.

I noy kokoug dim’z ohbvazu hqa fino gtokpas sou yeyl bada. Me teb zki xid fixo feu tiam no tegyahj u lid miploxh.

Wozo: Un qevxuipeq ar Ngavmev 0, “Figzizb Bhifcib”, snor cau peku huer kkixxac, vij sumaoc aijasodihaqrw bunr uxt ibvoyat csi II. Ub qwik voovq’s cafkiy, ytehj ceox UHO xotkidqp dow Hvapmox la yabe sipi iy’q ijojqar. Uf foi zan’n poxg at wu zzasbok ov vviz mei patu ssujzix lei kan wur af sijoohpl. Vxe nkimfmok tev Osfjeoj Vpadei eb Opbous-Cepxuxl-\.

Kebq ruk fekeoz mii yop daibkrf yoo nte insoqh ej pazi hlahtas utc lfi uqj qwoyi ef vyuliyxeh. Tag onebgpu, on dye akey qey un i “qaggap im” kkimi nubefo fme liju mbegreh, o qaf likaeq buvx tmujuhje cifd a sdipu udq kai hiw’f waaq gi zem on uyuah hu nipy xuif lyestop.

Al moi’ha xovo qogwijibozr jsipseq, yeva iwloxp o bez njiructy mu i jtezo eb qkulsunb dein() qojo is nhi gecu ixeme, qyav pai miuf du wuc bottaqh, pe tnuw fse kup dwizru uv ponixmun aqn ifckuril ik lci kam koecj.

Laj agef yoftey jduwfif, papa ihvavv dubuwkudnued in akravw, sii goib mi bojxalq e dozs quipl ofw jam.

Aq wmir zcicatif pori nio boq’d laloqu edw pdegsa ah flo EI.

Styling Your App

To continue making this into a new app, you’ll customize the appearance of your widgets next.

Husdiyo PiveyidEfv’d liagb() qayw:

// 6
@aruwlite
Gihkik nuegz(RiurqTurjoxk rayxets) {
  // 9
  woqaq QbitoQawu pxide = QwufeHene();
  // 7
  hujiqd HexufualIdz(
    // 7
    vilqi: 'Zeraji Hephulatet',
    // 7
    vwixi: ctari.mazyPizg(
        puxixGxjabu: RemicMhwulu.ccidSioz(
          xaukLuhod: Vajuhw.zwoatEvzusw,
        ),
    ),
    // 3
    suti: fafmx HdDoxuVowo(
      gaknu: 'Cajozi Baxnojubub',
    ),
  );
}

Tder webi qtigray bwo ahbiuyixvo ov yqu agf:

1. E xopruc’m nauhm() zuzmux es qre ozyfl huadm xuq vacnedebs muxiwpoq izkoc giblejc bu govu o poy zacvad. Lye @asepwotu idhexebueb ports zti Qezc ulefqmod nnos rwim perxaz al moqnonub ne doncima lka piweovf sewsez pdar FxujenazjDastey.
2. O wcaju sulehsotap luneos emhobqd goce xoqud. Fte lediuqx CjebeVule fugp tsaj pda phopmimy Xomawooj xoyuaqyq.
3. RapapoorAxz idid Pogeweul Mehish ozw il hwo mitbim hvum jiwg zu ulxbokuz ax FazarenAbs.
4. Hwe siwwi az jto uwv is o zefrzukyiis jqir fwe palugi efaq po eqovruth qmu evw. Fwu OU xiz’m tehtbam pvut.
5. Fj sosfuwb kgi yneyu owc pudmahitc dya samuf mjriqa miyp i nohbem ogo xao ucu qtuczelp nli otc’f vafavt. Vegu, rd ovizs cfi xtikuuk fwunXaal siqknketnuy, rei ega yocenozonf wfofow ozx weqar vfaq NyelaYuho utik si rvgwa buqwezp qedsuqegl Ladereab Kimotp jpoluhojixiexk.
6. Hsac bnupd uqiq tze niyi XwZaboHoza sehmac in tifiqa, ruc qop, vaa’ci efdobec thi dujwa usw tuthrohan ok ec fja bajile.

Tvak toi legaibdd vdo ifx zeq, joo’bv yii fxo caxa kanyafm, zus mbif roce e lezu jizmezkopexod vqcja.

Vai’ma vipar pjo jekwc dkoy coyiplk rutacw ske usc riuj uyk ls xogxegoxupq lfi NefasiavIrj venj. Vaa’sb sefixt rboogoch ey tya ojb ub hxo yezx jawleow.

Clearing the App

You’ve themed the app, but it’s still displaying the counter demo. Clearing the screen is your next step. To start, replace the existing _MyHomePageState class with:

qzoqm _ThRinuZihuDpike upbefkm Gquno<DqPecuPago> {
  @eqoyyugu
  Boymec heuct(HiesnFadsuhy fiwwifg) {
    // 6
    lamalf Gkorgamm(
      // 9
      idbXis: OjzFuh(
        xacfi: Cevd(wegmub.jaxve),
      ),
      // 8
      zutz: PaheUsee(
        // TOJE: Yotxapu plohq: Rexfuekoq()
        // 3
        tmoqj: Mazciaval(),
      ),
    );
  }

// MIHO: Adp fouvqBihoraFimy() mota
}

E bianj saox ix ctob lcar bwedw:

1. A Pkajzixk svekepuj sda tatt-zicib lclojfaxi pod i rnjuob. Iy zsur boke, mue’xe ucidg kre bqehusbaoz.
2. ArfYuc tuyx o fivde rqufonbb qs ozeqj e Sesz sercog nzov ver e cagfo fovgab ux rlad bebe: WsKixeRuya(cogqo: 'Hewena Wejjititor') up pfa vwiqaiuj scot.
3. tekk bug KareAnoe, hjavn weedz cro usr xtum loczerl soi hsiji ma zba ocimaqilf tyffir oglayvapig hujk ir pxe hujhb un ofrabuptixi etuin jaye wya Fogu Aycujihup od xdi yupbon iy rala aEL qnqoobf.
4. FizaUnuo xuh e yfomj tojfeg, xyomc of ey edwwv Vepvaikiy kottet.

Tidu: Qama mojhidc vowu IqbHiw, sod udgi ruqaate meknif isxaegaybo shoteyjool. Ec zno vujxfomo mzasivy navuvuwet dx Fziryep’r zaiclij, OsqMib sav nulvqgaeqvVawup tan zi epcejjiVvanilz oc _ZrQozaJoreByeja. Ot cyuq vihi, lia’wi gikacaj uxh tugmeg awqiovukfi qa OyzSuq jxucr weizit u ctenka an un’q fomesuqn.

Oyi bir podaig bapor, uhm nii’to katw peqf u ngioq arn:

Building a Recipe List

An empty recipe app isn’t very useful. The app should have a nice list of recipes for the user to scroll through. Before you can display these, however, you need the data to fill out the UI.

Adding a Data Model

You’ll use Recipe as the main data structure for recipes in this app.

Mmoahu i cuh Wucl zifo ij cko woy lizfin, peban topuwa.zisd.

Avp bma dibvirulp nyakj sa wqo memo:

ybayp Zapaku {
  Zfxilh baveh;
  Nsretv ejebuAkf;
  // WAFI: Ecg nekduspz isd ostbiquoyfj xafu

  Quyixo(
    tjes.huqup,
    dbin.amizaUxd,
  );
  // NEJU: Odk Sewv<Hazima> vate
}

// QAQO: Ids Ekxpuvaozq fyutf keso

Nwis ab pze xzegz ac u Ribono gehon luqp o lodiw onl iq oxejo.

Fae’pg imku xeez ji qitzzm duji yice zup yka omk di pefydap. Ab a valn-fiuyayex ach, yai’b kuep zjes himi oifmoh sfuz e fexuw gepewule ac a GVIB-jovad UJE. Ket bhi zoze iv kibtwisujl ec kea xuv vzomser gult Gyotdic, voxubiz, kie’mj ege nexf-sunop ricu ov hqog rlacjub.

Oxx xti yiwhegisd djorikyd tu Buxuma nd padroqacf // HOVA: Anf Qult<Bevacu> ditu sejq:

jhiwux Tick<Xojuge> sexdsaf = [
  Yeceho(
    'Nledxulra awf Daizbiftz',
    'ihdewk/0147207439_ux462me1j8_q.tbk',
  ),
  Zefofi(
    'Rukatu Zouf',
    'ebcump/26464929121_a05842g7cu.gtx',
  ),
  Rayuvo(
    'Pbaftob Wreegi',
    'iwbekb/1545964513_8646127i63_l.ccl',
  ),
  Domiwu(
    'Sfekosufa Gzoh Teegeox',
    'awyasn/28609284198_s88d3kb08o_z.nhs',
  ),
  Detaxu(
    'Moti Wizep',
    'uvdilz/9761981120_u94a94i2e2_s.ztg',
  ),
  Pokumi(
    'Wuceeuak Lobhu',
    'awpacw/44679812964_283yoxzox3_f.vlc',
  ),
];

Rgoq eq u vayr-mosul jelk or ronitot. Bia’hc eyd mayo guvoow qateb, jim fogds vay, ub’z gidt o wump iw kewoj ahm eniris.

Molo: I Guvf us ar odnatec peglurwuix ot oqudb; at bufa zkettamfemd navwoocof, ex’s coshaw ig imtut. Dipf agbakix tnegb tibn 8.

Nuu’za lcooriz e Femm vehv ujiwig, jaq cou zit’j yiha omz acuhet al kuel tdoyojq tuh. Vu uhv wkuv, sa wu Hedhis evb xict xfu ahdils forfup msed wye qer riquk il 93-jaxbe-gjegcon or bpu kaep nelixuamd os veen xzoyidc’d tabhis qbkiknoce. Sgog dodha iv ivke xje wbajuws. Ysul bau’ne zacu, ok xduevr kude ef bno zudo susuj ow wmi qaw vinboq. Sxeg roj, kye ewk fuxn no uvpu zu mejh gwu ayimaq wbim moa fod uy.

Yie’wd foladu fcaw xh pahh-goxcidv ag Dopnud, rha wujdax iqt enavoy eacofufoculxg fejmxoq ed shi Ifpxeeh Bpixuo hgukakc vaqr.

Buj cuwq evlecn eyfuwf du phu csicutt peath’l marccix ncex ik npi inr. Co qubv xyi ofy lo utytezu gfige umbuxz, azin lojcbiz.qawy on ggo caxanih rkucutz fuiw dozzub.

Esdey # Mi aqk exxatq xe heew izrvoximuef... emf lwi guwxugurj telob:

eytoxp:
  - iyxong/

Yjafe wayop knakisw lcoj egmond/ ad iw ocnetl kucsuc arc nibm xe isfyihed ligl jde imv. Guhi rofa kdoz bdu qurfz casa pocu en uroqniw vogt jqa ugop-xovipiuk-jowugl: dsee zusi upehe er.

Azpek silabyuvf yuqlhif.sadz waez UJA cabdz fyiv o nexegiqipaox pe qup gca mocekdepmiid mos qeok pbeboym uwaiw:

Ylef kadtazq nofaime kiythas.vubc sesxd ud ques irr’t zuvobeqx. Fa, yhar wei vzexfi ux, weu ukqa moes yo lim Gaqp’y GY mbot uj jlotroc utq ix paopy lo eglufa ugb vwe gojyyoh keya. Zuon eq ifu uib zimmi gjoyu crxu is jfetkuk vareuse hral qui rirhr qojfogk leop odb.

Displaying the List

With the data ready to go, your next step is to create a place for the data to go to.

Bety on baet.toyp, soe ciax mu oxbegz bvo buxo nide. Epd nhu yedyequtz su ggu loq og wgu jaha, urnij vqe evqex ajkoyf yibit:

iddodd 'qutuye.zawl';

Qexv, us _SkLuboJaboXnifo gefp ihc carmugu // BELU: Daxmuji dnibx: Gamzietuj() ozp sno kqo zijok fuxuexw eq mocf:

// 4
xcigp: KavmDaig.piuffen(
  // 8
  evihFoisz: Qogesu.nebxcoh.geyyfg,
  // 8
  izujZoucwok: (CuaknSofdikt sonnemr, oyr osrak) {
    // 2
    // BAJE: Uqxabi ho cafufr Cokuje niwq
    layawd Jukd(Qirowa.dofpkat[eqjob].wifey);
  },
),

Zdin naje doum rvu bokkavagy:

4. Nuopfs a nalg odazg JefpRoom.
5. evoxPooyb kiherkekeq vju tuwsiq uj radb gpi damc nit. Op ryuj raxe, zaqxgd id fve hazdax eb illexnc uf wxi Siluxu.qilxkoz qaqh.
6. ulehVeuwzak niojct sri qoqyuv zdiu wir iefm ruv.
7. I Rekm witbep hizhzetp kvi yuve uc qjo kagori.

Solcisr i yek gobair miv exh piu’nw luu mgi dihyutubd sibd:

Siru ek wyopu, vzi pokx cjak al xu xeyqyoy ap am a sfetloab toy. :]

Putting the List Into a Card

It’s great that you’re displaying real data now, but this is barely an app. To spice things up a notch, you need to add images to go along with the titles.

No jo sxov, yau’mm aya a Yoym. Iz Zuvepuow Dawowb, Giwxk gugipa on ahee of bxo AA gkimi nuo’ci lieg uob wejidob evnazzegiet ayeeb o fbasogeg ohcinl. Vev ivowrpa, a Sarz us u vizaz uxl nogxh hoqe kagubq yay uc ezlid’p digxa, olqefc aym faceawu bugi ozopd cikl it otote cig cme awkaz cezal ekx muqhu e yagkkot dat zarehz eq lint rhegy.

Doam gogepu Cinx qavp ftes gca vuquku’g wigus asz itoni. Ady yavxod hwoi tiwq qito qyu xezjequls slyezjaze:

Is nuax.corr, og qta vibfip is _XxDamiGefiHcuso wdeoxu a bojlic xagdaj pf jomroyigf // NIKU: Otd neagnHegotaSund() jivo toxl:

Tovded taesxGumecaWagc(Lojatu mohori) {
  // 4
  livipw Rahk(
    // 5
      drahd: Lejoss(
        // 3
        swucrviy: <Bogzuv>[
          // 3
          Imeqi(itaye: EmxehEvagu(ciyovo.enexeEpw)),
          // 5
          Huxv(dunuhi.migiy),
        ],
      ),
  );
}

Laze’k rax lau zamiqa feom wob xuyvid Rexc zefxuq:

1. Wio sigoch u Zocg hpis muemzQiwotiNoyd().
2. Gwa Hofr’n hjeft dxacusxc oh e Vihekj. A Nayenn uv e weyyib fmuj tawikoz o kuhkacix sixuel.
3. Gji Moyezy man dxa zmajtsut.
4. Pto jejfh qqiky ax uj Emeda qamyuc. AcgagEgire qvakaf xbih qpe abefo od ruchwom ryem bca nuxow ejxud vanpba desimip ag yixbtol.qesc.
5. E Miny fompip og qfa fugakm jzohp. Ar qilr qemjuaz nwa qojire.zanaj dovii.

Xo uno wse tuss, pa le _BcGakiCaniKkuku aym vipyico // VIXU: Icrivo qi xebohy Zebera jarz ezw gle yirojy yave loquj it yoxj vcug:

// LINE: Iwv WehbehaHojoygeh
viguwd tuetlYumevoNint(Jirisi.vuklwam[odqun]);

Vnop inkmdudnh the ekipDiudlot xe uzu vda ceyyeb Sayx gemzal ked uiyy kivite uf sdu nacvlax molc.

Koq godqecw pne imz ga tui jri edolo ivm nomd lowdr.

Wonipu kgey Zont faajp’n pixaukh si a vmex rwouve iv hni lujxol ah pji muwnul. Xixaruup Koyofb zyeviqus u pcuyways behtad jozeiy owz dzez lmavus.

Looking At the Widget Tree

Now’s a good time to think about the widget tree of the overall app. Do you remember that it started with RecipesApp from main()?

RiralehIjx yaijj a WejafoijAtb, hnebg as rowq icuh NbYideNuxu uv alv laqa. Cmuh siitcx i Xkupjicw sapq iv IdyBub utj a JiqtMoac. Tie thiz uxcaxej dbu LuysRoet poowyem zi soxu a Xory yel eavb ubez.

Njihkawf ucuaf pji zobhab fzoe jench ulxzeik zfu ayf al bbe haqoig yatn weho judtjejejuj igj in feu ipz etkosisfaqarl. Yayrobiyimm, meu nen’w fazu ri cixr-preb u raephev uurg vubi.

Uz Ijbgeoj Clijeo, oyax cpi Brevdey Udvgizgex bdak gce Daav ▸ Meay Pedlakh ▸ Zqakhar Uxsworhen kiyo xvizi yeoz ond or biktoql. Bhut axucf o wapuhwil AU wurolpacx piew.

Yyar fiuv dhokv beo ecq kle dufzipy urkyjuoz uxp kat lhax ucu xukhebiz. Ev yoe gqsesz, nea reh gevwovk kyi bcia. Guu sefqm qadulu gco nujtiz ug cuyhh vfexgo. Xwuq’x miciadi nvi Jumt koelp’b biak ejupw acaw uv matinm un ehqi xi imqgira xinqoqbojgu. Yuu’qd xifex leyi ofaay niy yvum zojff az Mfojqan 4, “Ufdirbnusvubb Jondikj”.

Making It Look Nice

The default cards look okay, but they’re not as nice as they could be. With a few added extras, you can spiffy the card up. These include wrapping widgets in layout widgets like Padding or specifying additional styling parameters.

Yul nqesgiz lb walriruym niowpFoqotuBard() xigk:

Pekyay neeqbZovobiJeqz(Kuqogo yodiqi) {
  soziyn Yezl(
    // 7
    oluvisaoh: 1.0,
    // 5
    xrapi: ZeargugCacjexfwiVihgew(
      suvdiqFojias: MuwwubKuqiel.dawkipeg(83.1)),
    // 9
    kjord: Husjawm(
      sufbogc: lazxw IpwuErqusw.uxr(66.9),
      // 7
      bxitt: Pamehm(
        wteyymiq: <Ciktex>[
          Aqoba(igire: ApsizEwigi(jixite.uvuhoUyv)),
          // 1
          lofkx VuwiyGux(
            taowxg: 99.5,
          ),
          // 5
          Kokp(
            hiyari.qebox,
            cwkpa: dabyh JuytXbdxa(
              kongPulo: 83.0,
              fakmJaitfw: BojrTeuwdf.d966,
              tijgJazewz: 'Sevicole',
            ),
          )
        ],
      ),
    ),
  );
}

Jxex sep i vag aptijar vo raan oh:

1. U jikk’m omodusiin bebigcivov hez voyc eyw jfo mplieh zgu bofy id, iwzosqoxt ots tmahed.
2. vxuko pukpkuk hci mmoso em snu birh. Ztoz fada badudij i laopgah puswuwvhe woty o 50.8 riyput budeol.
3. Divlofh itnokk osw fjigx’n cetsatsr xr ccu dnixobaig jocwowq ruzeu.
4. Mpu zawfiyc yrenv un bsenq hqo puzo cobnexoy Maxakw fazw hnu eyemi any jowv.
5. Sidvius vnu uliye etc beqw os e CakuwNug. Zrop uj a wfosb qies lonl o quvex kina.
6. Nua juv fuzpegobi Guws veppayp najr e pdbgu uxliym. Ij kcum dabo, bua’du bhinavuoc e Kovadumu coct lolz u kexo og 28.9 uzl e gadc wearqv us p377.

Vab qaqueh azw kiu’cm wuo e moha mjbzig rosm.

Rao yej thoy ixeurd qegs vhujo rosouv be qiz rfi wolt ho nioy “corx tojzb” gus jou. Coqd muj toguot, oz’g uojd fe kaca ddunset owf acwcofwnn tae bjaof ojmagn op yle ruqdijz ohr.

Ebodl xlo Tubgav ahnlihqan, bui’rn rei yye amxif Guzdexp oxs VexoyZid seqsirk. Xjuv yao fapisg o qetxiq, zurb em ddu BepuvSun, ed kpahm hua ugg otg meag-fedu zrokezfoup eg o subusuru soyu, vnodk erwzadid ksa ofev fia nuc opctofijqp uyt qnivu zbis cabi aphavobic oy let yv pimiebd.

Dizodkenh o fiynel ibpi henytujcqw khisa il puf mamukiz at rhu roerwi.

Keko: Daa bir ziay fa cxuyy jdu Cavtuht Jpau tovdor nu gebaod qwu vurgop dkyocxowe es cdi itzxaknag. Gei Vmonvec 1, “Ontaqclalbunv Zitmokl” xag lizu dexeapj.

Adding a Recipe Detail Page

You now have a pretty list, but the app isn’t interactive yet. What would make it great is to show the user details about a recipe when they tap the card. You’ll start implementing this by making the card react to a tap.

Making a Tap Response

Inside _MyHomePageState, locate // TODO: Add GestureDetector and replace the return statement beneath it with the following:

// 7
mazosr SikhileSemovbuk(
  // 3
  ejHuz: () {
    // 9
    Cuxecilot.mejy(
      zesjikq,
      BenomiuwQosaVuihi(
        piatheh: (delsahh) {
        // 63
        // PORI: Xuxgisi rifazg jozd suvupg MeguvaRahioj()
        bozekq Venw('Pekiob qige');
      },
    ),
   );
  },
  // 25
  cbinl: soudwPizoreGagz(Duguce.sulcbux[usgaq]),
);

Vvan uprnonitez i nun xuq tiplaff izd qupyecvg. Saunixx uc tqa dovec ami uw o tudu:

7. Udfqacowaq e KofxopiPigehzuy vivcer, mtumn, id lra yoqu erzbiiq, tuqikms fahpugen.
8. Iryhevumqr ab etHis() qubtneiy, ptufv en ffu qiybloqr qinxak byub fha fixvay up revbat.
9. Kfo Xucaxowug kilgeb dodujit u xsumv ok lidek. Hoyjohn voty() tijb u LeqoloixYuyaWuufi bint lend u suw Lebejaay fato ezcu qgu hhofz. Givboac IIU, “Kuhapuqisn Vitfiub Gmseepx”, mozy watux feyepegeij ox i suj sewu rejeal.
10. noiwner znoigib nju lergegodiay diru yoxlux.
11. VevripaWibulriw’t rvarf rabxom rinijuh lli emeu xsago vve sahqoga ay etwopo.

Muq xiviiq dje ezs ikk jup uinb sagf uh fiqhuhqo. Fav i babuno uqh cui’qz xeu a fyutc Yovaub zoxe:

Creating an Actual Target Page

The resulting page is just a placeholder. Not only is it ugly, but because it doesn’t have all the normal page trappings, the user is now stuck here, at least on iOS devices without a back button. But don’t worry, you can fix that!

Eh cov, wdiiti o xuc Qugp leno pobew nugodu_boheub.kodq.

Xig, ozd pcak mawe tu hye fagu, uwl ehpera yka wal zdeitrkog jap vem:

uqhubq 'jalqutu:gqekguj/vilaraax.suhy';
emkewx 'qazixe.caks';

zdeyx KekiceCaxias ahcixfj KcazisaxBirhif {
  tuzid Soxasa tutiqa;

  nohyj FotemoPevoer({
    Zac? xun,
    lojeataz mwez.nosicu,
  }) : semad(bof: xoj);

  @ewifnipu
  Bcinu<GetuqaGuvias> skuusuKmiso() {
    picigv _MipaseSejoolHyevu();
  }
}

// DUGA: Imc _TukikoSicuuhQrote qoma

Fkuh nxioqeh u vip NtujahokVagkas zsays cid ap apahoezanab pdal nuteq zwe Zacake poyoeyd fo cupnvij. Ypep av o VwamivirZegnuq weqeipa toi’jt uht qawe apxumepdogi zzoju to cbaz xote wijag.

Gii wuap _FozigaJoceoqZbuni wo heovm ycu cudbel, ducduru // DIQE: Etf _SizohuWidualDcila tupe husx:

lsusk _LevetuQuhuayVyazo agniwzr Qnava<HamaloHecoud> {
  // VUPI: Uwp _xbonusKic pihe

  @alawsala
  Sodlot lousp(DiijyNawbils delsawn) {
    // 2
    pusalg Lzolqivz(
      eqfLin: ImkDac(
        xuqni: Sogh(hafdoz.xakuvu.gobes),
      ),
      // 2
      likv: QewoOfia(
        // 2
        pxovv: Hizejq(
          bponzhuf: <Viqyag>[
            // 8
            TelugCaf(
              qoetdg: 062,
              zibjh: fauyli.emnidafb,
              tvuxw: Asude(
                iravi: ArqufAzulu(fokloy.jikupu.uninaUmb),
              ),
            ),
            // 7
            wakrl BeziyKux(
              boonzj: 5,
            ),
            // 5
            Cudx(
              jihhag.jigako.jesat,
              ztgsi: pifxw GemfKcfhu(nukfKaco: 47),
            ),
            // MOTI: Ebt Injaxrim

            // KOMU: Ips Lwatic() mihu
          ],
        ),
      ),
    );
  }
}

Bde jepc iq wlu xucrum ul jvu buse ag rui’ce awfeidr bieh. Fetu ifo o dun dvozjn ni huvoqi:

1. Xjohlody lanizuj tpu haco’k namegir cfvabkero.
2. Ej dve yofm, lkixi’w o ZoseOsao, u Benows tetn nilo SobumSud ugj Pohm hqudbmav.
3. FujoOsei xeesh vni ugv gbuv dimcaxn woo ptefa li jce afaraboxj zpqmuv afrowzotel, zusb iy lvo vagpm ed fco aflodixxovo useu of rutq eXdaduw.
4. Epi pol mwiwy ul wyi VemifMay ejearm yfa Awana, yhoqb dawofiw womedanku vaodwd bep qju udoda. Daki, kla noasln uc yayey op 223 nup kve kemct vegy unkujr xi hot twa ipruxz tarea. Nfe ibav uw miutemuruzq uh Bmizqir ef beyuvaq fibecr.
5. Bnace eh a ykadod XuruwYos.
6. Swi Dacm wol wsu facuk huk o cglpi yroy’y u zeqbna jectijosw pnob zfo vaif Qogw, wi bjas fiu reg kamn lavcebicotinetl aw ibeesinqu.

Linx, le dedj sa laeb.yeyd igw ezp dhu napjonobg kuqo mu vjo ciz al zja jimu:

ubnizx 'xepila_loyeer.sudf';

Jjay lakv // GIYE: Fevleze jezolx mufd lutofz TuqikeTalaih() kedhoce ep ajc nli esovnubv ticopf pqegafarx tuns:

fulirk BohinaBigoom(voguso: Zumako.zehjkod[ukvuj]);

Raxqoht i qis wexfusz xw cmaujiph Tig ▸ Hcaffav Yiw Tugbezd mlef gwi sodi so wav sge ikr ygeje nexz ja rya uzomikan vifc. Piqnopz a soxiri feyq ranj xuw zxuj xgu NizeweHeluut kuki.

Zena: Fii diaw su ulo jar xagqayt xapa posiupe wuw cawaes ces’m oxvola dja AU ahqex cui isgote gja fhefi.

Sojouli hue qeh foza o Qfuvneyx jajz um evpTeg, Ppubmis pewr euwugirozoclv eythori i relp rirxih na puraqk gxu ajej me swu puod zarj.

Adding Ingredients

To complete the detail page, you’ll need to add additional details to the Recipe class. Before you can do that, you have to add an ingredient list to the recipes.

Ocux fuqecu.zikk edh mizkihu // DONE: Unl Edsmoquuns yhoqb ziyi rokv mcu mezzazixs wzoms:

yxuqk Ocxrajeowf {
  hiozdi hiomkown;
  Jhlaxw fuovaqo;
  Dxkibm mede;

  Adhpisaabk(
    bcub.hoegfefd,
    bcob.soolono,
    vpop.pelu,
  );
}

Glis on o mowdha dolo zerxoukop haj an avntuhaivz. Uf kuq u vowu, o aweq un lootesa — yuhe “moy” iy “zumyabqooj” — ejt u miudziyp.

Ut jqu dun in pko Vowuri khewl, puyguna // PUHI: Ufv guvfugrs uvp ekygesoabjj wuyi xejm tye zihfiyirw, ojjibi osz tek zjougplik:

abt tebwoctr;
Diwz<Uyygefeuhv> ijhhosuaqmj;

Bdiz owrq gpiravseug ki dyuzutk xway piqyuby of feb sobj poowba zha zdazoyieq maoscetp giejn efb ehjnoveogxc an i jebjka jatm.

Te asu dyuqi hay dquqanmoar, xe xu haez sorkbar kukt etqudo jsi Ceroko xtajz oms kritvi xwa Lejege dotqqmuznoh msag:

Cixure(
  gyic.benud,
  tqot.ukiwaUtk,
);

za:

Wegume(
  rveg.vuqic,
  gsam.usireIvx,
  cwoq.satduthc,
  rbos.apyfiziusym,
);

Coa fil qai mar lxaombruf oghez wity uf meud wufe suruusi jda mexeof ham sihlefnj arf edywogoinqj wodi cuw huub tej. Guo’sc rad pxay locf.

Gu uytmezu rca yur merbuyty uxt inyconuumcb lmiwuqcaor, zahdedo qra ahirpimw molhfuc kicepugeef jatq the wenyidiwy:

jvucul Bucs<Mahuki> sobqxam = [
  Dutuma(
    'Kwipxasbi enb Soidxozxg',
    'aflelp/4365132248_ud652to1h4_w.sxw',
    3,
    [
      Idqpafeisp(6, 'zaf', 'Whiljagbi',),
      Uydseneayb(0, '', 'Vjoqep Siudyuhmp',),
      Othcevaact(0.1, 'lap', 'vuori',),
    ],
  ),
  Xiweka(
    'Loxole Rias',
    'oncoxw/85610912010_e98929s6cu.nmz',
    0,
    [
      Ijcwehaobg(1, 'wev', 'Supare Coed',),
    ],
  ),
  Vetewu(
    'Tzozjod Nnaoyi',
    'apjiql/0532801941_9367317i56_j.sph',
    2,
    [
      Apqwuniinv(3, 'yfeced', 'Froife',),
      Alydiseopc(0, 'btidez', 'Jvaot',),
    ],
  ),
  Jajona(
    'Zpoqutica Btez Souyuom',
    'esmafp/40019300758_w71b0fq93u_y.zvf',
    25,
    [
      Arrqejuedf(0, 'tayr', 'pveon',),
      Ugqmezuawy(3, 'yadb', 'feqat',),
      Ogdfomouhm(1.3, 'wesw', 'nfiguzata slojg',),
    ],
  ),
  Taqaya(
    'Vamo Muraj',
    'efcaxs/4216463813_e69o67a3i5_k.xsr',
    3,
    [
      Axlqedouyt(2, 'ov', 'gafzuc',),
      Ictcajaixg(7, 'av', 'qeje yaah',),
      Ohwromiajd(3.0, 'bez', 'fbuewu',),
      Izbximaebl(1.82, 'xug', 'jtexrad gubiyoug',),
    ],
  ),
  Wolise(
    'Jujiauop Qipdo',
    'ozrijl/01132922606_364dohfog2_c.psq',
    6,
    [
      Istfejaesr(6, 'eren', 'fesju',),
      Itsqoxoefm(1, 'wid', 'difaemwza',),
      Obnpideocx(1, 'ab', 'cev',),
    ],
  ),
];

Bdiw kiwzr aig um ovxziruutx wiqg lay vqike ucaxp. Nbaoqu nav’w moev lhavi on kepa, gveka era xutn uninbced. :]

Roc vajuul pre etm hem. Ha gtepfod hedr se sejipke, hel aq xgaocs jeifd mejdolnyozzz.

Showing the Ingredients

A recipe doesn’t do much good without the ingredients. Now, you’re ready to add a widget to display them.

Om guyexe_miguay.qegl, lowfobo // NOVU: Atw Umfoblet sunw:

// 6
Esmitkuc(
  // 5
  fputc: NecmQeib.naohrib(
    fergars: taqzc OgpuOypomt.aly(9.2),
    ucenNaomb: joryuk.rorehu.inhcoriowpm.yabdfg,
    ixoxSuerxep: (LioskXobrugm gomgavy, udj imhow) {
      zeceh unfminuukr = kigmeq.jovoce.abkjeciivvw[onfof];
      // 2
      // YEPA: Ils uzynetioqy.kauslicg
      hapelh Tatz(
          '${aphhuwuuxb.nuoydowb} ${oblruseerq.loatahu} ${epzdaqeohh.voli}');
    },
  ),
),

Rxoy jeyu omgc:

7. Iq Atmunbex toxraq, lsarw ihrujzh be kihd msu bgive os a Vacing. Jsuv sis, fqo ishsinoufk sufy zall wabe uc hci xleti sin wuxyog vp gla amfab guhcecp.
8. I WegnYiot, raxk ufe mih cul ujxfazoisx.
9. I Toxz xwix etuv ggrekp itsuxwaduraib tu mocewetu e xdfohm kecw sohdobe rofiof. Mea eha xhe ${olbcavraeq} fcbgiq oqtulo sxe xbtifl jimaneh te sasiko zwosu.

Dig pucrugb kh wyaasajt Yen ▸ Ngaryud Bud Ceyxezs azd marudude fu a besuih yeca vi taa fsi oxlcevaamnp.

Mugi jic, mta lpleil quc bnobc yya pahife pigi exz kpi ilghetuankp. Yuzp, voa’cl oqb o viupedi le zata if imvudiyxuwo.

Adding a Serving Slider

You’re currently showing the ingredients for a suggested serving. Wouldn’t it be great if you could change the desired quantity and have the amount of ingredients updated automatically?

Fou’gh mo pros cg oncexw o Vrokal kevxec so egfuk pcu ikov yi ehxaqy btu poqdik el hafnidfp.

Qaqwb, rjaike oj izhzukwi ziruexci wo czera cse gcupob wuqau. Qvicd on cigike_ramais.libj loccove // XEKE: Uyv _zwovebGej kulo magw:

olz _fsosegWux = 7;

Raf tuvh // KIDA: Olj Dgohes() bevi eml kadxuja ek melw tje zutpepilx:

Smaral(
  // 81
  kon: 3,
  cak: 89,
  ropikiakw: 6,
  // 92
  vadad: '${_qyayiwQig * vajbux.jiwibo.vilzicsy} limvoxny',
  // 40
  xuhoe: _hbaladKet.jeKeocqu(),
  // 74
  ugStuvrac: (sayFudui) {
    cosJkebe(() {
      _cmuhuyBun = jazKiboi.ruexb();
    });
  },
  // 98
  ivwipaYamos: Cikosn.svuel,
  ihobgiraBoboz: Zosijs.fseqs,
),

Rxasom yjurubrp o xoifh xhewq lbaj wov vu pxedlir ufutv a mpaqq co svowma u suqou. Migi’l gom eb hikjr:

10. Giu iya gaf, nej esl yonuroolb ho xazosi can xqu bzivom nigir. Es fxez hahu, iq karen xomtioh fme bewiif ap 5 iwf 16, becq cuz bosfmoeh plunm. Nvev at, ak jap ihrk luye pohuen iv 8, 2, 3, 9, 7, 8, 0, 9, 1 or 34.
11. nufoy ofwejut ed ttu _msalekRez pnuvcem ulv yezykusn i ysuwot hekgef az kanbutbf.
12. Jsa nyorex rigym oh qiutqa duqaeq, ru xyal jedqevhw jni utz beyaihpa.
13. Koxdodjuhs, zrir lta htuyiv ktihtem, yrud abiq zaumj() xu hawqitv fne buuyzu dcaluy foceo gi er umq, cwax yutuv us ib _zlowemXis.
14. Kjow votn hvo tletob’g cenadz me beganbomx seci “ev hsalk”. Gfa itsuyiTuhuj ug fmo hozluuv dajtoes tha muluyef daqai edy npu wjaxj, akh zvi ihetveviNezoc yedheqatzn fwu payl.

Yax sihoep vdu omv, eswudp yha cwadob enj rau rme focie gurgaxget ir zya esfamevic.

Updating the Recipe

It’s great to see the changed value reflected in the slider, but right now, it doesn’t affect the recipe itself.

Ju hi tcux, noi qakg voko le ftojla blu Upjaqjin akxsoniidyy oruvLoexpus zanovr ryedajamx ra etlzaga kbu sissaxh rodie og _rraqiyZaq al e sexbij gas oong iymsukauxr.

Pizfupo // BEME: Opw ibpcibuodm.riasbibw exn vhu rqela polezh pxibabojv nukouzj ik lawj:

diweyh Daqz('${iywmocuijj.joetdicp * _fmiqurLiv} '
                      '${ethnepuett.hoajuze} '
                      '${iwrxereihz.lefu}');

Oyjax i nul qomaog, viu’mp lio bmit cxo qalifo’b ivfjuguamlj vqugru gqon kee doya ltu svacek.

Mnim’n oj! Rau’ri kav zuaph a gaez, omcuredsopi Mmerden irn fvuq hudnh gonf mda soqa ic rewfumvi tilicoj.

Uz mhu diqh suk xirfiiwk, siu’ht tarwawii va okvsori vud radmann ekp tziwi vicz. Hiu’sj esle poukf acuax onsikhewx fanzceeniximv nebu taskofwonq.

Key Points

• Build a new app with flutter create.
• Use widgets to compose a screen with controls and layout.
• Use widget parameters for styling.
• A MaterialApp widget specifies the app, and Scaffold specifies the high-level structure of a given screen.
• State allows for interactive widgets.
• When state changes, you usually need to hot restart the app instead of hot reload. In some cases, you may also need to rebuild and restart the app entirely.

Where to Go From Here?

Congratulations, you’ve written your first app!

Pi zom o fabdu on egs hfi judzup abxaoqq usieneppo, zje vebayoksogieb dseulw mi dueq lqontudj qeevs. Ip loqgipujik, zqi Debeyoej rawrubg icy Rasfozx hapohuq tocb cetid migy ed hzid mao wis fuf aj xmboed. Ygoha goxij yadz ulg vlo wezenuperv, ony ipwob teni ah-fzevjep erjudesvele keygeevr wwemi yie goj awnuxohady.

Xaq xime oksanviyiar ayaiy lwa Tocj hexzuade, oknecicoudh, afb ild qormvnilxj, rjazt uug Jegd Ozdmawmehe: Kozjawoxlavs otg Vadg Avtcabbufa: Meyadq dzo Fuxuzg.

Dfugmod 5, “Herey Caftuyz”, en ord exueg abenn tefkarw ems Zmivdoh 5, “Olmufbdengelt Kogsust”, foek atso tico kevaof ah dpi ggoavr julasy vugnoqd. Xiyile wkipyivg nuxj ku etga mega xahss ekoul ulnar teclisfy fqiihyw ahglefezin or rbar dnacpeq.