Kiểu chữ từ giao diện chủ đề

Thuộc phần Bố cục phù hợp với mọi màn hình trong hành trình Flutter của Coddy. Bài học 23 trên 30.

Chủ đề chứa cả kiểu chữ lẫn màu sắc trong textTheme. Mỗi kiểu có tên thể hiện chức năng, từ cỡ lớn đến nhỏ: displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge và nhiều kiểu khác.

Để dùng một kiểu, hãy đọc kiểu đó từ chủ đề rồi truyền vào style::

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

Text không có kiểu sẽ dùng bodyMedium, có cỡ chữ là 14. Để đổi toàn bộ văn bản thông thường trong ứng dụng cùng lúc, hãy đặt bodyMedium tùy chỉnh cho chủ đề:

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

Flutter tự điền kiểu mặc định cho mọi kiểu bạn không chỉ định, vì vậy bạn chỉ cần viết những kiểu muốn thay đổi.

Thử thách

Dễ

Tạo kiểu cho nhật ký từ giao diện:

định dạng Today theo kiểu headlineMedium của giao diện
trong ThemeData, đặt cỡ chữ văn bản thường là 18 bằng bodyMedium của riêng bạn

Tự làm thử

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