7.1 Theme farby

V aplikáciách sa často opakujú niektoré prvky. Jedným z opakovaných prvkov je typografia, o ktorej sme sa už raz rozprávali. Ďalšou okapovanou zložkou sú napríklad farby. Pre tie je tiež vhodné definovať zdieľanú paletu. Často má totiž rovnakú farbu primárne tlačidlo a text v textovom tlačidle, či horný bar.

Flutter všeobecne podlieha Material Design o ktorom si vieš niečo načítať na oficiálnych stránkach. V prípade farieb definuje Material Design niekoľko základných rolí farieb, s ktorými sa spájajú doplnkové farby. Ak si pozrieme napríklad Primary rolu, tak s ňou sa spájajú tieto farby:

Primary - primárna farba - napríklad farba hlavného tlačidla
On Primary - farba textu alebo ikon, ktorá sa vykresľujú na primárnej farbe
Primary Container - farba väčšieho primárneho prvku - obvykle podklad pod dôležitou časťou aplikácie
On Primary Container - farba textu alebo ikony na Primary Containteri
Surface a On Surface - farby spojené s pozadím aplikácie
Error a On Error - farby spojené s chybovými hláseniami
a ďalšie

FlutterFlow týchto farieb definuje menej, aby nám uľahčil výber.

Definovanie zdieľaných farieb

Nejaké farby sú prednastavené hneď ako vytvoríš nový projekt, aby si ho náhodou nemal celý v bielej, alebo čiernej farbe. Tieto farby je ale vhodné nastaviť podľa vlastných potrieb:

V bočnom menu otvor záložku Theme Settings
V sekcii Colors definuj farby podľa potreby

Určite vyskúšaj záložky:

Explore Project Colors - pre priamy náhľad farieb v projekte
Import from Coolors - pre import farieb z pekného nástroja na generovanie farieb - Coolors

Aplikovanie definovaných farieb

Zvoľ Text widget, ktorému chceš nastaviť farbu (platí aj pre iné widgety s farbou)
V Properties Paneli pod Text Color klikni priamo na color picker
V sekcii Theme Colors vyber farbu z témy