Flutter SK/CZ – #1.4 – DRAWER – PageRoute, Navigator, UserAccountsDrawerHeader

Ú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. Vytvoriť Drawer pre našu aplikáciu
  2. Použiť UserAccountsDrawerHeader a ListTile pre Drawer
  3. Naučiť sa pracovať s GestureDetector, CircleAvatar, AlertDialog widgetmi
  4. Naučiť sa základnú navigáciu medzi obrazovkami v aplikácii – Page routing

Postup

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

V build metóde, v Scaffold widgete zadefinujeme ďalší atribút drawer a nastavíme jeho hodnotu na nový widget – ShopDrawer.

Copy to Clipboard

Tento widget musíme najskôr vytvoriť. Takže do priečinka components pridáme nový súbor shop_drawer.dart. A vytvoríme v nom triedu ShopDrawer, ktorá bude dediť od Stateless Widgetu.

Copy to Clipboard

Drawer

V build metóde tohto widgetu vrátime Flutter Drawer widget. Drawer môže byť ľubovoľný widget, ale často je najlepšie použiť widget Drawer z Material knižnice, ktorá dodržiava špecifikáciu Material Design.

Drawer widget zaobalíme do Theme widgetu, ktorým môžeme meniť štýl pre celý drawer. Konkrétne zmeníme canvasColor, čiže farbu pozadia draweru, na modrú. Namiesto toho, aby sme vytvorili tému nanovo, má často zmysel rozšíriť rodičovskú tému. A to je možné spraviť pomocou metódy copyWith().

 V Drawer hiearchii widgetov pridáme do child atribútu ListView widget. Mohli by sme pridať aj iný spôsob usporiadania ďalších item widgetov do Draweru, avšak ListView je užitočný, pretože umožňuje používateľom skrolovať v Draweri, ak obsah zaberá viac miesta, ako podporuje obrazovka.

Do ListView widgetu pridáme Drawer header a ListTile widget.

A nastavíme padding Draweru na nula, aby sme odstránili akékoľvek medzery z Draweru.

Copy to Clipboard

Drawer Header

Na vytvorenie Drawer headera zadefinujeme privátnu metódu _buildDrawerHeader, kde ako parameter nastavíme BuildContext. Táto metóda vracia UserAccountsDrawerHeader widget.

Copy to Clipboard

UserAccountsDrawerHeader

Zadefinujeme niekoľko atribútov pre UserAccountsDrawerHeader widget.

accountName

Prvým atribútom bude accountName, kde zadefinujeme názov nášho eshop: ‘Himdeve Fashion’. Zabalíme ho Text widgetu a nastavíme mu čiernu farbu pozadia textu.

Copy to Clipboard

accountEmail 

Takisto zadefinujeme ďalší atribút accountEmail na hodnotu ‘info@himdeve.eu’.

Copy to Clipboard

currentAccountPicture

Ďalším atribútom bude currentAccountPicture, ktorý reprezentuje buď fotku používateľa alebo v našom prípade logo eshopu.  Na zavolanie tejto callback metódy vrátime GestureDetector.

Copy to Clipboard

Gesture Detector

Gesture detector je widget, ktorý detekuje gestá. V našom prípade nás bude zaujímať gesto ťuknutia na logo nášho eshopu. Na to slúži atribút Gesture Detectora onTap, a na zavolanie tejto callback metódy zobrazíme dialóg so základným info pre tento eshop. Na zobrazenie dialógu použijeme Flutter metódu showDialog(), ktorému zadefinujeme 2 atribúty: BuildContext a child. A do child atribútu nastavíme Flutter widget AlertDialog.

Copy to Clipboard

AlertDialog

Pre AlertDialog nastavíme atribúty title, kde pridáme Text widget s názvom nášho eshopu – ‘Himdeve Fashion’. Ďalej atribút content, kde pridáme základné info o eshope. A nakoniec zadefinujeme atribút actions, kde pridáme FlatButton widget. Na stlačenie tohto tlačítka sa zavolá metóda:

Copy to Clipboard

Keď používateľ otvorí dialóg, tak Flutter pridá tento dialóg do navigačného stacku. A preto, keď ho chceme zavrieť, tak zavoláme metódu Navigator pop(), ktorou vyskočíme z poslednej cesty v navigatore.

CircleAvatar

Druhým atribútom Gesture Detectora je atribút child, ktorý reprezentuje hierarchiu ďalšich widgetov. V našom prípade sem zadefinujeme CircleAvatar widget, ktorý vytvorí kruh okolo nášho loga.

Nastavíme mu atribút backgroundColor na čiernu farbu a atribút backgroundImage, do ktorého vložíme NetworkImage widget, ktorý zobrazí obrázok nášho loga z internetu.

Copy to Clipboard

UserAccountsDrawerHeader – decoration

Posledný atribút, ktorý zadefinujeme pre UserAccountsDrawerHeader bude decoration atribút, ktorý bude reprezentovať pozadie hlavičky drawera. Vložíme do neho BoxDecoration widget, ktorý má atribút image a pre tento atribút vytvoríme DecorationImage widget, ktorý má tiež atribút image. Do tohto atribútu vložíme NetworkImage widget s url obrázkom pre náš header. Aby sme upravili rozloženie obrázku pre celú plochu headeru, zadefinujeme atribút fit na hodnotu: BoxFit.cover.

Copy to Clipboard

ListTile

Aby sme pridali ďalšie položky v draweri, pod drawer hlavičkou, zadefinujeme metódu _buildPortfolioItem s parametrom BuildContextu, ktorá vráti ListTile widget.

ListTile je jeden riadok s pevnou výškou, ktorý zvyčajne obsahuje nejaký text, ako aj úvodnú alebo koncovú ikonu.

V našom prípade bude mať teda atribúty title, kde nastavíme názov na ‘Portfolio’.

Copy to Clipboard

Atribút leading, ktorý reprezentuje úvodnú ikonu a nastavíme mu hodnotu na ikonku reprezentujúcu portfólio.

Copy to Clipboard

Ďalej atribút trailing, ktorý reprezentuje koncovú ikonu a nastavíme mu hodnotu na šípku doprava.

Copy to Clipboard

Posledný atribút, ktorý zadefinujeme bude atribút onTap. Je to callback metóda, ktorá sa zavolá na kliknutie položky Portfolio.

Najskôr zavoláme príkaz:

Copy to Clipboard

Tento príkaz funguje rovnako ako pri dialógu, čiže vyskočíme z poslednej cesty v navigatore, v našom prípade z drawer widgetu.

Basic navigation – Page Route

A nasledne zavoláme príkaz na prepnutie obrazovky na inú, v našom prípade na Portfolio.

Zavoláme znovu Navigator s BuildContextom a tentokrát použijeme jeho metódu push, ktorá má ako parameter Route. Tento parameter reprezentuje novú obrazovku našej aplikácie, v našom prípade teda widget PortfolioPage. Navigator pridá tento widget do navigačného stacku pomocou metódy push.

Čo je ešte dôležité si uvedomiť je, že zavolanie navigator pop príkazu musí byť pred prepnutim obrazovky na iný widget metódou navigatora push. Pretože ináč dostaneme chybu (exception), z dôvodu toho, že už sme v contexte iného widgetu.

Copy to Clipboard

Divider

Poslednú metódu, ktorú vytvoríme v Listview pre Drawer bude _buildDivider(). Táto metóda vracia widget Divider, čo je tenká horizontálna čiara s paddingom na stranách. Odelíme ňou Portfolio položku. Nastavíme jej farbu na bielu.

Copy to Clipboard

PortfolioPage

Pod priečinkom pages vytvoríme nový súbor portfolio_page.dart, kde zadefinujeme triedu PortoflioPage, ktorá bude zatiaľ dediť od Stateless Widgetu. V build metóde tejto triedy vrátime Scaffold widget, ktorému zadefinujeme appbar widget, aby sme sa mohli navigovať naspať v Navigator stacku pomocou šípky späť v hornom bare. Nadpis appbaru nastavíme na hodnotu ‘Portfolio’. Aby sme na tejto stránke  niečo videli, tak vytvoríme Text widget s textom ‘Portofolio’ v strede obrazovky, pomocou widgetu Center.

Copy to Clipboard

Záver

A tým je naša štvrtá časť tejto prvej série Flutter SK/CZ Tutoriálov ukončená a kompletný zdrojový kód môžete samozrejme nájsť na githube.