Styles de texte du thème

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 23 sur 30.

Le thème contient des styles de texte ainsi que des couleurs, dans son textTheme. Chaque style porte un nom correspondant à son rôle, du plus grand au plus petit : displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge, et bien d’autres.

Pour en utiliser un, récupère-le depuis le thème et passe-le en tant que style: :

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

Un widget Text sans style utilise bodyMedium, dont la taille est de 14. Pour modifier d’un coup tout le texte sans style de l’application, définis ton propre bodyMedium dans le thème :

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

Flutter complète chaque style que tu ne définis pas avec sa valeur par défaut. Tu n’as donc à écrire que ceux que tu modifies.

Défi

Facile

Applique un style au journal à partir du thème :

fais en sorte que Today utilise le style headlineMedium du thème
dans ThemeData, définis la taille du texte ordinaire à 18 avec ton propre bodyMedium

Essayez vous-même

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.'),
          ],
        ),
      ),
    );
  }
}