Nel post precedente abbiamo scritto la nostra prima app con Flutter: un semplice Hello World che non può mai mancare quando si inizia a scrivere codice con un nuovo linguaggio.
Ora proveremo ad estendere quell'esempio, aggiungendo alcuni elementi per dare un tema e un po' di colore alla nostra applicazione.
Riprendiamo il codice di flutter_hello_world e modifichiamo sempre il file main.dart presente nella cartella lib, valorizzando il parametro theme dell'oggetto (per ora lo chiamiamo così, poi lo definiremo meglio) MaterialApp:
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title : const Text('Flutter demo'),
),
body: const Center(
child: Text('Hello World')
),
),
theme: ThemeData(
appBarTheme: const AppBarTheme(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
),
primaryColor: Colors.blueAccent,
),
);
Abbiamo definito un tema, che definisce i colori della barra del titolo (testo bianco su sfondo rosso) e un altro colore che useremo in seguito
Se modifichiamo il body, in questo modo
body: Container(
decoration: BoxDecoration(color: Colors.green),
child: const Center(
child: Text('Hello World')
),
),
possiamo assegnare un colore anche allo sfondo
Ancora, possiamo modificare il valore dell'elemento child che contiene il testo,
body: Container(
decoration: BoxDecoration(color: Colors.green),
child: Center(
child: Container(
color: Theme.of(context).primaryColor,
child: Text('Hello World'),
),
),
),
in modo da assegnare come colore di sfondo del testo, il colore primaryColor come lo avevamo definito nel theme della della nostra MaterialApp (utilizzando Theme.of(context) )
Proviamo adesso ad assegnare uno stile al nostro testo (colore rosso, grassetto e aumentiamo la dimensione), modificando ulteriormente il codice
child: Container(
color: Theme.of(context).primaryColor,
child: Text('Hello World',
style: TextStyle(
color : Colors.red,
fontWeight: FontWeight.bold,
fontSize: 24,
),
),
),
per ottenere il risultato finale
Abbiamo iniziato l'approccio con i componenti base di Flutter, vedendo come sia relativamente semplice cambiare a nostro piacere i colori e lo stile degli elementi che costituiscono la nostra applicazione.
Nei prossimi articoli, entreremo un po' più nel dettaglio, parlando di widget.
Come per gli articoli precedenti potete trovare questo codice tra le mie repo GitHub: https://github.com/luigimicco/flutter_hello_world_with_theme
Commenti
Posta un commento