Flutter SK/CZ – #1.6 – SliverList

Úvod

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í.

Cieľ

Vytvoriť SliverList widget pre Portfolio obrazovku obsahujúci zoznam tutoriálov tvorený obrázkom a nadpisom
Naučíme sa ako pracovať so slivermi – SliverList a SliverFixedExtentList
Vysvetlíme si význam sliver delegátov
Pridáme novú triedu Tuple
Naučíme sa ako pracovať s Card widgetom a vybudovať pekné grafické rozhranie

Postup

Najskôr otvoríme našu existujúcu aplikáciu z predchádzajúceho tutoriálu a otvoríme pubspec.yaml súbor.

Tuple

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.

Copy to Clipboard

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.

Copy to Clipboard

static const List<Tuple2> tutorials = [
    const Tuple2<String, String>(
      'http://himdeve.com/wp-content/uploads/2020/01/1_1_simple_webview_en_banner.jpg',
      'Flutter Tutorials – #1.1 – First App – Simple WebView',
    ),
    const Tuple2<String, String>(
      'https://himdeve.com/wp-content/uploads/2020/01/1_2_webview_controller_en_banner.jpg',
      'Flutter Tutorials – #1.2 – WebView Controller – Completer, Future Builder, Await – Async',
    ),
    const Tuple2<String, String>(
      'https://himdeve.com/wp-content/uploads/2020/01/1_3_webview_javascript_en_banner.jpg',
      'Flutter Tutorial – #1.3 – WebView – Navigation Controls, Javascript communication',
    ),
    const Tuple2<String, String>(
      'https://himdeve.com/wp-content/uploads/2020/01/1_4_drawer_en_banner_final.jpg',
      'Flutter Tutorials – #1.4 – DRAWER – PageRoute, Navigator, UserAccountsDrawerHeader',
    ),
    const Tuple2<String, String>(
      'https://himdeve.com/wp-content/uploads/2020/02/1_5_sliverappbar_banner_en.jpg',
      'Flutter Tutorials – #1.5 – Sliver App Bar = Collapsing Toolbar',
    ),
    const Tuple2<String, String>(
      'https://himdeve.com/wp-content/uploads/2020/02/1_6_sliverlist_banner_en.jpg',
      'Flutter Tutorials – #1.6 – SliverList',
    ),
];

SliverList

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.

SliverList delegate

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

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.

Copy to Clipboard

Card

Aby naša položka vyzerala graficky pekne, tak v metóde _buildListItem vrátime widget Card, čím vytvoríme material dizajnovú kartu.

Copy to Clipboard

Widget Card má atribút margin, kde nastavíme margin na 5 pre všetky strany.

Copy to Clipboard

A následne nastavíme atribút child, do ktorého vložíme Row widget.

Row – mainAxisAlignment a crossAxisAlignment

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.

Image

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.

Copy to Clipboard

Ď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.

Expanded

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.

Copy to Clipboard

SliverFixedExtentList

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.

Záver

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.