Theme.of(context)의 색상

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

버튼은 자동으로 테마를 적용합니다. 직접 만든 상자에는 적용되지 않습니다. Colors.teal.shade100을 사용하는 Container는 테마가 무엇이든 그 색상을 유지합니다.

테마를 사용해 직접 만든 위젯에 색을 적용하려면 Theme.of(context)로 테마를 읽으세요.

final colors = Theme.of(context).colorScheme;

Container(
  color: colors.primaryContainer,
  child: Text('Hi', style: TextStyle(color: colors.onPrimaryContainer)),
)

primaryContainer는 부드러운 바탕색이고, onPrimaryContainer는 그 바탕색 위에 표시되는 텍스트의 색으로, 읽기 쉽도록 선택됩니다. primary와 onPrimary, surface와 onSurface도 마찬가지입니다.

Theme.of(context)는 이를 요청하는 위젯 위에 있는 테마를 찾습니다. 테마는 MaterialApp에서 설정되므로, context는 그 아래에 있는 것이어야 합니다. 예를 들어 HomeScreen의 build가 그렇습니다. MaterialApp보다 위에 있는 MyApp 자체의 build에서는 Flutter의 기본 보라색만 찾습니다.

챌린지

쉬움

배너에 테마의 색상을 적용하여 선택한 어떤 시드에도 맞도록 하세요:

HomeScreen의 build 맨 위에: final colors = Theme.of(context).colorScheme;
배너의 색상: colors.primaryContainer
배너 텍스트의 색상: colors.onPrimaryContainer

직접 해보기

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.teal),
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Bookshelf')),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text(
                'You read 12 books this year',
                style: TextStyle(fontSize: 20, color: Colors.teal.shade900),
              ),
            ),
          ],
        ),
      ),
    );
  }
}