Seed로 앱 테마 만들기

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

앱의 모든 버튼, 스위치, 슬라이더는 한곳에서 색을 가져옵니다. 바로 앱의 테마입니다. 테마를 바꾸면 버튼 하나도 건드리지 않고 앱 전체가 함께 바뀝니다.

MaterialApp에서 테마를 설정합니다. 테마를 만드는 가장 빠른 방법은 하나의 시드 색상에서 시작하는 것입니다.

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.orange),
  ),
  home: ...,
)

ColorScheme.fromSeed는 시드 색상에서 서로 어울리는 색상 세트를 만듭니다. 여기에는 버튼과 링크에 쓰이는 강한 primary, 채워진 영역에 쓰이는 부드러운 primaryContainer, 배경에 쓰이는 surface, 그리고 각 색상 위에 표시되는 텍스트 색상이 포함됩니다. 이 색상들은 시드 색상의 여러 톤이므로, 버튼의 주황색은 정확히 Colors.orange와 같지는 않지만, 분명 주황색이고 읽기 쉽습니다.

지금까지 본 보라색은 Flutter의 기본 시드 색상입니다.

챌린지

쉬움

Garden Journal에 녹색 테마를 적용하세요. MaterialApp의 theme:을 시드 Colors.green에서 가져온 색상 구성표를 사용하는 ThemeData로 설정하세요. 두 버튼은 변경하지 않아도 녹색으로 바뀝니다.

직접 해보기

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,
      home: Scaffold(
        appBar: AppBar(title: const Text('Garden Journal')),
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('Cancel'),
              ),
              const SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {},
                child: const Text('Save'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}