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ľ
- Vytvoriť Drawer pre našu aplikáciu
- Použiť UserAccountsDrawerHeader a ListTile pre Drawer
- Naučiť sa pracovať s GestureDetector, CircleAvatar, AlertDialog widgetmi
- 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.
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.
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.
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.
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.
accountEmail
Takisto zadefinujeme ďalší atribút accountEmail na hodnotu ‘[email protected]’.
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.
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.
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:
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.
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.
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’.
Atribút leading, ktorý reprezentuje úvodnú ikonu a nastavíme mu hodnotu na ikonku reprezentujúcu portfólio.
Ďalej atribút trailing, ktorý reprezentuje koncovú ikonu a nastavíme mu hodnotu na šípku doprava.
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:
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.
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.
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.
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.