Usare gli stili del tema nei widget
Ora che la scala è definita, nei widget non devi più scrivere fontSize a mano: basta leggere lo stile dal tema con Theme.of(context).textTheme.
Text('Titolo', style: Theme.of(context).textTheme.headlineMedium)
Se ti serve una piccola variazione (ad esempio il colore), usa copyWith sullo stile del tema, così mantieni font e dimensioni coerenti:
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.primary,
)
Per risparmiare righe, salva final text = Theme.of(context).textTheme; all'inizio del metodo build. Riscriviamo la home usando solo stili del tema.
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
final text = Theme.of(context).textTheme;
final colors = Theme.of(context).colorScheme;
return Scaffold(
appBar: AppBar(title: const Text('Tipografia')),
body: ListView(
padding: const EdgeInsets.all(24),
children: [
Text('Benvenuto in Flutter', style: text.headlineMedium),
const SizedBox(height: 4),
Text(
'Guida alla tipografia',
style: text.titleMedium?.copyWith(color: colors.primary),
),
const SizedBox(height: 16),
Text(
'Usando TextTheme definisci gli stili una sola volta e li riusi '
'in tutta l\'app. Cambiare font diventa una modifica di una riga.',
style: text.bodyMedium,
),
const SizedBox(height: 24),
Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Card di esempio', style: text.titleMedium),
const SizedBox(height: 8),
Text('Contenuto secondario della card.', style: text.bodySmall),
],
),
),
),
const SizedBox(height: 24),
FilledButton(
onPressed: () {},
child: const Text('Continua'),
),
],
),
);
}
}
Risultato atteso
La schermata mostra una gerarchia visiva chiara (titolo, sottotitolo colorato, paragrafo, card e bottone) con un solo punto di configurazione per i font.
