Flutter SK/CZ – #1.8 – TabBar
Ú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ľ
- V Portfolio obrazovke vytvoríme 2 taby na prepínanie medzi dvomi podstránkami portfólia – Portfolio Tutoriály a Portfolio Galéria
- Využijeme komponenty ako je TabBar a TabBarView v kombinácii so Slivermi
- Na záver si ukážeme možnosť ako použiť TabBar namiesto kombinácie BottomNavigationBaru s pageView komponentom.
Postup
Najskôr otvoríme našu existujúcu aplikáciu z predchádzajúceho tutoriálu a otvoríme portfolio_page.dart súbor. Toto bude náš vstupný súbor pre tento tutoriál.
Mixin
Najskôr si vysvetlíme pojem Mixin.
Mixiny umožňujú pridať skupinu „funkcií“ do triedy bez použitia hierarchie rodič – dieťa, čo nám umožňuje mať v rovnakej triede jedného rodiča a viac Mixin komponentov. V našom prípade máme triedu _PortfolioPageState, ktorá dedí od State triedy. A teraz keby sme chceli aby zdedila ďalšie vymoženosti od inej triedy, bez toho aby bola tá trieda predkom našej triedy, tak môžeme použiť Mixin. V jednoduchosti povedané, len využijeme funkcie ďalšej špeciálnej triedy bez toho aby sme od nej priamo dedili.
Keď dedíme od inej triedy používame príkaz extends. Pri Mixinoch používame príkaz with.
V našom prípade použijeme SingleTickerProviderStateMixin pre triedu _PortfolioPageState.
TabController
Na to aby sme vedeli manipulovať s widgetmi TabBar a TabBarView potrebujeme TabController.
Konštruktor TabControlleru má 2 povinné argumenty. Prvý je length, čo predstavuje počet tabov. A druhý je vsync, čo predstavuje TickerProvider. To je práve dôvod prečo používame SingleTickerProviderStateMixin. Do vsync argumentu vložíme našu triedu pomocou objektu this, pretože poskytuje práve TickerProvider pomocou SingleTickerProviderStateMixinu.
TickerProvider
Ako meno naznačuje, TickerProvider poskytuje Ticker, čo v jednoduchosti znamená, že vracia callback do našej aplikácie o aktualizácií framov, čiže informáciu o prekreslení obrazovky, tak aby AnimationController mohol vygenerovať novú hodnotu a prekresliť animovaný widget. AnimationController je vytvorený pri vytvorení TabControllera a služí na animáciu medzi našimi tabmi.
Inicializáciu TabControllera spravíme v initState metóde _PortfolioPageState triedy.
V dispose metóde _PortfolioPageState triedy zavoláme dispose metódu TabControlleru aby práve uvoľnil AnimationController, ktorý vytvoril.
Ďalej zadefinujeme list _pages z predchádzajúceho tutoriálu, ktorý obsahuje názov tabu a podstránku, ktorá sa zobrazí po kliknutí na daný tab. Tentokrát sem však pridáme informáciu o type Ikonky a preto použijeme triedu Tuple3.
V build metóde nášho Stateful Widgetu vrátime Scaffold widget, kde do body atribútu vložíme NestedScrollView widget aby sme mohli použiť TabBar v kombinácií so Slivermi.
Do body atribútu NestedScrollView widgetu zadefinujeme TabBarView, ktorý má atribút controller, kde vložíme náš _tabController a atribút children, do ktorého vložíme list našich podstránok. Využijeme na to map funkciu z predchádzajúceho tutoriálu.
NestedScrollView má okrem atribút body, ďalší povinný atribút a to je headerSliverBuilder. Je to callback funkcia, ktorá vracia list widgetov.
Najskôr vrátime SliverAppBar widget pomocou našej triedy PortfolioSliverAppBar, ktorá má ako argument názov widgetu. Vložíme sem názov práve zobrazenej podstránky. Využijeme na to index TabControllera, ktorý vracia aktuálny index zobrazenej stránky a vytiahneme tak nadpis z nášho listu _pages.
Avšak na to aby sa build metóda znovu prekreslila, potrebujeme pri zmene podstránky zavolať setState metódu.
Pridáme preto v initState metóde _PortfolioPageState triedy listener pre náš TabController, ktorý bude počúvať na zmenu podstránky a na túto zmenu zavoláme metódu setState.
Vrátime sa do headerSliverBuilderu a za PortfolioSliverAppBar pridáme ďalší widget SliverPersistentHeader. Tento widget bude slúži na zadefinovanie TabBaru s našimi tabmi.
SliverPersistentHeader má povinný atribút delegate, do ktorého vytvoríme triedu SliverPersistentHeaderDelegateImpl.
V prezentačnej vrstve aplikácie vytvoríme nový priečinok delegates a v ňom súbor sliver_persistent_header_delegate_impl.dart.
V tom súbore vytvoríme teda triedu SliverPersistentHeaderDelegateImpl, ktorá bude dediť od triedy SliverPersistentHeaderDelegate. Zadefinujeme sem 2 premenné – tabBar a color. Color parameter nastavíme defaulutne na transparentnú farbu.
V build metóde tejto triedy vrátime Container widget, ktorému vieme nastavovať farbu pomocou atribútu color. A do atribútu child vložíme náš tabBar widget.
Zo SliverPersistentHeaderDelegate triedy sme zdedili metódy maxExtent a minExtent, kde vrátime výšku nášho tabBaru pomocou príkazu tabBar.preferredSize.height.
MaxExtent predstavuje veľkosť záhlavia, keď nie je zmršťené v hornej časti viewportu.
MinExtent predstavuje najmenšiu veľkosť, ktorú dokáže záhlavie dosiahnut pri zmrštovaní na začiatku viewportu.
Poslednou metódou v tejto triede je shouldRebuild. V našom prípade vrátime false, pretože nepotrebujeme prekreslovať záhlavie na zmenu delegete inštancie.
Vrátime sa naspäť do portfolio_page.dart súboru a importneme SliverPersistentHeaderDelegateImpl triedu vloženú do atribútu delegate SliverPersistentHeaderu.
Farbu ponecháme na transparentnú a nastavíme len tabBar atribút. Vložíme sem TabBar widget, ktorému nastavíme farbu textu a ikoniek na čiernu pomocou atribútu labelColor. A takisto nastavíme indikátor zobrazeného tabu na čiernu pomocou atribútu indicatorColor.
Do atribútu controller vložíme náš TabController.
A do atribútu tabs vložíme list tabov získaný pomocou map funkcie z nášho listu _pages.
BottomNavigationBar
Využiť efekty PageView a BottomNavigationBar widgetov je možné aj pomocou TabBaru.
Do Scaffold atribútu bottomNavigationBar môžeme pridať Container, ktorému nastavíme farbu napríklad na modrú pomocou atribútu color. A do Container atribútu child vložíme náš TabBar widget zo SliverPersistentHeaderu. Pre Tab widget vrátime konkrétnu ikonku z _pages listu.
Záver
A tým je naša ôsma časť tejto prvej série Flutter SK/CZ Tutoriálov ukončená a kompletný zdrojový kód môžete samozrejme nájsť na githube.