Flutter SK/CZ – #1.8 – TabBar

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ľ

  1. V Portfolio obrazovke vytvoríme 2 taby na prepínanie medzi dvomi podstránkami portfólia – Portfolio Tutoriály a Portfolio Galéria
  2. Využijeme komponenty ako je TabBar a TabBarView v kombinácii so Slivermi
  3. 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.

Copy to Clipboard

V dispose metóde _PortfolioPageState triedy zavoláme dispose metódu TabControlleru aby práve uvoľnil AnimationController, ktorý vytvoril.

Copy to Clipboard

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

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

Zo SliverPersistentHeaderDelegate triedy sme zdedili metódy maxExtent a minExtent, kde vrátime výšku nášho tabBaru pomocou príkazu tabBar.preferredSize.height.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Copy to Clipboard

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.

Our Himdeve developoment's website uses cookies.