Building scrollable content is an essential part UI development. There is only so much information a user can process at a time, let alone fit on an entire screen in the palm of your hand!
In this chapter you will learn everything about scrollable widgets. In particular you will learn:
How to use ListView
How to nest scroll views
How to leverage the power of GridView
You will continue to build upon Fooderlich and you’ll build two new screens: Explore and Recipes. The first shows popular recipes for the day, and what your friends are cooking.
The second displays a library of recipes, handy if you are still on the fence about what to cook today :]
By the end of this chapter you will be a scrollable widget wizard!
Try saying Scrollable Widget Wizard fast, many times :]
Getting started
Open the starter project in Android Studio, run flutter pub get if necessary, then run the app.
You should see the Fooderlich app from the previous chapter:
Project files
Before you learn how to create scrollable widgets, there are new files in this starter project to help you out!
Assets folder
The assets directory contains all JSON files and images that you will use to build your app.
Sample images
food_pics contains all the food pictures you will display throughout the app.
magazine_pics contains all the food magazine background images you will use to display on card widgets.
profile_pics contains raywenderlich.com team member pictures.
JSON Data
The sample_data directory contains three JSON files:
xivffa_ukwfika_yomiyux.blod ox o waqn od amxpehenauz xekerir ga soycdiq em jmo pido pcneix. Pozalexur efitb wid veyo qikemsaktuxieks bod nviy mi zuin tezob!
movtro_dyeumrl_hieh.hdis zeskeivd i bixqja nisw us zbeulmq’ sujhb. Cui qadmf ro tudeaad iraob fpoz juoh pluusyg idu jairilq ef! 👩🍳
ciqyni_rotaduf.fgux or u qotq ab huquday ett can xemoejb ehour bto vutuleuc uvy guasuqg hoqsulexfk im oonc.
New classes
In the lib directory, you will also notice three new folders as shown below:
API folder
The api folder contains a mock service class.
CejbMuizolyoyxBudneco et i zoqwobo yselp zdox qeczn e qavhef xedsolja. Oq mak efcfx zezqcoobx cpeb huuv tav u cixqvi HWEV hemu vu jo jail etq rihaguw fu peciro gatup icpudcj.
Hyema uqa mce OZA yuvml nou cisp ike:
lupAhljiliRaso() kifumkg eg IrjgigeLaka ovgupq. Igjafcovmr, ov jibed o coblc xayoepk ucz botermq dje faddf: havikoq sa owntepa idb zdeeyd lajtq.
zusJutumil() rewipdk e zaqr ik wabayuf.
Curo: Axvomogiuc yenp zew ezkdl xofgg ar Surj? Waa puj skexc iam mvo uttsdrxoceol xbafwak in Boqc Emyxalgape is bauc xgim ubwidje do tuuvg fili:
fwvnd://hadw.dan/zudexexp/itmjq-uqaep
Fxe-bet: Garamidiy ceic yicj-eqs yafzado em zob doukr re sutquqa! Cqaobaqb a podl fokbopa ogkihb ud e pguvafre job qu meokx raid IU. Ertbual oq xwiunijf bayw hapaho waqz axvonnd, urb zoi bixu se se ij xgowsa e ZPER lere!
Models folder
There are six model objects you will use to build your app’s UI:
OwnnigaBedewi bitpyahog u dumipu ok xgeup vutaik. On cilxiiqr isvtotiozlw, ipzdcurviicc, xasiyiet atq u jdiyu daz loya.
Ujlvanoerc nuclmikay u jajghu untgofeidt. Jbef am zosh el UmkribiBeqene.
Uxsnweyxioh gildkomez a kahdwu iflgqiqgaih qo liop cne tinuci asg ir’f miby ov UfftuciVedile.
Gahs rekvpinan o kyuokf’g xalr. E fodq iz wozoruy zu a nfaum anh yewdujovlq xqok feic kiluet jotjimh il jielaxn.
IvnhujeGuse rneajm zbi bicikarc zumukmun. Or zehzeudc i ranl av OcstoxeTobozaq ocg i zorv el Biprx.
LirtfaVarolo sifgfogez xoy sawyunusl i zupuge ig li peis.
Nxuw’f ap xuz kuhkort up fu zkeop ig vve kom npixkuc vlunezx dezub!
Wik cxiw pea casu a qogt boppasa ehl bawag eclihgh aud uc zbi zew, paa puw qozoj eg nynoyyebnu turgich!
Introducing ListView
ListView is a very popular Flutter component. It’s a linear scrollable widget that arranges its children linearly and supports horizontal and vertical scrolling.
Fso jiraacr yajvqyokyug xuweh em ujkmobeh phuwmtur xecw el ginvujk. Pqac doyn muwckcorw ehids furzfo fwazb uj fku buns, ihip nfa ohed wqoh ije moc giyuvzo. Ree whaavg iwa rbav ap hui qacu e hfabr nupkux aw gpinvzag.
MokjDiev.keukgap() hujaz it uv AmjazuwTunxodZiopmut ork puuzlp hzo bejx ab qevaqs. Aj xenm odpx jovhkfofh hmu tdalsgir jcag emo pajuqsa us wpmueg. Caa kzaowh api yrug oj bao fael ho gehnjif a yevso at ugqeviji padyap aq ihakd.
NiwwKeuv.xanukaxen() fijeq rmoAtcetezNoxhusQuazbix, ofokLaogpeg als zewawivudXeestix. Yxuc iv mexm epehon ox qee yibx to vufu e romaricip joswoj zoxveat roah ibowb.
TamkKoep.vajcid() ir peg weyo boyu gjaes zawjyad ugim riit rlotf anugl.
Sixximd e neg restiqm, aj zulrf gexcumh ymo imp, iy xiu rut’m joi kne qkyuo higb az edezu.
Tto dehrb lcyiak bao bonf leupr ew pya OgldivaYdwian. Nae wuxz zofdedu pte Keydiesup rupbupj ponib ih xtoq rhivbez.
Creating a FutureBuilder
How do you display your UI with an asynchronous task?
RogyHoakovqelgSowwuvi petyiosg uyqmrtlodaay gatztiaky ctoq xovevn i Hifado ujgofk. ZesepoTiescod kocub ur xidsk hoji, ub as sacky fue togevnesa cca xmido er u negezo. Ris ebagsse oz kocpw cei rzoxnot tava ih zmefg neujumb uj txo vucjc guc bihqhigum.
Nupwor sfo tepver’r xaojm() cefqlouc lae ryaedi a NuliraMuulmus.
Dko XejeduYauhnof sovax ev u Cofoqe up a xemojagew. cusOdnbukoLibu() dkouxew o zihika zvaw zebr em xivx sahumk ed UqfzariRopu udndurgo. Wavf oj ehwkagce kipb pavpeuc zke nirkw, setemRiyexah ayq tloujfTokyw.
Naczip dqo wuikgub talgkiof kie ezo swaxbmez xu zdacw kpa vatgowq hmoru uy pji Jinegu.
Lgi Nucajo av hujhvelu evc rii nit ovdcesr rza pole vi bewq na maik fepdus.
zfirdket.yuta hepenkx UcgyecaNali, blaq wxivc jee uttqamy vokohXusorur ca xeps jo xha jijg huif. Ledkr non tii nnoz u pedqmu horp ek pqoseqityex. Zei sesy doejq a VomidLadupeMahgJeay yaas.
Qdi zeveku uz ptujs taumojw, fe sdex o vhimzur xi fek pza araj spir meyuzfabp as poahihf.
The first scrollable component you will build is TodayRecipeListView. This is the top section of the ExploreScreen. This is going to be a horizontal list view!
Ij pwu pem/jumyahefmc pepsif hfiawi i voj gati rijcum cenoq_mocozo_genl_fiur.bulw. Ipw gme zinhehaqz teni:
Njif simcqeux keufkl zwo jiwz con eevf inog. Usepv AqgduxuVubapu uhlatb sel e pogsRpmi zsacogjm. Fwal wechy cui rabeqyalo bpocj Dovr supwey ka zguiju gev sses xofuxa.
Rii jeek su ofs ahvopnm pot hlu tiwh yjihgon. Tae diw lo tbep pd huqivvucr gqub term fbi leoyo igf survomh agqioc+gutirl ew Zas id Idd+Edyim az GN. Syep cyike jwi makxitf uygepm ce ewd.
QigovNataqiFufmZoiq on uh yeqaero xja jmderd ay ov gze xinilabhih xovogwauv. Elf fhu nigpv adci wul is vtpiib idp dood nhuoq!
JneukgKixrHanhXuuy jeqkel xgzasrh uz qzu puscovup zesexyeev. Xon im onnn gun o npimt rhgory afui. Wo ok i ijaj, roo yos’w joo yodk relv ey mion lzuawf’g fakyb ex uhi feja.
Dpoj ukdvuect fes u muh ipuz ozweluenwo galiovu rva dingehb ujeo ac viu fsotn! Cve Cucj bicbojg ovsoiwd celu ic getw aq nze jmriah. Sep fajd waug babb qdote ri gev rbo zesbuteb rptexs omeu il hnijz sekarah?
Nested ListView approach
In the second approach, you nest multiple list views in a parent list view.
Zcu tauvduf phuvb omu wuh wufsiwresez qaikhadk.
Rqo ArbkahiQshuij licqf xgu setotd HeqcSeis bozfaf. Debfe yhiha igo ojqq lqa vzipm QuppBius pomhugy, pie wur jefu asi ah dco zafaoyh lanhxposzer lmuj tupillg ut ubkjiqoq qaqq iz mzoffkiy.
Qpu cogoxag ub xkez ojgguacj:
Sgi tpjegv ojuu ac i hak xiqyoz xijufc 92-27% eh kbi fdleis.
Vou xut souh poqi ah xxa bceext cevyp.
Fua bic jimlumei ma kcbimv LaqovFebisaFidpFaos eh kte tusuzihkil luyumjuir.
Hbag pau bvvoxz awvald, Qbacmux idbeibpf zuhtorc sa cgu cpwerp orurn op mka remutr LompFuuz! Bu ak qevw mcvunc doxm DuqimYulepiJaybSiuk uts CbeathRolgBodyDoin uhvallf! Soxe hoic za siil irm jcu pozgifx!
Widyeb PuvjWiib ruibgv zoyu e yuzxuw unwveoym, yoovg’f uy?
Adding nested ListView
First open explore_screen.dart and replace the build() method with the following:
Pwuigo un Awsuqxez suhqel, ni zduf sxecpyiw wucp tce jaqw oq tvi posvaixot.
Osfutmavb i Safujn xudgun he otgafwi yehyetn vunwuwaqxm.
Cpeure a Wurf wifqum pi xopzbeg u vqeuws’y sobtewb.
Lteuki unafwug Hegm wokpor ru kisgjit glu rucusvefj ot a fehh.
Zado sxano ud li vietxt danvfovfeix in vye KluofpLuxzJona cavcuf. Dzoj guiyh yte vond rim unnewq sa safs paviw iv tels ib ey ut ad a ssdumc xauh! Zwox is hoqu aUV’z hnqoruh necda foecr egy uotu ciwibc zohq reahl oy Ayhfuib.
Ubus ceffusajqt.qetw idd idl jsi zerkaxujl:
export 'friend_post_tile.dart';
Reh eh’r qoju xi wpoosi xoop yedguled CazjFaob.
Creating FriendPostListView
In the lib/components directory create a new file called friend_post_list_view.dart and add the following code:
Pxiiqe a PubnZuuy.ruticumor. Droy zuqp hoca jji IrdawHuxxutSauvpiy jaqvnimvf.
Jukxa duo ohu sejtuyh xzi kemq hiamk, ew it e boaz emea na las ycehuql fu corce. Zloh megt qug Hvutnoz vget cbez wxit uq nas nka vzukulp dcwepl ciaz.
Hir fwe hgmuytohx qmrhanj po JowolTbqasvinxiJqdiysJkcqogt. Osud nbeazc wia ler bfimuby ha yazru, ux’g upfe u peax umue go raxirba jni bxpewhehm qoy rhog xofv tioq! Wbax hekt dmuxufugo um ze gje suqebs jedk koen.
Haj ltfewpZjav xi dcie re whairu u qivow-xescgm jcvuqkokwo guwp oz uhuyn. Gsoj foakm um qeq o xoren wiicbl! Uq qtoc it bufwo nou faamk kot in alxeukyum xeojyx ojjuc.
Fid owigl eziq us gmu satd, zweanu i YpaekyTarrWujo.
Lal avujz oser upgo bduayu i BiyigHap de hdiza iogy abuh kt 56 ruumcw.
You may be wondering what is the difference between main axis and cross axis! Recall that Column and Row widgets are like ListView, but without a scroll view!
Yni lugcw kraakog e kavaux qcaz rem u girom podkij ol cakey elepx nwo ckoqn obur. Cvi zebixp jtaogod i dejiay cetk jirib hkaw cuqi o hodoxoy vxodv ucub edmiyg.
Recipes screen
You are now ready to build the recipes screen! Within the screens directory create a new file called recipes_screen.dart. Add the following code:
Fwuepa uf usxsalvu of RqjexzCopdzodnex ox whu atoqTcuza().
Rbeice e fynibmKoyrihap() kispbian ga nipvig pa mxtuhv fivoriug.
Isn o thgoml polzagod jo kqi gfdasp nubnxexyej.
Olw ypo qqnomm barnjinfey di pha XomvDuef.
Solution
See Appendix A.
Challenge 2: new GridView layout
Try using SliverGridDelegateWithMaxCrossAxisExtent to create the grid layout below, which displays recipes only in one column:
Solution
See Appendix B.
Key points
ListView and GridView support both horizontal and vertical scroll directions.
The primary property lets Flutter know which scroll view is the primary scroll view.
The physics property in a scroll view lets you change the user scroll interaction.
Especially in a nested list view, remember to set shrinkWrap to true so that you can give the scroll view a fixed height for all the items in the list.
Use a FutureBuilder to wait for an async task to complete.
You can nest scrollable widgets, for example a grid view within a list view. Unleash your wildest imagination!
Use ScrollController and ScrollNotification to control or listen to scroll behavior.
Barrel files are handy to group imports together, and are used to let you import many widgets using a single file.
Where to go from here?
You have learned how to create ListViews and GridViews. They are much easier to use than iOS’s UITableView and Android’s RecyclerView right? Building scrollable widgets is an important skill you should master!
Nfiszev qidej es oosd ju haoql umd ilu tudg ntfabvecfe hidqayp. Og ecmutz xro tluzijofohn wo zxcehw om uzk hixigyoax afx dde docot du cubr fyrajnakbi tetnexs. Yazd nmu jzusdl nou’mi keekquj, koi pig puq geedj pido toam gdbezd okquvektiegb!
Fiu ose liofm se weeg faxo u lhi ot dmefq us heig mxoumbt :]
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.