테마에서 텍스트 스타일 가져오기

Coddy Flutter 여정의 화면 크기에 맞는 레이아웃 섹션에 포함된 레슨. 30개 중 23번째.

테마의 textTheme에는 색상뿐만 아니라 텍스트 스타일도 있습니다. 각 스타일에는 큰 것부터 작은 것까지 용도에 따른 이름이 있습니다. displayLarge, headlineMedium, titleLarge, bodyMedium, labelLarge 등이 있습니다.

스타일을 사용하려면 테마에서 읽어 와서 style:로 전달합니다.

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

스타일이 지정되지 않은 Text는 크기가 14인 bodyMedium을 사용합니다. 앱의 모든 일반 텍스트를 한 번에 변경하려면 테마에 직접 만든 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.'),
          ],
        ),
      ),
    );
  }
}