Stili di testo dal tema

Fa parte della sezione Layout adattabili del percorso Flutter di Coddy. Lezione 23 di 30.

Il tema contiene stili di testo oltre ai colori, nel suo textTheme. Ogni stile ha un nome che descrive la sua funzione, dal più grande al più piccolo: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge e altri.

Per usarne uno, leggilo dal tema e passalo come style::

Text('Hello', style: Theme.of(context).textTheme.headlineMedium)

Un Text senza stile usa bodyMedium, che ha dimensione 14. Per modificare tutto il testo semplice dell'app in una volta sola, assegna al tema il tuo bodyMedium:

ThemeData(
  textTheme: const TextTheme(
    bodyMedium: TextStyle(fontSize: 16),
  ),
)

Flutter assegna lo stile predefinito a ogni stile che non specifichi, quindi scrivi solo quelli che modifichi.

Sfida

Facile

Stilizza il diario usando il tema:

fai in modo che Today usi lo stile headlineMedium del tema
in ThemeData, imposta la dimensione del testo normale su 18 con il tuo bodyMedium

Provalo tu

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Garden Journal')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('Today'),
            const SizedBox(height: 8),
            const Text('Water the tomatoes in the morning.'),
            const Text('Pick the first beans on Friday.'),
          ],
        ),
      ),
    );
  }
}