Vitajte na stránke Himdeve development, kde pre Vás pripravujeme tie najlepšie tutoriály, ktoré Vám uľahčia a zefektívnia vývoj mobilných aplikácií.
Najskôr otvoríme našu existujúcu aplikáciu z predchádzajúceho tutoriálu a otvoríme pubspec.yaml súbor.
Aby sme mohli zadefinovať list konštánt s hodnotami reprezentujúcimi url k obrázku tutoriálu a jeho nadpis. Využijeme na to triedu Tuple, ktorá slúži na jednoduchú manipuláciu s dvoma alebo viacerými objektami. Avšak najskôr ju musíme pridať do nášho pubspec.yaml súboru.
Následne otvoríme súbor portfolio_page.dart. A v triede PortfolioPage zadefinujeme spomínaný list konštánt pomocou triedy Tuple2, ktorá prenáša práve 2 objekty. Vytvoríme na to konštantu tutorials a zadefinujeme sem 6 našich tutoriálov. Konkrétne url adresu obrázku reprezentujúcu tutoriál a nadpis tutoriálu.
V build metóde, konkrétne v Scaffold widgete, pre atribút body je zadefinovaný widget CustomScrollView. Tento widget má zadefinovaný atribút slivers, ktorý je momentálne vyplnený dvoma widgetmi – SliverAppBarom a SliverFillRemaining widgetom.
V tomto tutoriále vymeníme SliverFillRemaining widget za SliverList widget.
Vymažeme teda SliverFillRemaining widget a takisto metódu _buildContent().
A namiesto SliverFillRemaining widgetu v tomto liste sliverov pridáme SliverList widget.
Prečo vôbec používame SliverList widget namiesto klasického ListView widgetu?
Keď chceme skrolovať len listom objektov, tak ListView je ideálny komponent. Avšak ak chceme vytvoriť komplexnejšie skrolovacie efekty, ako v našom prípade mať collapsing toolbar (SliverAppBar) a pod ním skrolovať v liste objektov, tak použijeme SliverList widget.
Keďže slivery môžu vytvárať každú položku lazy načítavaním tým ako skrolujeme, čo je samozrejme veľmi efektívne, tak potrebujú definovať delegate atribút, ktorý priamo poskytuje položky z nami definovaného listu, na vykreslenie do určitého view počas skrolovania.
Zadefinujeme preto pre widget SliverList povinný atribút delegate a vložíme do neho SliverChildBuilderDelegate. Môžeme do neho vložiť aj iné objekty ako napríklad SliverChildListDelegate, kde by sme iba explicitne zadefinovali list widget-potomkov. Avšak SliverChildBuilderDelegate umožňuje vytvoriť tento list widget-potomkov na požiadavku, čiže lazily a zefektívniť tak celý proces.
SliverChildBuilderDelegate má argumenty BuildContext a index, reprezentujúci index položky počas skrolovania. Touto callback metódou vrátime teda widget-potomkov do sliver listu. V našom prípade na tento účel vytvoríme privátnu metódu _buildListItem, ktorou vrátime konkrétnu položku z našho listu tutoriálov.
SliverChildBuilderDelegate má atribút childCount, kde zadefinujem presný počet položiek.
Aby naša položka vyzerala graficky pekne, tak v metóde _buildListItem vrátime widget Card, čím vytvoríme material dizajnovú kartu.
Widget Card má atribút margin, kde nastavíme margin na 5 pre všetky strany.
A následne nastavíme atribút child, do ktorého vložíme Row widget.
Row a Column widgety majú atribúty mainAxisAlignment a crossAxisAlignment, ktorými vieme kontrolovať zarovnanie widget-potomkov Row alebo Column widgetu.
V prípade riadku (Row widgetu) prebieha hlavná os horizontálne a priečna os vertikálne. V prípade stĺpca (Column widgetu) prebieha hlavná os vertikálne a priečna os horizontálne.
zdroj: https://flutter.dev/docs/development/ui/layout
Zadefinujeme teda pre Row widget atribút crossAxisAlignment a nastavíme ho na hodnotu CrossAxisAlignment.start aby jeho widget-potomkovia boli zarovnaný nahor.
Ďalším atribútom pre widget Row je atribút children, ktorý predstavuje list widgetov v tejto hierarchii widgetov.
Zadefinujeme sem widget Image, do ktorého vložíme NetworkImage provider s url adresou obrázku pre tutoriál. Túto url adresu získame pomocou Tuple premennej item1, ktorá reprezentuje prvú položku v tomto objekte.
V našom prípade je tento obrázok moc veľký, tak mu nastavíme scale atribút na 12.
Ďalšou položkou v Row widgete bude nadpis tutoriálu, ktorý vložíme do widgetu Text a nastavíme mu font na 20 a hrubý štýl písma. Zaobalíme ho Padding widgetom a nastavíme želateľný padding.
A nakoniec ho ešte zabalíme do Expanded widgetu. Pretože v našom prípade je text moc dlhý a nezmestí sa na obrazovku zariadenia. A to spôsobí zobrazenie žlto-čierneho pruhovaného pásu pozdĺž postihnutej oblasti. Čiže v našom prípade na pravej strane. A preto sa widgety dajú prispôsobiť tak aby sa zmestili do riadku (Row) alebo stĺpca (Column) pomocou widgetu Expanded.
V prípade, že chceme nastaviť rovnakú výšku každej widget položky, tak namiesto SliverList widgetu môžeme použiť SliverFixedExtentList widget a zadefinovať mu výšku pomocou atribútu itemExtent.
A tým je naša šiesta časť tejto prvej série Flutter SK/CZ Tutoriálov ukončená a kompletný zdrojový kód môžete samozrejme nájsť na githube.
Our Himdeve developoment's website uses cookies.