主题中的文本样式

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 23 课，共 30 课。

主题不仅包含颜色，还会在 textTheme 中保存文本样式。每种样式都有一个名称，表示它的用途和大小，从大到小依次是：displayLarge、headlineMedium、titleLarge、bodyMedium、labelLarge 等。

要使用某种样式，请从主题中读取它，并将其作为 style: 传入：

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

没有设置样式的 Text 会使用 bodyMedium，其字号为 14。要一次性更改应用中的所有普通文本，可以为主题设置自定义的 bodyMedium：

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

Flutter 会为你未设置的所有样式填入默认值，因此你只需编写要更改的样式。

挑战

简单

使用主题样式设置日志：

让 Today 使用主题的 headlineMedium 样式
在 ThemeData 中，用你自己的 bodyMedium 将普通文本的字号设为 18

亲手试试

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