close

Formattazione dell'interfaccia utente con ThemeData e personalizzata Styles in Flutter

In Flutter, puoi formattare l'aspetto della tua applicazione utilizzando ThemeData e personalizzare il file styles. ThemeData è una classe che contiene le proprietà per definire il colore dominante styles, i caratteri, padding ecc. per l'intera applicazione. Lo stile personalizzato ti consente di personalizzare styles per ogni specifico file Widget. Ecco le istruzioni dettagliate su come utilizzare ThemeData e personalizzare Styles in Flutter:

ThemeData

In Flutter, ThemeData è una classe che contiene gli attributi per definire il colore primario, la famiglia di caratteri, padding e molte altre opzioni di stile per l'intera applicazione. Usando ThemeData, puoi cambiare rapidamente l'aspetto generale della tua app senza dover modificare ogni singolo elemento Widget.

Attributi comuni di ThemeData:

  • primaryColor: il colore primario per gli elementi principali dell'app, come la barra dell'app, i pulsanti e così via.
  • accentColor: il colore principale per gli elementi secondari o evidenziati nell'interfaccia utente, ad esempio FloatingActionButton.
  • backgroundColor: il colore di sfondo per l'intera app.
  • textTheme: definisce il testo principale styles per diversi elementi di testo nell'app, come intestazioni, corpo del testo, ecc.
  • textTheme.headline1: stile del testo per l'intestazione di livello 1.
  • textTheme.headline2: stile del testo per l'intestazione di livello 2.
  • textTheme.bodyText1: stile di testo per il corpo del testo principale.
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

Stile personalizzato

Custom Styles consente di personalizzare lo stile per ogni specifico file Widget. Utilizzando l' style attributo di Widget come Text, Container, RaisedButton, ecc., puoi modificare il carattere, il colore, la dimensione del testo padding e vari altri attributi.

Attributi comuni di TextStyle(utilizzati per Text Widget):

  • fontSize: la dimensione del carattere.
  • fontWeight: lo spessore del carattere.
  • color: il colore del testo.
  • fontStyle: lo stile del carattere, ad esempio grassetto, corsivo.
  • letterSpacing: la spaziatura tra i caratteri.
  • wordSpacing: La spaziatura tra le parole.
  • decoration: La decorazione del testo, come la sottolineatura, il barrato.

Esempio utilizzando Custom Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

Usando Themes e Styles con MediaQuery

Puoi combinare Themes e Styles con MediaQuery per regolare l'interfaccia utente in base alle dimensioni dello schermo o alla risoluzione del dispositivo.

Esempio:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

Conclusione:

Flutter fornisce potenti strumenti per formattare l'interfaccia utente della tua applicazione. Usando ThemeData e personalizzando Styles, puoi regolare facilmente elementi dell'interfaccia utente come colori, caratteri, dimensioni del testo, ecc., per creare un'interfaccia bella e accattivante per la tua app.