Flutter SK/CZ – #1.5 – Sliver App Bar = Collapsing Toolbar
Ú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ť Sliver App Bar pre widget Portfolio
- Naučíme sa ako pracovať s widgetmi SliverAppBar, FlexibleSpaceBar a SliverFillRemaining
Postup
Najskôr otvoríme našu existujúcu aplikáciu z predchádzajúceho tutoriálu a otvoríme súbor portfolio_page.dart.
V build metóde, konkrétne v Scaffold widgete, pre atribút body vytiahneme center widget do novej privátnej metódy _buildContent(). A následne nateraz vymažeme volanie tejto metódy z atribútu body.
A namiesto toho do atribútu body vložíme nový Flutter widget a to CustomScrollView widget. Tento widget má niekoľko atribútov, avšak my sa v tomto tutoriále zameriame len na atribút slivers. Čo je vlastne list widgetov. Zvyčajne sa vo Flutteri pre tento atribút používa pomenovanie children, avšak tu sa zvýrazňuje informácia o tom, že CustomScrollView je prispôsobený na prácu so Slivermi.
Sliver
Čo to vlastne Sliver je?
Sliver je v podstate len časť skrolovateľnej plochy, kde sa dajú prispôsobiť vlastné efekty skrolovania.
Následne do tohto atribút slivers, ktorý vytvára list widgetov, pridáme SliverAppBar widget.
Sliver App Bar
SliverAppBar je app bar z Material dizajn knižnice, ktorý je prepojený s CustomScrollView widgetom.
Má niekoľko atribútov a v tomto tutoriále si prejdeme cez niektoré z nich.
iconTheme
Začneme atribútom iconTheme, ktorým definujeme štýl pre ikony v sliver app bare. V našom prípade len zmeníme farbu z bielej na čiernu.
backgroundColor
Atribútu backgroundColor nastavíme hodnotu na červenú.
pinned
Ďalej pinned atribútom zabezpečíme to aby horný bar zostal viditeľný aj počas skrolovania.
expandedheight
Tento atribút reprezentuje výšku appbaru, keď je plne rozšírený (expandovaný). Nastavíme mu hodnotu na 200, čo je štandardná výška.
flexibleSpace
Tento atribút reprezentuje widget, ktorý bude v pozadí celého app baru. Bude mať rovnakú výšku ako výška celého appbaru. Vložíme sem FlexibleSpaceBar widget, ktorý vytvorí tento flexibilný widget.
FlexibleSpaceBar
Tento widget má atribút background, do ktorého vložíme Image.network widget s url adresou obrázku a atribútom fit, ktorý nastavíme na BoxFit.cover aby sme zaplnili celú plochu vykreslenia.
Ďalej nastavíme atribút title. Atribút title by sme mohli nastaviť aj priamo SliverAppBaru, avšak v tom prípade by dynamicky nerástol s tým ako sa zvačšuje horný bar, ale zostal by statický len v hornej časti obrazovky. Nastavíme ho na hodnotu ‘Portfolio’.
SliverFillRemaining
Tým pádom máme vyriešený horný bar obrazovky a zostáva nám otázka, kde zadefinovať zvyšný obsah stránky. Je niekoľko spôsobov, avšak v tomto tutoriále sa zameriame na ten najjednoduchší a tým je použitie SliverFillRemaining widgetu.
SliverFillRemaining je Sliver, ktorý obsahuje len jedného potomka (single box child), ktorý vyplní zvyšný priestor vo viewporte. SliverFillRemaining widget nastaví veľkosť svojho potomka tak, aby sa vyplnil viewport v celej svojej priečnej osi.
A na pridanie tohto potomku slúži atribút child. V našom prípade do neho vložíme našu existujúcu metódu _buildContent().
Záver
A tým je naša piata časť tejto prvej série Flutter SK/CZ Tutoriálov ukončená a kompletný zdrojový kód môžete samozrejme nájsť na githube.