ThemeData per la condivisione degli stili tramite temi

La creazione di una UI personalizzata mediante la definizione di stili e temi rende un’applicazione molto più professionale agli occhi di un utente.

Parliamo infatti di Material Theming, ossia della capacità di personalizzare sistematicamente i diversi componenti del Material Design (AppBar, Card, Dialog, …) per riflettere meglio il marchio del prodotto e dare un senso di uniformità tra le diverse schermate dell’applicazione. Infatti, quando modifichiamo determinati aspetti dell'interfaccia utente, come colore e tipografia, e definiamo valori specifici per tutte le proprietà e gli attributi personalizzabili, stiamo creando a tutti gli effetti un vero e proprio tema da poter utilizzare all’interno nostro prodotto per rappresentarlo al meglio.

In particolare, il Material Theming prevede tre azioni principali che sono:

• creazione e personalizzazione del tema;
• applicazione del tema ai mockup;
• utilizzo del tema nel proprio codice.

Una semplice applicazione di Material Theming la possiamo già trovare all’interno del Material Design (e pertanto nei suoi componenti). Esso, infatti, offre già un tema predefinito pronto all’utilizzo per creare un primo prototipo da ridefinire successivamente.

Flutter, come tutti i framework per lo sviluppo di applicazioni mobili, implementa appieno le linee guida del Material Design ed offre allo sviluppatore la possibilità di personalizzare completamente la UI della propria applicazione attraverso l’utilizzo di temi e stili. In particolare, in Flutter possiamo utilizzare i widget Theme e ThemeData per definire un tema personalizzato da associare alla nostra MaterialApp.

In questa lezione e nella prossima lezione ci focalizzeremo proprio su questi widget, ponendo l’attenzione su come definire ed utilizzare i temi all’interno della nostra applicazione.

Le classi MaterialApp e ThemeData

Fin dalla lezione 7, ed in tutti gli esempi proposti finora, abbiamo definito nel metodo build per la classe MyApp il widget MaterialApp, il cui scopo è di permettere l’utilizzo del Material Design e Theme all’interno della nostra applicazione.

Questo widget, definito a partire dalla classe WidgetsApp:

• offre un insieme di funzionalità specifiche come gli AnimatedTheme;
• riveste un insieme di widget comunemente richiesti per le applicazioni basate sul Material Design.

Inoltre, questa classe si occupa anche della navigazione tra le diverse schermate dell’applicazione, come vedremo nelle prossime lezioni.

Vediamo quindi alcune delle proprietà fondamentali che possono essere coinvolte durante la definizione di un tema.

Proprietà	Tipo Accettato	Descrizione
color	Color	definisce il colore primario da utilizzare per l’applicazione nell’interfaccia del sistema operativo
theme	ThemeData	definisce le proprietà visive come colore, font, forme, e molto altro da utilizzare per i widget dell’applicazione. Per farlo viene definito un ThemeData widget le cui proprietà, una volta impostate, possono essere riutilizzate in qualsiasi punto dell’applicazione
darkTheme	ThemeData	definisce il ThemeData da utilizzare quando viene richiesta dal sistema operativo la modalità dark, fondamentale ad esempio di notte o in situazioni di scarsa luminosità per non abbagliare l’utente

In particolare, possiamo notare che questo widget usa il widget ThemeData per definire le proprietà theme e darkTheme. In realtà, come anticipato, la classe MaterialApp usa internamente il widget Theme per personalizzare lo stile dei suoi componenti, come AppBar e Button. Infatti il widget Theme definisce la proprietà data che accetta come valore un widget ThemeData contenente tutte le informazioni circa:

• lo stile;
• la luminosità del tema;
• i colori primari e di sfondo;
• il font.

Focalizziamoci, pertanto, sulla classe ThemeData.

Essa, infatti, contiene i valori relativi al colore e alla tipografia definiti per un material theme ed è questa la classe da utilizzare per configurare opportunamente un Theme widget.

Vediamo di seguito le principali proprietà che utilizzeremo in questa lezione.

Proprietà	Tipo Accettato	Descrizione
accentColor	Color	noto nel Material Design come secondary color, definisce un ulteriore colore per rappresentare al meglio il nostro prodotto ed è l’ideale per i colori dei FAB, per evidenziare il testo selezionato, per la progress bar e molto altro ancora. Non è obbligatorio definirlo ma è consigliato
brightness	Brightness	determina la luminosità del tema generale dell’applicazione. Infatti, quando non definiamo il primary o l’accent color per i widget, viene utilizzato quello offerto da questa proprietà. Pertanto quando la luminosità è impostata su Brightness.dark i colori primari saranno tutti scuri. Contrariamente se viene impostata su Brightness.light, i colori saranno luminosi e l'oscurità del colore primario varierà in base alla definizione di primaryColorBrightness
buttonTheme	ButtonThemeData	se definito, modifica la configurazione di default dei widget di tipo Button, come il RaisedButton
fontFamily	String	definisce la famiglia di font da usare all’interno della nostra applicazione. Quando il font non verrà definito verrà utilizzato questo valore come default
primaryColor	Color	definisce il colore che viene mostrato più di frequente nell’applicazione
primarySwatch	MaterialColor	differentemente dalle proprietà primaryColor e accentColor che accettano un widget Color, questa proprietà accetta un MaterialColor. Questa classe permette di definire un colore ed un campione di colori con dieci tonalità del colore indicato. In particolare, le tonalità del colore sono indicate dall’indice. Maggiore è il valore dell’indice più scuro sarà il colore. È consigliabile definirlo in modo da permettere ai Widget di utilizzare variazioni di quel colore quando necessario invece di utilizzare il valore di default
textTheme	TextTheme	se definito, modifica la configurazione di default dei widget di tipo Text

Questo è solo un piccolo sottoinsieme delle proprietà offerte dal widget ThemeData che ci permetterà, nel corso di questa lezione, di definire lo stile degli aspetti principali di un’applicazione. Per ulteriori informazioni su questo widget si raccomanda di consultare la documentazione ufficiale.