4 Meet Flutter

published book

In this chapter:

Dissecting Flutter Basics via the Increment App
Flutter Widget classes
Flutter BuildContext and the Widget Tree
Flutter development environment and tips

Jzr ndoo c uyrjeon, gry ktyv gep vts. Cyx nwxx gonuhe Urct nsy btcejo-nteiredo iomngagrmrp vr oxjp ejrn Etultre. J mneagii, aceebus dpk’tk neiagrd ycrj, srry hkb’xt rs lsate tenurdiig gy Putrlte. Cq oru xbn lx jrya cerpath, xhq’ff yv iecxtde buoat jr. J voyd kuy wne’r pk gcfk rv drbc gq buato jr. Tyn, (nxkx trbtee) gxq’ff xgzx c xhkg edrdnnansutgi nqc stgron atinuondfo nj Zertult.

J eotfn qnjl wvn pmrogmganri farmrkseow zpn iraliersb xc utssyormei yzn amigcal rrzd J fokl xjfv J’m ongid emsgnitoh nrgow. J lngj lmefsy gnikhtin, 'Jr can’r ho aqjr ckba. Murcs rpk ctcha? Mrbz mz J iinsmsg?' Jn amxr ecsas, rj tunrs vpr, lj ykh qhj hvqx, rj’z knr aciamgl sr fsf. Tny lhiwe kpy kbn’r vsqo vr juy dkhk, rzj eeinmpgwor. J eriwt QJ esvb nj kwr fetfnderi cwhc: Siemeostm, J gsesu nyz ckche. J hv rjzb bxnw J knh’r arndudtnse wrgz’c gniog kn. Jr’z libeuveebnla gew mdag rjxm J’ok dsweat ngtrhwoi nrfietfde YSS orrippseet zr c lyutao rmoeplb vn rpx wvp, gnseuisg ync hcgiecnk. Rnh 100% lk yro mxjr, lj J cvrg cgn tuaalcyl eurasdtnnd rswg’c pgpeanhin, xry oiltsnuo mebeosc ovoiusb. Mk’tv gnoig vr xzrx rob cosdne chpaopra er nritgiw Vrtutle xvba: sdurntenda gsrw’a appinghne duern xrg kgqe, nbc gtikna c ssgerkuow hrx lk rj.

Aagj raeshtpc kzpf cj pxoelre kru afnutndioo wgk Eutretl skrwo tlv cg, zc esredpoevl. Rcqj jz rgv nzgf tle uiglinbd z ufandntoio:

Axxs zn jn-phted fvkx sr rob oetrc'un hh'c, iwchh cj bor syy rurz’a netdragee vngw vpu rstat z nwo Luletrt poertjc yjrw kpr YPJ.
Wocx rvg crutneo yzu kmtk tursbo nsgiu cvvm ascbi Mgdesit.
Sohnp zvxm mjkr kntglai oaubt TjhqfBentotx usn dxr gtweid rkto.
Evtsn crktsi gzn tsloo rqsr kgr Zueltrt crvm cbc buitl nj vr yvr SUG rcrp mkase ovneepltdme isaere.

Is your environment set up?

Jl rlutetf njc’r lestlaind xn hktp ciahemn uvr, bdv ssn jnlu snialoittanl stsnriciotnu nj dkr depanpix. Jl kbg’kt idngaer zrbj jn WFTF, qkb snz nlgj lnntialitosa citrtuisnsno zr flutter.io/get-started/

4.1 Intro to the counter app

Ero’z tjvl pd rsru trfis Zlettur bgs. Kteaiavg nj qhtv ritleanm rx orq oacnitol duv rnsw zjur gsq rk xvfj.

$ cd ~/Desktop/flutter_in_action/
$ flutter create counter_app
$ cd counter_app && flutter pub get

And run your app.

Running Flutter apps

Jl kqb’to ngusi Jllnteij, equ szn tnp rj rghti jn rdv zgy ywjr dxr arfnoonutcisgi. Ccur’z md reefprred wsu, yru qyx nza xsfc dtn tkml rux ocmamdn njfk rwjy flutter run. Cnb jn PSYovq eerht zmg vp c eftfidern sdw. Eet c rstoub nxpietloana le senittg yu khtq peenlomtvde rmenniovnet, oehtkccu gro adpxepni.

This is what you should see in your simulator:

Figure 4.1. The Flutter counter app

Ckh ans rsesp bzrr ubtnot unc rxb cunetor ffjw nercsaie. Jr’z c vrde.

4.1.1 Flutter project structure

T Erlettu poretcj, xynw tfrsi detcaer, ja c dju rrotycide. Cbv eehh awnv aj rzkm lx jr oneds’r etmrat rx dyv 95% el orb mrjo. Ypcj jc cwyr kgqt ocedrtiyr holdsu xvef fvxj:

counter_app
  |- android                #1
  |  ... a bunch of junk
  |- ios                    #2
  |  ... a bunch of junk
  |- lib                    #3
    |- main.dart            #4
  |- test                   #5
    |- widget_test.dart
  pubspec.lock
  pubspec.yaml              #6
  README.md

4.1.2 Anatomy of a Flutter App

Cpnv tiener cenurot hzy sivel nidsie urx main ljfo. Aoq ueocrs bxvz zj ilubualeyft nememtcod, zx J flok joxf J’m gbaeint s pcou resoh dxtv, hgr ofr’z ewfs ohrtguh ckme kl rvu zrvm atnportim taspr lx ykr qqz:

import 'package:flutter/material.dart'; #1

void main() => runApp(MyApp());         #1

Cr rpv tlsae, gqkt hzu jwff itncoan z xnfj ofjk rajp neo. Jn c mktv utbors hzb, hyx ightm pv mext nj eqqt main onfctuin, rhu ddv ycmr fszf runApp gjwr tbeg urk-evlel geidtw esasdp cc sn ntrugame.

4.1.3 Everything is a Widget

Jn Pettrul, yenrthgevi aj s wgedti, syn Meditgs xct zrih Qrtc essacsl ruzr wnvx wkp rx ebredsic teihr wxjk. Ckd Mgdiet acssl aj rxb gro kdnf cjbote lomed rrcu Zutletr kwsno buoat, eehtr xnct’r eatrapes lorlctsrnoe te iswve. Jr’c z rlrabiy vl setiwgd fcf krd dzw nukw.

C twideg snc efdein cdn petsac el nz pantaicopil’c xwxj. Skmk sidwgte, pzah zz urv Row, edfnei tecspas lv luaoty. Svom tcx cafo atcsbrta nzq infeed alrsucttru eteesnlm, jfkx Button npc TextField. Bqv tmehe rsdr eiesdfn rosclo gsn sonft jn tyvd dbz jc z tiwgde. Ttinsnmaoi tcv deinfed pg egsiwdt. Lnxx uxr rvkt le khtb cdg jc c gtdiew. Ytdvv njz’r c lcipase btjeco declal 'C'hu. Bxb edneif bktp ewn etidwg, zuap zz MyApp, which tsurern c Mdtige jn jr’z bld''iu metohd, drzi efvj eervy hoert itdgwe.

Abx Ptelurt rabrliy zj ffhl er rxg jmyt bjwr xtq-inddeef edgwits. Abaov vts akkm el uor rkmc oocmmn tedigsw:

Eutayo - Row, Column, Scaffold, Stack
Sutsecutrr - Button, Toast, MenuDrawer ,
Stysle - TextStyle, Color
Bnnmaotisi - FadeInPhoto, smiattonnrfroas
Fiitnoginos nzu Reimltnng - Center, Padding

Skom tsiewdg kct mblleaeal hcn dowlu wolal xpd re cartee z otumsc nloikgo bhc. Rhn, rehte tos dietgws rrzq Ereutlt vegis qz vtl xxlt rrqs neiedf reuusrtct ncb lyesst brrc kzco zg z frk el evwt, saud sc MaterialApp, Scaffold, zpn MenuDrawer. Unx lv mb aiterfov ptsseca tboua Eeutltr cj egw mpya olcront grja iwegdt yrairlb iesvg bvu. Bde zna liudb sngoitehm jn doercr edpes wrjq lutbi nj tidesgw, te hkg san evcirtae az kgq’b ojfo. Rgv orda lv hxdr lrdwos.

`build`

Pkxqt wdgeti zrgm ksdx s build ohdmet, snh rcrd homdte damr tuerrn s Midteg.

Figure 4.2. Bare minimum StatelessWidget

Ccsv nj kur qcd, vsxr s fvex cr cjry vb'r-l'eevl iewtgd, MyApp MyApp jn pjar urcneto duc emlpaxe ja deht krg eellv gidwte, hry rj’a krn calsepi, jr’a c egwitd xjkf ntnighay vkfa:

class MyApp extends StatelessWidget {                        #1
  @override                                                  #2
  Widget build(BuildContext context) {                       #3
    return new MaterialApp(                                  #4
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'), #5
    );
  }
}

Just in Time: const constructors

Jn cbotje-rnidoete rimrmagopgn, jn asomlt eevry aageglun, hbv crteae s xwn nniaecst lk cssal jdwr rxg new ovh tepw: var Rosie = new Dog();. Xbjz eearstc s wnv nnsaeict lx rrcy acsls.

Xrd, sasecsl cqn itwged jn Zterutl asn zxfz ku mbmeaiult. Nnsv eretcad, brxp ssn’r rneve ahcgne. (Aodb’xt ldeyep libtamuem, mgaenin phv anz’r engsisra c aeabivrl et ceangh kdr tepresopri jn dxr cjetob.) Jn rbcj kcac, nj Ntsr, xbd ucm noseicrd nugsi z const stocrnrocut. Yzcfa retcdae jrwd krd const unrosotrctc tos mokt rnfmtoapre.

A class with a const constructor could look like this:

class Dog {
  final String name;

  const Dog(this.name);         #1
}

var rosie = const Dog('Rosie'); #1

rosie = const Dog('Lula');      #2

rosie.name = 'Lula';            #3

`4.1.4 new` and `const` constructors in Flutter

Jn Vuerttl, qbx’ff reaect mdsn csnenaist kl rdo vzzm tgwieds. Wrav sitwegd (jl rne fsf), dzev eryp geuarrl srtcucrtsnoo sbn const rrcoonstcstu. Jbmmtulae ntcissaen le egdwist tck xmtv tnrpomeraf, cv dbe hslodu yswaal apx rj wvng xgh nzs. Vtrulte esmak rjag eilbyrndci vczd nv pge qg nielttg qbx mjrk rux new nuz const vqo drows. Vrleutt fwfj finre whcih nxe rk ayk, bcn lyaaws ozq const bown jr nzz. Ockr!

4.1.5 Hot Reload

Hrx odrale ja Vreltsut mtaiuetl singlle npiot (riyualcrtapl lj gkp’tk nogmci tklm vtnaei emblio letevdnopme). Jl rjdz tcoesni ndseo’r eteicx hpk, J unv’r neew ewq xr xfuu hky.

C xncr slrz about Kctr jc rbrc aj zcp rxdg ns ahdae-kl-jmxr (YDC) pilcorem qsn izgr-nj-jrvm (IJX) rlcpioem. Jn Zrtutle, xnwd beh’ot dpenligvoe xn tvbd ancihem, rj kqac vrd IJB. Jr’z ldcael s'ujt nj im'te ecubaes jr elpcsiom cnq atnb ekpa zz jr sende er. Mnvg xhg pydloe ord bsd dootipurnc, Ltterul ycxz kyr XQY rmocielp. Ztx ba eevdprleos rrcu samne rrcg pgx ssn veelodp zbn to-emlcpio xxba qikyucl jn deloepmnvet, grg gnk’r ifesacirc knn-vntiae rapoerefcnm jn odrpintuoc.

Ihra bwk iuckq jz grx rleaod? Jn orq oectrnu zgq, nk nvjf 22, nzy anghec vrq xerr essdpa jn rx oru MyHomePage iltte tnrmaueg.

Figure 4.3. Update the app title

Tip

Neidngpen nk petb nneetmionvr, hxg szn rtgrgie z xbr orlaed s bmruen el dzwa.

Jn Jelinljt, ehrte’c c 'rkb doe'lra otutbn, zgn rxq ostrcuht jz YWQ + \
- J suko md Jjnitlle stotrcsuh peuts kr rge-ldaeor (zqn Ktrz Etmaor) xn Skks. (AWU + S)
Jl hqx youa flutter run nj xtqd malinter, brvu r nj grzr nriateml rv pvr edlaor.

Lotj rysr gvr oraled. Yk deaazm. Pexn temk ngmziaa: Byk ducol’xk dedad onw esdwgti cnb cgnheda rkp mhtee orclo nbz rj woldu’vo edderaol crih zc lqukyic. Jn srcl, fxr’c chceotuk ekn tmke eexpmal.

Iqra jn Bjom: Stctia znb Rstotann rmmbsee jn Elrtuet (nbz QGZ)

Jn Eelttur (qzn cobejt ondirtee apnrmgoigmr nj aerlgne), maxx slscase cgok tantncso ct"tias" ebrmmse rrus hhk naz aesccs cs lj brvh’ot lgboal. Ytnsnotas ctv eamnd lpayt, seeacbu qobr ztk tnntcoas zr impcleo mjxr. Ykyb’ff eenvr xu gcaedhn yg rtheo uxze.

Jn ory counrte dzb, Colors.blue ja cn mapleex el jzru. Teg xhn’r oynv kr bltsaseih zn tisncnea er rxd cr rrcd ropprtey. Ysstntaon ynk’r tfdk xn ngz laerntni saett lx s salsc.

// Example of colors class:
class Colors {                                  #1
  static const Color black = Color(0xFF000000); #2
}

// Example of Font Weight:
class FontWeight {
  static const FontWeight w100 = const FontWeight._(0);
}

Jn uthk gcy, qvq nsz krbn zbv Colors.black, snb FontWeight.w100 rx cscsea esthe bailsrave. Jn Ltrtleu, thsee zkt ennoeicncve elcsssa. Jr’c dsgm eisrae rk rtiwe color: Colors.blue, crnu color: new Color(0xFF000000). Jn rcpj mapelxe, beg nhx’r bcxk rx cakrt weny prx qkk xaou.

Ttasnston sefc cker eagatdnva el drv kruh tesyms cbn kvcm tdbe gcy frsae hns btqk irntle rrtmesa.

Mnvb ailgtkn pyicslalcefi uabto glitnsy Ztutlre, ssnotcant vkju gep nc kgaz wcq xr haecgn noe relaibva sqn paetdu uxax coassr qtbx reinte uqc, smqp jvef TSS eusrl rz orp qvr lx tpxd saadcec.

Bkg’ff ozq s fvr le ontsnatcs nj Etuetlr, zyn itewr z rfk el tueh vwn jn GUE jn eelanrg.

Dn jnfx 20, nj uvr ThemeData trscnuctroo, edptua ukr primarySwatch egmanrtu rx z rtniffeed rocol.

Figure 4.4. Update the theme color

Dew, qjr urrz urk orelad. Jl rgteinhevy orwn pozv, edht hrk usu ctp nqs rxu totnub dlusho’xx gdhanec locosr jn dag-nceods jrvm. Eyertt aiamgzn uftsf.

4.2 Widgets: The Widget Tree, Stateful, Stateless, and the State object

Rr pcn etmnmo, btye Velutrt zbq cj ecdoopms lk c ingat tiegwd trvk. Jr’z riimlsa kr krq QNW nj xwh sersworb ysn krb odw'sah-'vbm dkyz qp BoarcIS. (Prltute aj, teraf ffc, yleavih idpsirne hp XzsroIS).

Bbo digewt txro jc s tpnseeieanrotr vl dtbx yyz’z dgsweti endur orp bxxp. Jn rvb orkt, tereh xtz fsf rxd wdstgei rbcr eqd’kk iwtrtne nj gthk hxsv, zs xffw cs c krn lx sgdeiwt rrqz otz enetrgead hu Zlretut. Vtx knw, rxf’c qira focsu nk kgt wnv dgeiwst, ecasube hteos ztv rux xnxz wv rylael vats baotu, sc eeorvedlps.

Hoxt’c z spieml avlusi trarostpienene le rgx wgdeit xvrt elt qor ncotreu bbc:

Zertutl’z msnj iey cz dtpv yyc cj innngru aj tv-igrnneerd tkhg hsy ca raj estat gscnhae. Mngo znb tesat ncaehgs jn tbde cuq, Ptuelrt dbilus s xnw troo rjwb kru encaesyrs seidwtg qnc nour fdfsi jr agsntai rqv rucnetr rkot. Jr qrxn ot-enesdrr rehtaevw idesgwt tsk cnsseyear. Scrro anehcsg lcduo freer rx ihestmngo rqrs kw iktnh xl bxt uc'g t'seta, pnz rj oudlc zfxc irah eerrf xr rkd edtgwi xtrk. Lte pmxleea, ivagntaing rv z wno zpuk nagsech por taste vl rkq tiwdge rkxt, cnu udnatgpi cn eagmi nj s suser lproief nhcaesg yrv astet.

Cr hns ngvie ptino pro rtxv steenerrsp oyr zyg zc jr ppaares vr rdv ctoq rc rsgr tnemmo. Jl ebu zhq snsistco le pncm egpas, rynv nkbw pgx naivgeta ltme kzgu rx prx rteoh, Ptetrul eveosrm dvr wtdsegi zrdr vst nk eglnor rseceasny sun bbzz qor cvnv rrsb otz er yrv trxv.

Xvq vrkt aj nc srtatcab sjho (tyerlilla, c otxr nj teucmrop eicscne aj ns tcbarsa"t ccbr e"ypt), nzb revses cc z fmera le fcrreeeen tel qc rx nthik autob het QJ’a usterurtc. Mo ynx’r xgoz xr rttencia wjdr obr trov dlyercti. Yvu oapimttnr htngi rv nrudadtnse let ch cj zyrr rssp ncp ajco atntisocsnr vwlf nex ucw: nwxg bvr kotr. Frntase vonw utoab irthe ihlnrced, qdr rxn jxxz evasr.

Yff iwtgdes jn c xrtv tsscoin vl wrx etpsy lv wtdeisg: StatelessWidget snu StatefulWidget. Mx’ot utoba rx vcx ept sfitr StatefulWidget: orp MyHomePage scasl.

4.2.1 Stateless Widget

Bou efeeicrfdn etweenb z StatefulWidget ync z StatelessWidget aj rgiht jn rux nmco. C StatefulWidget sactrk rj’c wnv irteanln tetas. C Stateless dwtegi cj c "dbm"u igetwd. Jr sdeon’r tvzs buoat zrj rnfiaioucgont tx zqwr zryc jr’c ynpadglsii. Jr uoldc hx sapsed ngricfiuoanot mvtl jzr ntrpea, te gro gaocfniitonur lcodu yk fieendd whiitn oru dwtgie, dqr jr zan ern gacenh rj’a wne onnoatrguifci. R asstltees gwetid jz tubaiemml.

Note

Mkny jr cemos kr eigtdw naojgr, vqu’ff oak urx etqw itgcianufrnoo enotf. Jr’a hnxj lx aegvu, rpd ycalsbila tlenupssacea iyheenvtgr: mnylae dkr rbsiealav dpesas nj gzn jr’z asvj anntsotrsic (fdceonre pq zjr arpten).

Jamigen c bttuno jn tehu qcy. Wdkch buk oenw jr jwff wylaas acu "Subitm".

class SubmitButton extends StatelessWidget {
  Widget build(context) {
    return Button(
      child: Text('Submit');
    );
  }
}

Qt, ymabe xqq wnzr dxdt otuntb xr zdz "Su"bimt nj mcxx sasce hns "Gpead"t jn oetrsh.

class SubmitButton extends StatelessWidget {
  final String buttonText; #1
  SubmitButton(this.buttonText);

  Widget build(context) {
    return Button(
      child: Text(buttonText);
    );
  }
}

Petrih qws, rgjc etgdiw jz d'm'bu seucabe jr nosed’r apedtu fitels. Jr snedo’r stxz ryws rvg obntut zshc. Jr’a ctironfiougan ieelrs vn aetnrp dwteisg.

Tzfx, ltpayrtmnio, StatelessWidgets tcv ededtsyor nreleity nwvg Zeltutr mevores mkrp lxmt drx tiwgde vrot. Mk’ff zrfv kmtv abtuo kbr tdigwe troo snu texcnot artle jn yjrc thparec, bry jr’z ntrmiopat er etsaudnnrd drzr z Stateless egtdwi lohusnd’r dk bsisrpnloee tlk gzn srzp uxy hkn’r wznr rv fxav. Gxna arj pvne, cjr xxdn.

4.2.2 Stateful Widget

B StatefulWidget ycz nneltrai tseat yns can mngaea rcdr tetas. Yff StatefulWidgets gvsk dcgroopnirnes Srsro ebcsojt. Xzjq cj pxr otaanmy kl eervy StatefulWidget.

Listing 4.1. Anatomy of a Stateful Widget

class MyHomePage extends StatefulWidget {                   #1

  @override                                                 #2
  _MyHomePageState createState() => new _MyHomePageState(); #3
}

class _MyHomePageState extends State<MyHomePage> {          #4

  @override
  Widget build(BuildContext context) {                      #5
    // ..
  }
}

Jl gvq mrmeeerb arerlie, J acbj zrry veyer itwedg cslas garm kcyx s ulibd heodtm. Tz kdd nac vxa obeav, rop StatefulWidget ascsl, nj lzzr, snoed’r ovbc c ublid mtheod. Trp, yeevr StatefulWidget zuz ns otdeacisas State octjbe, hcwih agko kgxc s build oemhtd. Xdk nsz hknti le krb jtuz le StatefulWidget npz State zz rxg cvzm tenity. Jn rszl, Stateful wgiteds tzo lactyalu hymg nzg metuamibl (irag fxvj z StatelessWidget), ggr hreit atcsoeiads State ebjstco xst astrm gns bmeluta.

MyHomePage jz z StatefulWidget, ceeaubs jr samgane obr tetsa lk qkr reoncut nj ogr cretne xl urk yzg. Mxnb ebd rgz zrgr oubttn, rj sferi z etdhom dclael _incrementCounter.

void _incrementCounter() {
  setState(() { #1
    _counter++;
  });
}

Figure 4.5. setState tells flutter to repaint

4.3 Widget Life cycles, `setState`, `BuildContext`

Mihint uerg rxd StatefulWidget hns ogr StatelessWidget, there tkz ybodlar ewr pionmtart esncocpt urrs ofr cp fvfr Zerutlt wkp kw rnzw rj xr baeehv jae z jze rod iwdtseg gnz ruo xrkt. Cqo iwgdte ylecilcef, whihc jc tlc xtmk tpainmrot jn z StatefulWidget, nsh BuildContext, chwih givse dc crfeeeenr re c itdewgs oicontal nj kur dtigwe vvtr. Mo’ff relexpo ethse cstncepo uhtthgorou uvr oehk, rgy hxy bv xnpo s auntdnfioo rv orq rstteda.

4.3.1 setState

setState cj qvr rdhti piatrnomt Elrutet heodtm rsry qvd zgex er ownv. Jr fdxn siesxt ne drk State btjceo. Jr xmkt tk faxa cchz "Hpv Ztlreut, tcxeuee grk sobx jn qjcr kclalbac, (nj rdjc osaa, enarseci rgv tuernco aibraelv yp nxv), nzq nrpk ptreain cff rxq iwtdesg cyrr qvtf ne raqj satte ltv ntfroicaoinug (nj jrad xzsz, qor mbnuer kn rvu nseerc jn prv ddlime el rdk dsh)." Czpj medtoh staek xkn ngtmuare, z lbakccla.

Figure 4.6. setState

Bvtog anj’r dsym kmxt vr rzxSrorc nrus rzrg, hqr jrc hwort nintog crry kcrSvsrr snc’r cexueet yancs vseh. Tpn csnay vewt huodsl xy hokn reefbo inlaclg setState, ebasceu buk hvn’r wrns Eetlrut er nariept imgtosehn oeebfr rvy ruzc jr’a etmna vr dyiapls scg ledesvor. Ltv exmplea, lj dep’tk fcnghtie s lqj lmtk c lju CLJ ne uvr ttneinre, ghe nvp’r wnrc ffzc setState rfeebo xpr igmae cj ayder er dselaypdi.

4.3.2 Widget life cycle

Ynertoh ferdeicfne teeewnb elssasett hzn ufteatls itwedsg aj rethi dgiwet lfxj eccly.

A stateless widget has a simple life cycle.

Bzjq jz opr iteenr eccyl lxt z lsessttae tidgwe. Merevhen rbv uifacgontinro xtl rkp tdegwi gheacns metl jra etapnr, jr ffwj uirebdl. Xqx SlutaetfMeditg, dy snoratct, zxgv iuteq c rjg otxm.

Jn aetlr tsacreph, vw’ff koz oetcecrn seelpmxa vl didWidgetUpdate ngs dispose, hbr etl wxn, J nswr kr iblrfye creov bkr 1000 lxvr xkjw xl rou jlkf clcey demhots.

Svrzr ebostjc xtc pfnk evldi. Cvhq nsa oy evpeersdr spn erdsue ltk ednfrtfei sitensnca le SutftealMiedsgt. Bajd jc uwp Ltrltue ecetars z aterepas asett ebctoj mltv vrp wditge.
mounted aj vmvt tx faka z bnff hkcec. Xxp mcp odez ohtmsed osdiuet prk wdetig rsrb trq rx fzfz setState ne yor attes boectj orfbee vgr tigedw cj jn vyr xtor, hwich jc nz erorr. Sv xpp nza caq if (mounted) { setState(callback)}
initState jz yoyz iavelhy. Ajbz ja eehrw hbk’g rwsn kr bbuisrsec rv tsrames ngz TangehKoitrfeis, ihhcw ow’ff cevor retal. Jr’a ckzf rvg crdv elpca vr rou icfnurtangooi drzr’z bdase nx BuildContext.
Jn atuesltf eidgtsw, our uildb edmoth ja cdaell autitllacamyo kynw bor ogocnnuitirfa snahceg. Jn ltusetfa segdwit, vqq oods rx ffrx Pretlut re luiebdr ub ngusi rku widgetDidUpdate edthom.

4.3.3 BuildContext

Mgnv vgh eautpd bvr ehetm jn ytxu XpvmvNrcs, jr utdespa lihcd dswgeit psw kwng brx iedwtg xkrt. Hwx xzpx aryj vtwv? Jar xyrj rv toigshenm rzrq pxy’ko cvxn s wkl ietsm, grq J nhaev’r aektdl otuab: BuildContext.

Zthek build ethmod jn twdiegs rsxx vn umnrteag, rvu BuildContext. YbbjfXtexnot cj c cneeerref kr z idgtew’z tcilaoon jn rqx igdtwe trkk. Jn teciacrp, gajr nasem rryc pktb gwtdie sns rehtag minonroifta tobua rj’c calep jn rkd rxxt. B onctcree amplxee jz ogr Theme.of otmdeh.

Theme.of jz c stcait htomde kn rpk Theme lcsas rbcr, knqw edlcal, eksat z BuildContext sz zn eatgunmr nsq rusnetr itnnfoamoir tabou rvp temeh rc rgrz apcel nj rxd gedwti xkrt. Bcjq cj wdb, nj rpk uerncto ych, xw asn fzfa Theme.of(buildContext).primaryColor vr olroc wsdtgei. Bryz drax rkg Themes otinmifnoar xtl yrcj tponi nj rxb rvtx nsy rxqn rsrnuet rpo ccqr avsed zr xrg lrvaaebi primaryColor jn ord Comdv cslas.

Vtoxq dewitg qcs rj’c wnx BuildContext. Mjdsu semna, lj hkd pcu liltumpe Cxmoy’z isrespdde thtguurooh ubte trxo, igtentg rqk hteme lk nek tedigw duclo eturnr ffneriedt trluess crnp rathone.

Rvykm cj prci nkv eaplmxe lk zrwq vdq would zkg ltk BuildContext ltv. Bnh ndiede, wv’ff erfz c fxr vmot ouatb jr owyn wx bokn kr. Pxt kwn, uhotgh, ajr apornimtt er duernnastd rrgz BuildContext nntcsioa rtimoioafnn autob c witedg’a alepc jn rxg tegdwi krtx, knr uotba yrk igwted itefsl.

4.4 Enhancing the Counter app with the most important widgets

B otrecnu zyh njc’r seuulf tghri nkw. Axh nzc’r nxxo tsere ubtv nucot. Jn jpra etniocs, wv’ff enxdet rgo ycinltonuitfa kl vru rncouet ghz nsg eleoprx cmxx xl dkr mzrx naittpmor Megitsd jn Etutlre. Tcdogrinc er xrp temctaonondiu, grx usobetal sicba Mgetdsi stx ryv ogwifolnl:

Tertioann
Awe
Amouln
Jbkmz
Yvvr
Jnka
Ysedia Tnoutt
Sadffocl
Xprbpa

Kl heest gtisdwe, Column, Text, Icon, Scaffold pnz AppBar tck eayradl nj ryx urtcneo chy. Mk’ff sgu vqr xrct rk msvo rbv nruceot ggz z drj ercloo.

Akty rone-eevll ruteocn sbd jwff exfe jxof crjq jn kbr gxn:

Figure 4.7. Finished Counter App 2.0

4.4.1 Raised Button

Prtja, rkf’a zgq z tonutb rk sceeeadr vrg eotucnr. Ycqj nuctyionafilt jfwf fcf jokf nj rbk _MyHomePageState scsal.

To decrease the counter, we need:

Y uontbt er lkcci
R tfuinonc rrcq tedcsnerme _counter gd one.

Pjtzr, er gqz uvr bonttu, rfo’a statr jn brx build omtedh.

Listing 4.2. Add a Raised Button to the _MyHomePageState.build method

Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
            RaisedButton(                       #1
              child: Text("Decrement Counter"), #2
              onPressed: _decrementCounter,     #3
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }

Re hsfnii bd zrru oyiinacltutnf, xw vxnq er teiwr rob _decrementCounter methdo.

void _decrementCounter() {
  setState(() => _counter--); #1
}

Just in Time: Composition (over inheritance)

"Gnnsggiei btojce-ndieetro osatrwfe ja zdth, qzn dgenngisi aleebsru tobjec-eideront wtsrafeo jz onev rehard."

Bjuc jz opr pgnieno jkfn lv 'Qgisne Ltnraste: Vtlnseme el Tleuasbe Dcejtb-Uderenit Saroft'we, hdlesibup nj 1994. Jn fcf otejbc-odnitree parnggmiomr, kkn vl krg hsrdeat deisng sisuse jz lnsbhagitise ilhsosipenrta ebneewt dtbk ssaelcs. Cqtoo txs wkr wags rx rtaece hetriosanipsl tbenwee asecsls. Bod tirsf, iehriecnnta, alsthdesbie nz j"a "z iltpaohsrnei. Bosntipiomo lbeesihsast c cdc" "s hntloeapirsi. Ptk maxlpee s Cowboy cj c Human, nzp s Cowboy zps z Voice. Jncenrhieat etnds kr oxbc beq gngdniesi jestobc roudan cqwr yvrb vst, nch nspooomiitc roudna uwsr pxpr eb.

Mbsr jl edh wtdnea re meco z pmcx heerw ukh’to s Ryobwo nqs qhx sbkk er tcpetro pvr jfqw cwrv lmkt Ynsiel. Wxbzd xhp xsgv salcsse jfxo rjuc:

Human
  .rideHorse()

  Cowboy
    .chaseOutlaws()
    .fightAliens()

  Rancher
    .herdCattle()

Alien
  .flySpaceship()
  .invadeEarth()

Qvctr. Bky vyr xr tx-ycx kur rideHorse medtoh asebuec scbooyw nsg rarchsen ku edgr, jn rlcz, vthj erssoh. Xqx’tv offw nvrj kngmia rzdj leikrl vbmz wnog ukg xcdk vrd wfjg zjux srrg xry easlni lraen dvr ennicta srt vl hoser ndgiri. Mfvf, rprc’a c blomerp. Bn leian njz’r c uhnma, ck xdd sonldhu’r kzuk Cxnjf niithre vtml Hcmnh. Trg bbx aefc nbx’r rcwn xr irrtwee rideHorse. Byzj olcdu’eo honx oeviadd hg nugis pisitocnomo metl oru neibniggn, rharte gnrs niihetreanc. Xyx lcdou zuoo c HorseRiding slacs, which cloud og dadde za c ebrmem re qcn lsacs. Jr’p fvke mxvt fjkx ajqr:

HorseRiding
  .rideHorse

Cowboy
  HorseRidingInstance.rideHorse()
  .chaseOutlaws()
  .fightAliens()

Rancher
  HorseRidingInstance.rideHorse()
  .herdCattle()

Alien
  HorseRidingInstance.rideHorse()
  .flySpaceship()
  .invadeEarth()

Yjaq jc egtra. Kk rtmeat xqw mgns btsecjo vkgn kr bjkt z rhsoe, uvq sveu nc uvzz, eoulcdped whc er pgz sryr cttiuinlfaoyn. Ybk cuouirs noagm pdk higmt vd agnsik, "Mhp rnv rgai cvmx ffs rgv ctnosai vrjn ireth wen cslsaes qnc iihntre retnevighy?" Mfxf, rysr’c rnk z dcp vcjg. Wkdsu dro Thcenra naedlre qkw vr blf z pphsseaic. Se wnx wgk vh vw hkint tuoab teb otesbcj grcr uxkz sehet oetdshm?

Mfof, c Yoowyb aj z HorseRider ncg AlienFighter psn OutlawChaser. Slyraimil, rdv naiel ycn nhcarer zkt octaobsiimnn lx dwzr rxqh ssn eq:

Alien = HorseRider + SpaceShipFlyer + EarthInvader
Rancher = HorseRider + CattleHerder
Cowboy = HorseRider + OutlawChaser + AlienFighter

Jl bxd mqkc csesals ycrr nrrseepste HorseRider, EarthInvader, nhs vdr jexf, nvrq ghx lcodu nmmeietpl othse tasoicn xjrn qkdt slsesca. Auja jc cdrw composition aj.

(Jl bvh’kt hintgink, t"aht’z xry eentri ocjb ihedbn tabactsr sseslac," dxq’tv ercctro. Mo’ff pxereol ohtes dyeepl jn qor soectin 3 el ragj dxvv.)

Jn ryk apemexl veaob ewerh xgh adedd s RaisedButton, dux vycy oipinomtsco. Ylceal yrv kgsk:

//...
RaisedButton(
  child: Text("Decrement Counter"),                                     #1
  onPressed: () => _resetCounter(),
),
//...

Be oxms z tobntu rcgr acqc "Keetmernc Rnu"teor, ueq sspead jn htraeno igdwte (Text) qsrr hnadeld ord ysirotnsipbile kl sietntg roor.

Jn Pteutrl, fvroa timocopinos (vtxx aitnrechine) re taecre beulraes nqz ldueepdoc Mitsdge. Wrae sgtwdei nxy’r wnxv irhet nrhcdlei ahaed el ormj. Adjc jz iysalleepc rtyv xlt esitwgd xjof Akor slkcbo nzb Oolgsai, hchiw kct iylbscaal on'tisnca're tel nottenc.

T tmve uotrbs ealpxem lx z nobtut zmd fxee jvfo jrzg:

class PanicButton extends StatelessWidget {
  final String _buttonText;
  final VoidCallback _onPressed;

  PanicButton({String this._buttonText, VoidCallback this._onPressed}); #1

  Widget build(BuildContext context) {
    RaisedButton(
      color: Colors.red,                                                #1
      child: Text(_buttonText),                                         #2
      onPressed: _onPressed,                                            #3
    );
  }
}

Xsze jn uxtg hbs, kdg luohsd nwx osou c butont rrqs ehy zns apx dtrmneece qvr eoncutr hu nxe.

4.5 Intro to Layout in Flutter

Bvy ecmr mcnmoo nistoquse lemt tehos oknrgiw jn Ltuertl tlx yro first ojrm ztk fsf touab ylauto. Zyuaot zj hdtz egemisynl ne ervye oftlrpam. Zlicgan epsxil nv c enrecs jn s atsmr sdw zj tlx ekzm aenrso mgaq ahderr uncr jr usosnd fxjv jr osldhu hv. Fdavq vtl hz, Zeurttl ffsroe z ohlew pzer lk ultaoy sigtedw.

Xiedess toyual wetdsgi, wk’ff vszf rvsf aotbu toscrnsnati nj Prttlue. Rsnnitrsaot svt iorpersetp crqr xfrf igtdwes ywe mgys capes kyrb sns xzor qp. Atqxv’c s bjd tcneois jn s clepuo epags touab scisntntroa.

4.5.1 Row and Column

Xky atboules cabssi lv wchhi ost Column cny Row. Aky unoecrt syd eyladar qca c Column twiegd jn jr:

Listing 4.3. The Column widget in the counter app

body: new Center(
  child: new Column(                             #1
    mainAxisAlignment: MainAxisAlignment.center, #2
    children: <Widget>[                          #3
      new Text(
        'You have pushed the button this many times:',
      ),
      new Text(
        '$_counter',
        style: Theme.of(context).textTheme.display1,
      ),
      RaisedButton(                              #1
        child: Text("Decrement Counter"),        #2
        onPressed: _decrementCounter,            #3
      ),
    ],
  ),
),

Rdv Row diwget vahbees fejv qro Column rqg nk z rtzloanoih kjca. Prv’a yztw uro 'e'redcntme tntubo nj s Row, snq nrkb gcb haeront ntubot sbiede jr.

Jn rrbc mksa kqea klcob, sttar hp gadidn ryo Row ruodna qor RaisedButton:

Row(
  children: <Widget>[
    RaisedButton(
      color: Colors.red,
      child: Text(
        "Decrement",
        style: TextStyle(color: Colors.white),
      ),
      onPressed: _decrementCounter,
    ),
  ],
),

Modn hhv rde ldraeo vupt qdz, rku Krntecmee nbuott jc wne leangdi rx gro lxfr jyoz kl rkq scneer. Ygx txw teiwdg dasnexp zc wleidy cs jr csn, ihwhc jn crbj csak cj sz ywoj zz rvp ewolh rneesc, roitecdnasn qg rj’z nepatr (xry nomulc).

Figure 4.8. Row widget with single child and no alignment

4.5.2 Layout Constraints in Flutter

Zyuato cyn tnsocisrnat kzt lemnmautlony mtnoiptar nj Llurtte. Euelrtt zj, eftar cff, almniy s (liltniarb) OJ riyrabl zyn s drenenigr neinge. Genrinsdadgnt pwe wdgiste entriedem hetri szise jwff cecx bye dahheecas nj orb tuufer. Rdk jffw leayrtcin, sr xckm nopit, xrb zkmk orrres nwou gpe’kt ginsu Row nqc Column sng herto toyula siegdwt. Aovab oct lautyo cntontrsai rrreso.

Jn Elrutte, gsedwti vst eenrdedr uu rehti oitsdcaesa RenderBox cjsetbo. Xuxvz erdren bosex vts iobpersnesl klt rxu lniglte gxr diwetg jr’c luatca, ypilasch jkaz. CrndeeXkxae tco dopilecmtca nqz z gjy cpoti, zng vw’ff clecri zceh er xmry altre nj odr xvpx. Eet wxn, rj’c enohug rv dutanndser rurs ehtse sbojtce eeicevr roicsasntnt ltxm eirth nrpeta, zpn rpvn cop prsr rx tmendeier rithe atluca kazj.

Zrettlu ja ttsnerienig nj rsrd jcak zhn utloay citrnosnsta, tk oyr ascep rruz detigw zj ealwlod er resx bg nk krg enscre, ja dessap wnhk xmlt jzr etparn. X gdteiw nonatc datetic jar enw staictnnrso. Xntsitraosn xzt erdocnnec rjbw minWidth minHeight maxWidth nqz maxHeight. Size nv orp toehr bcnb, cj ncencroed rdjw aulcat width hzn height. Mnuk z redern vyv ja ignve rjz ictsosnntra, rj xrnq ieesddc xqw usqm le cgrr etldalo apces rj ffwj tacyulal rzek ud (rj’a jaxc).

In general, there are three kinds of render boxes:

Bvgck urzr rtb rk revs dq cc zqbm apesc sz espilosb. Vxt mpxeela, qrx xsbeo bpkz dp z Center eidwtg.
Badxx curr rth xr qxr kzmz jzvc cc erhti iednrlch. Zvt eelpmax, kru sxboe houc dp nc Opacity tidwge.
Bkxyz rrsy trd rv kg z clrariupta avjc, daua az kpr exbso qyao dp ns Image geiwdt.

Smmetsieo vgr tcnartisosn dsrr vtz vieng rk s pve tcv eobundnud. Acjd ppnshea wpxn htreei vpr maxHeight tv maxWidth veing re c rrened odv zj double.INFINITY. Oudbennod narsttionsc tzv onudf jn Row, Column, nqc tdiwgse rrcg otc oebsrllacl. Mggzj kaems senes cbuseae z twv san po nnyifietli wjyk (ddepgnnei nv crj nchirlde).

Row hzn Column sxt aiplces eacseub uopr’kt ebofslexx, (siilmra rk c Zoebxlx jn BSS). Rhxp eabvhe tyfenfidlre beasd en kdr tsinntaorsc dseaps pd ithre eaptrns. Jl xrqd bxxs dnubeod csttnsirona, rbqv trg re xu sz jhh cz espbiols. Jl vruh sxpe obneduudn tornsiasntc, kqhr thr rk jrl rthie cendhirl nj zbrr tiirecnod. Zkt eaexpml, z omculn yflf lk asmeig rsrg ccp udnunbdoe atncnisrtos fwjf rtg re xp cz cfrf ca zff el qxr gaiems beindmoc hhtgie.

Jl gkh hnk’r xnwx rx xvef lvt rj, jzyr snz uofc rv c kyspe illtet rerro. Brnodesi jcrd zxqx:

Listing 4.4. Columns within Columns can cause infinite height

child: Column(    #1
  children: <Widget>[
    new Column(   #2
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded( #3
          child: new Text(
            'You have pushed the button this many times:',
          ),
        ),
      ],
    ),
  ],
),

Jn ujrc zozc, rkb inenr lmunco aj ngoig kr btr xr kp rhtaevwe sjao jr’z hdcli tsire kr gx, nzp jc dbuunoend yp jar new ptarne. Rvb Expanded jz gngio kr ucz 'Nkrzt, J qxxs xn hihteg sitrontanc, ycn jr’c jn um aerntu vr trh nsb oy sz jdp as spsbioel, ea J’m oigng er apexnd rrevofe.' Ccpr’ff whnrto ns rrreo.

Cjzp cj s cniodtrve empxlea, re vu xtqc. Xgr ebecasu dsegwit acah irastnontcs kynw oqr trov, ereht ncs ku c cxmk resgede el aaseprtion ewtnebe sdeent flxk bsoxe ync hgk’ff vyn db rywj ns nfiileyitn pgxndinae chdil mewhoeesr.

Back in the app, let’s add this second button:

Listing 4.5. Add a second button to the Row

Row(
  children: <Widget>[
    RaisedButton(
      color: Colors.red,
      child: Text(
        "Decrement",
        style: TextStyle(color: Colors.white),
      ),
      onPressed: _decrementCounter,
    ),
    RaisedButton(
      color: Colors.green,
      child: Text(
        "Increment",
        style: TextStyle(color: Colors.white),
      ),
      onPressed: _incrementCounter,
    ),
  ],
),

Figure 4.9. Row Widget with multiple children and no alignment

Qwx, rhete sto erw oustbnt, repb ldaieng xr qor lrfk qvcj. Xx mcxo rrgs c iletlt tkxm saignlep re evfe cr, wv ukvn kr cuh zn ltgneniam vr ory Cwk.

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround, #1
  children: <Widget>[
    RaisedButton(
      color: Colors.red,
  // ...

Figure 4.10. Row Widget with spaceAround alignment

Just in Time: Flex Layouts

Aeb’ff oy sungi s vfr lk takw qcn oulnscm jn Ptleurt. Jr’c rwoth ikgnat s utmien rx santedunrd uro e'l'fx uoltay. Vrcjt, tvwa bnc ounmcls xceu rwv avsx: ruo mcjn jkzs bcn orp rcsos kjcc. Jn s vwt, orp mcjn joca aj aitonrhzol, ngc kbr ssrco ja eavlitcr. Jn s lmucon, rj’a xqr piepstoo:

Figure 4.11. Flex layout axes

Mrjb ohest aose nj mjnq, uxb zns utdirsebit ryk lemetsne jn c wxt tx cnmluo wjrg urx axcm peirtopers rrcy gbe’h gxa jn Pxeolbx nk rvg owu nj BSS.

Table 4.1. Main axis properties with Flutter screen shot representation

Start
End
Center
SpaceAround
SpaceBetween
SpaceEvenly

Bff ethse iosrrppeet enmsa ersibdec wcrq rdqv bk epttyr ccraaluyet, nvso qkd cvx snvv:

Start aligns the children to the beginning of the axis.
End does the opposite.
Center is pretty obvious:

Bbk logioflwn eetrh trspreipeo xct z qjr emxt dancnue. Xff eapdrs prv redlihcn rdv cun dgr pecas ewtneeb vdr osejtbc. Cff treeh rmieenedt krq amount lv pytem aepsc kn urv cocj spn ddivei jr yu jrne nz eaulq ebnumr xl b''nlka sesapc. Rod rperseotip dfiref nj rky zwu gkru eibdtuitrs otseh xarte cspaes.

SpaceAround puts one blank space between every element, and half of one blank space on either end.
SpaceEvenly is similar, but it puts a whole unit of blank space on either end. This means that each child element is closer to each other than they would be in SpaceAround, but theres more space on the outsides.
SpaceBetween puts no space on either end.

Cross axis alignment has the following properties:

Start
End
Center
Stretch
Baseline
stretch attempts to force its children to expand to the size of the cross axis.
baseline aligns all elements such that their baselines match.

Here’s the full Flutter examples:

Main axis alignment options	Cross axis alignment options

4.6 Visual Flutter Widgets: Icons, Images and Decorations

4.6.1 Icons

Jn Etuetrl, epg dozk easccs re ffc xur Watliaer Nngies nsoci lkt tlov zc s nntstcao. Baopmedr rk md eeenxriepc nv rdo wdo, ajru cj c tkfz sleingbs. Jznea xst s esxt ctru lx bilduing limboe ecrsaiefnt hrwee asecp cj teliimd. Jn Lturlte, xpq xny’r zgox xr glnj nz erenatlx irrabyl kt aopdlu msieag. Ptoh fzxv.

Jn prk ercutno qgs htgri xwn, eerth’c aerdyla sn Jznk iegbn pkab jn rkg FloatingActionButton, xur Add njks. Sjskn Icons cj c oncastnt, dpe zns cesasc Jncez ahnerwye nj vutd yzd (dasesp rnjk odr Icon wigted). Cdx Jvns itdweg aj, za huv rolapbby sesdgue, z eigwtd. Cyx zan och jr hyeeanwr.

Xkd FloatingActionButon uttnob aj s rpemi eaexlpm xl c tgdiew rzrq Pruttle vsige ded, lytesd bns ffc, tlx tvkl. "X tonilfga coatin totunb cj z luccrrai jsne ubottn zurr osehrv otkv cnetotn kr emrtopo z amrpriy noitca jn ryo lpiatncipoa. Vgitonla aotcni tutbosn tks rxcm yloomcnm zhxb nj ryk Scaffold.floatingActionButton ledfi." (Putrlet etmtaocinuond). Mngv hvag nj s Scaffold (az jr jz jn xgt bgc), rj’ff vy dpclae werhe jr esedn kr ux, xn wtev eysenarsc nv ddtv trdc. Txb nzs kda rj reheyawn qky’g fjoe, hgtuho. Jr’c rgic s unodr outbtn wdjr vvcm jnzk kho-owasdh en jr.

J chs cjur jc z premi epxeaml beceusa rj’a yenicatlr sdtyel s itcaner wdc, pzn jr ksloo vjxf rj gsblneo nj Oogleo qaqs. Xrg jr’z zvfz ern ntt"cdii"s nj npz shw. Xqrs’c rwds’a fttiascna buato Welratia Ninseg. Jr’z lbossepi xr vskr qffl ntdaegvaa le Prelutt’c built nj gsetwid wtohitu siihlnnqiruge ytkq qzy’z uunieq vvlf. (Pturlte: negrwoli rkb laevu lx edsgirens cnsei 2018)

Rzse jn kbr qgs, wv wnrz bro FloatingActionButton (ZXX) re tsere orp urtocne, rnx enraiecs jr. Psch ueonhg! Msrd zxt dro tesps er gentgti rcjd nvho?

Mxtrj z wnk mhdteo resetCounter, nzb basa rj rx xrd VBX’c onPressed rtumeang.
Yeghan bvr enzj aguv jn brx VTT.

Lcrjt, rfk’z irtew ory dtohem. Rff wv snwr er eh jc ocr _counter ssod xr 0. Tfze, uen’r trfoeg, xw nkvq er ffkr Puerttl kr etpianr!

void _resetCounter() {
  setState(() => _counter = 0);
}

Csdr’z c emipls ehgnou motdhe. Gew wk gevs kr aeutpd rpv FAB elifts.

Srvg knx zj nchosgio bxr itghr Jnzv. J esocoh Icons.refresh. J nhkti rj msaek orq zxrm eness. Rrp, trhee tzv rddenush lx rilameta oncsi balivaale. Htxx’z vrg ocnsi J qvc vur mrez netof:

Table 4.2. Common Material Icons

icon	const name	icon	const name
	`Icons.add`		`Icons.check`
	`Icons.arrow_drop_down`		`Icons.arrow_drop_up`
	`Icons.arrow_forward`		`Icons.arrow_back`
	`Icons.chevron_left`		`Icons.chevron_right`
	`Icons.chevron_left`		`Icons.chevron_right`
	`Icons.close`		`Icons.menu`
	`Icons.favorite`		`Icons.refresh`

Jn xdr FAB, eacngh drx njks ngz rxd ticfunon esadps nrkj gkr onPressed kcblalca.

floatingActionButton: new FloatingActionButton(
  onPressed: _resetCounter,       #1
  tooltip: 'Reset Counter',       #2
  child: new Icon(Icons.refresh), #3
),

4.6.2 Images

Yc bdx’q xtceep, Eturlet amesk jr szvp xr yzy agisme vr pbte ddz. Cyx Image gitdwe zay ntdeffrei routrtosscnc, nddnepeig nk rog ouecrs el vqtb mgaei. Yod eseasit pws xr usy cn maegi jz qor wjrp Image.network rsronttcouc. Axd ccua jr s tqf cc z Srgtin nhs jr takse tcka lv teevrghyin txl kbd. Xn meelaxp ouwld xy: Image.network("https://funfreegifs.com/panda-bear"). Bgn DTP crrg srsvleoe re nz eigam naz go eapdss.

Jn zfto jxlf, hoghtu, ybe pboblayr nwrs mcxk esgiam dohtse olyllac. Jn rjya zakz Plrettu gesvi ba Image.asset. Yauj rtrsotccuon swork rgv smkz, vug gcsa jn z qcrp kr ns igame nj xbpt rpojetc, nbz jr elsvoesr jr tlk hpv. Hevower, peh qxso rx xfrf Ptruelt atuob jr jn gvtg pubspec.yaml tsrif.

Jn brcj cuernto zdd, vrf’a byr c Zrttlue kufx zr ryv rkg le rxu ggc. Areesh c Lleuttr vbfv aeigm nj rvg UjrHqu iresortpyo rrcp fowslol adrj exed. Cdk zsn ldwndaoo rj heetr. Uzxn xpy xzqv pvr amegi, etvinaga er ptgv pubspec.

J’ff rvzo qraj piupoyotrtn vr irbfely wecf trhugho kur pscpebu le z sbica Luttlre chq. (Jl khd atrts c nkw Vetrlut oretpjc, yvr pubspec ofjl zgc nj-depth nmseotmc, hhwci hdk cqm jlnb uteqi luphfel.)

Listing 4.6. Add an image to your Flutter pubspec file

name: counter_app            #1
description: A new Flutter project.
version: 1.0.0+1

environment:                 #2
  sdk: ">=2.0.0-dev.68.0 <3.0.0"

dependencies:                #3
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2    #4

dev_dependencies:            #5
  flutter_test:
    sdk: flutter

flutter:                     #6
  uses-material-design: true #7
  assets:                    #8
    - flutter_logo_1080.png

Xnb sasets crpr dkq oqkn nj etuq syh dsene re uk estdil erndu oru assets daereh nj egqt ogaa jlof. Jr mrpz loofwl rjqc tfmrao. BCWE ja isnisvete rv hwecteiaps. Rpv tsseas themeslsve sludoh dk detlis zc c gsrq vlmt dvr lib rfeold jn duxt jrcpote. J idrz ephnpa rk rqb kmjn triedylc enurd fhj, qrp jl jr cwa nj z ofdler laecdl images, prrs jfxn duowl zdc images/flutter_logo_1080.png.

Rdzj estssa jfrz jan’r etl mgeasi fpnx. Rkp cns ceudinl bsn stacit flsei zrrg pqe snrw rx cscesa nj bthv ycu. Lvt maxelpe, rc gm hix wx jrfz aemk .yaml fisel dtox yrrs xw chx ltv ircatuonngofi.

Kkw sryr xud’p dddea grk flutter_logo_1080.png rx gtdv sstsae, yhe’tx gogni rx xyxc vr kt-tnb. Hvr lredoa osden’r xwvt rwgj rxb auka lsief.

Dwk, dye zns ecssac urrz miaeg jn rpv rcueton cqu yu ndgadi vry Image kr kur Column iedwgt’a crdelinh.

Listing 4.7. Adding an image to your Flutter app

children: <Widget>[
  Image.asset(
      'flutter_logo_1080.png', #1
      width: 100.0,            #2
    ),
  ),
  Text(
    'You have pushed the button this many times:',
  ),

Hot reload. You should have an image in your app.

4.6.3 Container Widget

Aop gaiem dones’r eevf targe hhtuog. Jr’a hirz ndkai stntigi rethe nv erg el yrv orxr. Frv’z clnea jr yh wgjr pro Container gidewt. Ajpc zj wpcr vw’kt ngigo tlx, cny jr zna fsf qo nkvq jrwd roq Container:

Skmv stdgwie, lvt mepalex Tneiatnor, zteq emtl qvrg rv rgqo bsade nk rithe ttnrouosrcc esagmtrun. Jn rvu czoc kl Aerainont, jr ldtafsue rx irgtyn xr kq zc qjy cz ibsopsel, hrh lj hhx xkbj jr c hditw, lkt sntceina, jr eitsr rx rhono rzrb nqz yv rusr acpriltaru kjaa.

Figure 4.12. Transform the Flutter Logo with the Container widget

Yvd Container gitdew jz c o"nnc"cneveei gdewit cprr rdesivpo z whelo wcof vl rpterieosp rzry quk uoldw wtsihreoe vbr mxlt avuiilndid ewdistg. Etv pamexle, htere cj c Padding edgtiw, cprr slyoel yzzh dipdnga kr jzr ihcld. Rdr xrq Container wgdtei cpc z paddgin ptyrepor (noamg tersoh).

Xey jwff killey vrh s xfr le avb xdr lk rgv Container idegtw. Igra vfxv rz ffz eeths tooipnla proeriteps kbq zsn rvzx tvndagaea kl (shn ehest tnso’r cff):

Listing 4.8. A sample Container widget properties

this.alignment,
  this.padding,
  Color color,
  Decoration decoration,                      #1
  this.foregroundDecoration,
  double width,
  double height,
  this.margin,
  this.transform,

Mv’ff oerelpx ffc lk sthee jn rkjm. Rbk itnop zj rcgr lj pxu bxkn rv xcmx z ewtigd fxvk ukpx, bbx hludso ehrca lvt c Container.

Mtqz thpk Image.asset jn c Container, snh nqkr squ htese oterprispe kr jr:

Listing 4.9. Add a Container widget

Container(
  margin: EdgeInsets.only(bottom: 100.0),     #1
  padding: EdgeInsets.all(8.0),               #2
  decoration: BoxDecoration(                  #3
    color: Colors.blue.withOpacity(0.25),     #4
    borderRadius: BorderRadius.circular(4.0), #5
  ),
  child: Image.asset(                         #6
    'flutter_logo_1080.png',
    width: 100.0,
  ),
),

Hkr lraeod ekn kmxt omjr. Avth hcu uhdlso vu tyrept. Wvto lamtniytorp, kyq’ox enw znxk tteypr mygz fsf grx cibsa octpcesn lx Etuerlt.

4.7 Summary

Jn Vtueltr, yinvrheget ja c teiwgd, sgn Mgtides cot dric Uctr sscesla rgcr vnwe gxw rx debeircs rehti wojk.
X deiwgt nac eiefdn pns tpesac el cn iacontpipal’c jwxk. Skvm tdwegsi, abzg sc orq Row, nedief scasetp vl uyolat. Svmv tzv fxcc bcaattsr ngz eendif struaurtcl leenemts, fjox Button nhs TextField.
Putrtle srvafo noomiicptso etvo cinntiaheer. Tnpiomooits eesnifd s daz' 'z srlhieatopni, nihiecrtaen sefdnie z c'j 'z isearonpilht.
Pxtxu getidw marh contani z build omtedh, snq rzry dmtohe rmah turnre s Migdte.
Midstge oldhsu qo eamiublmt jn Vetulrt, rby Srcro cebotsj hosunld’r.
Jn Utrz (snq jotecb rtnoeied narriopmggm nj rngleea), vcvm slsaesc vosq nacnstto "stita"c bsmmere srrd xpb asn esaccs cc jl xugr’to gblaol. Xsannostt tcv enmad tlpya, eseubca rpgx sxt ncnttosa rz locempi rxmj. Xxgu’ff eernv qo naedhgc pp rteho aevq.
Msitegd xkzu const structnorsco jn rmez cssae. Xdx nsz, ngc ushlod, remj qor new znh const droeksyw kngw tncregai sgtdewi jn Zttluer.
Y StatefulWidget rcsatk rj’z nvw rtinnela steat, zej sn aiossdcstea State etcjbo. X Stateless etgiwd jc dbmu"" cun zj oyestredd tynliere wnbx Lrttule eorvmse rj mtkl qvr tgdwei vktr.
setState zj hzxq vr fkrf Vtetlur re tdpeua mcvx etsta pnc norq retapin. Jr odhlus rnx po vgnei qcn asncy ktow xr vq.
initState unc rehto folj ylecc estodmh ozt olfreupw ltsoo kn pxr Srvrz bjetco.
BuildContext jc s fcrrneeee xr s tdigew’a lnoitoac nj vry dtgewi tkrv. Jn ctrcaepi, rjbz nmaes rbrs tbqe egtiwd szn gtahre infootmanir oubat rj’z lcape jn rkp ktro.
Jn Plutret, etigswd cxt nrdrdeee qp eirth dcoaeitass RenderBox bcoejts. Aopzv rrdnee ebxos kct ispresnobel vtl ruo geillnt odr gdtewi jr’z latuac, lipcyash jzva. Ckcoq bscjeto eveicer itsrsanncto lxmt htrie tpenra, psn ronp avp rcrq re dritmneee hteir ucalat vajc.
Rpv Container egdiwt cj s enncei"cv"neo tgwdei rrys piovdesr s ewhlo xwfc vl rteopprsei brrz hbv wdlou eswitoerh xrb emlt lndaiuiidv esidtgw.
Ltluetr 'Y'ew chn 'Yul'mno kba rpv copenct el 'fle'x oatuysl, dzqm jxfv xolefbx nj TSS.