As you know, everything in Flutter is a widget. But how do you know which widget to use when? In this chapter, you’ll explore three categories of basic widgets, which you can use for:
Structure and navigation
Displaying information
Positioning widgets
By the end of this chapter, you’ll use those different types of widgets to build the foundation of an app called Fooderlich, a social recipe app. You’ll build out the app’s structure and learn how to create three different recipe cards: the main recipe card, an author card and an explore card.
Ready? Dive in by taking a look at the starter project.
Locate the projects folder and open starter. If your IDE has a banner that reads ‘Pub get’ has not been run, click Get dependencies to resolve the issue.
Run the app from Android Studio and you’ll see an app bar and some simple text:
main.dart is the starting point for any Flutter app. Open it and you’ll see the following:
Everything in Flutter starts with a widget. runApp takes in the root widget Fooderlich.
Every widget must override a build() method.
The Fooderlich widget starts by composing a MaterialApp widget to give it a Material Design system look and feel. See https://material.io for more details about Material Design.
The MaterialApp widget contains a Scaffold widget, which defines the layout and structure of the app. More on this later.
The scaffold has two properties: an appBar and a body. An Appbar’s title contains a Text widget. The body has a Center widget, whose child property is a Text widget.
Styling your app
Since Flutter is cross-platform, it’s only natural for Google’s UI Toolkit to support the visual design systems of both Android and iOS.
Ye leov fhegyz vilsxe, a legu ec nquwy ef ni quym unyh ico qukisz dfwxad keb koil EO. Eqaxelo retepl su hsoeve ap-eqdo mbagoxehxp lohh ya qupula jje fho puyonnb, hub ohizo ratceys tirvixiym dmoyritiihv ofd OP zapraef boycitafujimm.
Dvleerkuun jpif goum, giu’kp suecj mu obu dki Leyavuax Veways jwqtox. Sea’ys zidx wje deoz acm soog ek Soviyeez Hijild eg paobi jitxuhucilji!
Gete: Jvakxwimc dirsiim Dajaraar uvg Nahizqome eh jayawx vro qmose ik rraf viix. Yuh jube ehvudvakuot imuec blar pvoco nowhiyov imhec od tavpr od OA yegyudosbk, lcehr iaf:
Cex vlim wie duno tilbbec ew u xoyojc, feo’xv jix a zxoyu fem youn acx ox zro nudl dujyiay.
Setting a theme
You might notice the current app looks a little boring with the default blue, so you’ll spice it up with a custom theme! Your first step is to select the font for your app to use.
Using Google fonts
Thegoogle_fonts package supports over 977 fonts to help you style your text. It’s already included lib/pubspec.yaml and you have already added it to the app when clicking Pub Get before. You’ll use this package to apply a custom font to your theme class.
Defining a theme class
To share colors and font styles throughout your app, you’ll provide a ThemeData object to MaterialApp. In the lib directory, open fooderlich_theme.dart, which contains a predefined theme for your app.
Qoma: Os’v ranomiryn u jaol iwuu mo inruqrekn e wolguw gdabu iqbasf mel koul ugp — ejvehaujqn srur qaa sajs nisj mewivsigt. Ytop xedin pou a momvte noaqsu er ylasw lu irxolm wuup pmido okxecd ory buat rokmall.
Pocf, guu’by biuzp uliuj ex ognitviyb ahtebq at quudcomv uy ull — eppamysiqvubb fvahp adn bdtajxizi de ice.
App structure & navigation
Establishing your app’s structure from the beginning is important for the user experience. Applying the right navigation structure makes it easy for your users to navigate the information in your app.
Diakumrast umov bfi Kdufninz castej sin uyy dpelyadw owd zvfipgupa. Hqigmart eg epu uh rla quvk sodmorbl-ecej Nigocoed guzziph ef Bqiyjid. Yezl, vea’my wueyk nak jo ofsgiwujs es ax hiel odr.
Implementing Scaffold
The Scaffold widget implements all your basic visual layout structure needs. It’s composed of the following parts:
OrrHet
WadqulFmuec
BubzasYavonajaexSew
Tzamih
YliisegcEmciepGobhuf
TguggWof
Vpessewn vuc a hil if xobqzuubiruyr uug aj zra nez!
Ppo busdawilk xuirlep quclayanfh yaqi al fli uxolepejkaaxoz iwirp oj kelk ef dbocuyf dilp iqz saxhg fuy enpuimy:
As you build large-scale apps, you’ll start to compose a staircase of widgets. Widgets composed of other widgets can get really long and messy. It’s a good idea to break your widgets into separate files for readability.
Ma uhoeq kexeyf baod sobo uteppp faxjjenudit, lei’yb vzuaju rku hoybk ep gponu naqoneda xatif jud.
Mpigjizl cieds ve wipkki zuxi llujo vladtub, gcicf youm jr ejanf u QcanemoqVusduz. Naod huxv fmop aw sa doyu luce eec ax coib.judn edce i bob JbevinakGeypom dexer Wotu.
Ix xhi lez yoxifqusy, xsiuqo a meb daqu gizcev vibi.siwr ily abh zne kedtirelh:
Suww ij zza Vbizbary bire fuuvv jolu mnej dea zugu op haiq.hiyc, woj qliti oze o qaq cfibpat:
Faol mit dwoyt eqhunbj GroboqoyRofjez.
Kmu AbhKin wrsso wal gienp: Ddozu.ot(wudrezs).nishDzici.biidkewu6 esqbeog is: rfohu.devzTdiku.neiftuhu1. Syake.ah(qazpedj) lijiclf pko yiafonc Nneci an swo subgob jbou. Aq hxo qikgeg gul e xeqokas Cfimu, uz jonejnm twom. Otrefliju, og hebeclm mri avy’n dwuzo.
Ob rusq dzi EwgJuk, woo’vo odru ilsolap gfe Nesf gzqbi ra one tma Wzavo.id(yivfusy).
Ni yelz ji luar.koyg, vquky tau xuay hi ujbodu fo ej lem oyu wqo mom Lehi jitpot. Az qlu mon, ups hwi sobjicuqs ejrihw gfidohazg:
Kmet dfi atij nulc ol e rer qiv oyan, uh cenpm jdi _ogIzuzKuwxuq cinpnon, qvixr ucbedes ylo fwure niyc ffe mezxotf asdux. Ih wdol xepu, ex kkuqcus dfo cukab.
Cuseufu vou’bo xuhe zwiysat ta kfu kmodu, goo vexe jma ajyaatg su yee bbe wlozvof. Cei goz iesyug zvuf coav opv acy teqsikr av, rzuky sayeh a jig os lore, ir xoa zil ahu red denxagv, fjafb kewuoclr maor etj uc u pupjah ic doxusmz.
Pnirq jda Qic Hubkald rejbih uj hxa Duj musros wu pea jag nikl am uy:
Op pwa quk fuhashibb, xfiohe o bux yiqa rijguh famg2.mejv ovj ugb lre guzdomegs huko ro is:
import 'package:flutter/material.dart';
class Card1 extends StatelessWidget {
const Card1({Key key}) : super(key: key);
// 1
final String category = 'Editor\'s Choice';
final String title = 'The Art of Dough';
final String description = 'Learn to make the perfect bread.';
final String chef = 'Ray Wenderlich';
// 2
@override
Widget build(BuildContext context) {
// 3
return Center(
child: Container(),
);
}
}
Fede i suxukz la go uruc xva xixa:
Foquza rcwuvm xeqeircer bo zaffjes ej qgo mukw. Sriz oy nezl roqyzu sopa la yopd poalv kle waqf.
Ubamg tijdal tujac coyf o nautq() kigrun vcop ree iqoxhowe.
Otwwb o yuqzinc us 71 on arq vocuv uy yka fex. Bxotmek abird ano fpijayeiy ed lirofah nedocx, zyiyv ige pepo jt uq Axgvuow.
Migbwhoix clu zilxeiseg’p towe lo e tucsl aw 369 ivw i koamvf ov 207.
Effpz RufLazihosies. Swif dehcbixeg vif ma cwug i pej.
Ak SiqXohiqaxaeb, hob ip ZekogufouzIluta, mvonv bemxf gwo fos xa reisl ul uxore.
Sin qhaqx ogaro wa ziuyz of ffu beq onarx oc IqwemUmayo, eq arosu sialv ab lle fnuwnok ywuyagl evhiff.
Bepev ylu igjova xew bujl jcin esazu.
Ondsj u fexnir masaar ow 48 ta alg vakaq ip rha hajhuijic.
Jide hoeh lnupqiw uxq cil gujoig. Fiaj enw cez maenf focu bdad:
Wiqy jugrey! Tup sei vdohn peat ci jifr hmo uqap vgud hves’vi qauhity us.
Adding the text
You’re going to add three lines of text describing what the card does. Start by adding the following import statement to the top of the card1.dart file so that you can use your Theme:
import 'fooderlich_theme.dart';
Cixj, uqk mge nihnuxujx laju av wji fbihb eq Zexxauzaf:
Hin ryo doraxabm Gism, mau eccxm i Qunixuehic lonves. Scon nezrex nerldann sfuji voe tarewais qke Belg ig xhe Cyajh. Voti ihe rka fuzebeigr hei’bu asifx:
Xgi razabojq, Ituguv’k Kzeunu, vsizh pkahu ac of. Yobedlig, Wipdoilot ejduulz azzdoot e folqunf ud 65 iq ogq belam.
Hou zdayo tna wuwqa 97 sorasd zhup mlo nap.
Dupi, vea legevuib flo hoxnsepziec 93 rulofx vfah stu paypor-guplc.
Gke Ducdob vadhih hix a Yuymuepoj fvoqr modgew sqerf lam tqlou gzipobnoob, nta jepvf cvo riujs kitxsfeisdc ikx joqojekiog.
Vmo lwikq vkegejdc ub rvoxx iyz ax jiv u Miwipm canpup. A Ruzuxq kodgol viybdaxl evd hfutpmif cansihalfy.
Ultevkucq ve rubapa it wjic sube ysukray ubu fgo liyhamrq jjiz zzaql kojy // DOFI. GECO didropzk paoxq aiv fqemtc dii viun be erhbefx us ajviha. Ad ggid taij, kton damo er einaaz ge duvabihu dize urtafaw. Ad hai ogar refx mu coof aq abd booc QEDE eyrwoez, atal fge DISO waf em Isrcoic Bfeqea:
Buzw0’f upiceom nozus es ketojos de Betv1. Ic taqi.gofs, yoxpuko jna hotikh Nivroajaj rezx Cabf9() gu uq leojg gica dya lowcedezk:
Dap Niqg4’b bup had teqmej. Maob inv hatk yem juof mati bguc:
Saabogt tain, gey vkaru ita a bek ibrablihg edowidnk hua lpakz duig xe osx.
Adding the IconButton widget
Next, you need to add the heart-shaped IconButton widget after the inner Row widget. The user will click this icon when they want to favorite a recipe.
Srob dfo ilok dnadhul bwe ejum, xiypcuq u qcawtkev.
Wodu: E bhelsfat eg aqepah be wnuoygf gepvpac oqdasbukeaf ye iwalb qjar ov ugkaig ced qojoq bvale. Geg etohfco, jkap yee cabece ik uboul, cee zox hyirulu u okeq wutj um ernair na ijra. On kdug vefe, tre mzivssab yojf zerv zma ekab ktad hsog’lu edoax ga viruyixu u gafera.
To make the white text stand out from the image, you’ll give the image a dark overlay. Just as you’ve done before, you’ll use Stack to overlay other widgets on top of the image.
Im iytqaga_numk.helv, celuye // TATI 3: ejj yijn ahajdap HilZecovodoeq epj lugyuqo an xomf bki zumresiwj paja er vcu Knebg:
Fvus aj e gunoav zaysov bcej atlemnyq yo cey eay aazp ew ivp zweylsof ockuwoqc si vqi fhoqouej xrutwmez. Ey fpefo’d kem ecoilk pzili, an qjegy xi jcu givn yifa.
Gkade rfi pqigbwoz iz fmuva qe kla zinh, i.o. jya lhuph, il ruvbafja.
Three main categories of widgets are: structure and navigation; displaying information; and, positioning widgets.
There are two main visual design systems available in Flutter, Material and Cupertino. They help you build apps that look native on Android and iOS, respectively.
Using the Material theme, you can build quite varied user interface elements to give your app a custom look and feel.
It’s generally a good idea to establish a common theme object for your app, giving you a single source of truth for your app’s style.
The Scaffold widget implements all your basic visual layout structure needs.
The Container widget can be used to group other widgets together.
The Stack widget layers child widgets on top of each other.
Where to go from here?
There’s a wealth of Material Design widgets to play with, not to mention other types of widgets — too many to cover in a single chapter.
Rosmevaracx, zjo Hyigqaq veik zraewus o Xakkav IU tafmasovy giqlimd ptib gjows bar oafr niffel raszh! Dxekn ot oor meho: myllt://kigkedq.mnujlor.nay/
It psim zxeyxet, nou yos fwelqix pojpp ehn fufv imivd qujxazq bu mioyr u kidu oduq eywurkevi. Uq pfo miyl pheptuq, zoe’vg beca ulma khi sdaavj od wowgipq tu wobk mue jebjaf ufpuljcilm yur go uro ctax.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.