Flutter로 앱 개발을 시작하면 가장 먼저 마주하는 관문 중 하나가 바로 '테마(Theme)' 설정입니다. 특히 앱의 전체적인 인상을 결정하는 주요 색상을 지정할 때, 많은 개발자가 ThemeData의 primarySwatch와 primaryColor 앞에서 잠시 망설이곤 합니다. 둘 다 기본 색상을 지정하는 것 같은데, 왜 두 개나 있을까요? 하나만 쓰면 안 될까요? 둘 다 쓰면 어떻게 될까요? 이 모든 질문은 매우 자연스러운 것이며, Flutter의 유연하고 강력한 테마 시스템을 이해하는 첫걸음입니다.
저는 풀스택 개발자로서 수많은 Flutter 프로젝트를 진행하며 이 두 속성의 미묘하지만 결정적인 차이를 체감했습니다. 이 글은 단순히 두 속성의 사전적 정의를 나열하는 것을 넘어, 실제 프로젝트에서 어떤 상황에 무엇을 선택해야 하는지, 그리고 두 속성을 함께 사용했을 때 발생하는 일과 최신 Flutter(Material 3)에서는 이 개념이 어떻게 발전하고 있는지에 대한 깊이 있는 통찰을 공유하고자 합니다. 이 글을 끝까지 읽고 나면, 여러분은 더 이상 테마 설정 앞에서 망설이지 않고, 확신을 가지고 여러분의 앱에 가장 적합한 색상 전략을 구현할 수 있게 될 것입니다.
기본 개념부터 확실히: primaryColor란 무엇인가?
가장 직관적이고 이해하기 쉬운 속성부터 시작하겠습니다. primaryColor는 이름 그대로 앱의 '주요 색상'을 단 하나, 정확한 Color 값으로 지정하는 속성입니다. 매우 명확하죠. AppBar의 배경색, 주요 버튼의 색상 등 앱의 정체성을 가장 잘 드러내는 곳에 사용되는 바로 그 색입니다.
예를 들어, 우리 앱의 브랜드 색상이 특정 HEX 코드를 가진 파란색이라고 가정해 봅시다. 이 색상을 primaryColor로 설정하는 코드는 다음과 같이 매우 간단합니다.
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(
title: 'PrimaryColor Example',
theme: ThemeData(
// 정확한 단일 색상을 primaryColor로 지정
primaryColor: const Color(0xFF0D47A1), // 매우 진한 파란색
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// AppBar는 기본적으로 ThemeData의 primaryColor를 배경색으로 사용합니다.
appBar: AppBar(
title: const Text('PrimaryColor 테스트'),
backgroundColor: Theme.of(context).primaryColor, // 명시적으로 지정할 수도 있습니다.
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('이 앱의 primaryColor를 확인해보세요.'),
const SizedBox(height: 20),
// ElevatedButton은 다른 색상 체계를 사용할 수 있습니다.
// 이 부분은 뒤에서 더 자세히 다룹니다.
ElevatedButton(
onPressed: () {},
child: const Text('테스트 버튼'),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
// FAB 또한 기본 테마 색상을 따릅니다.
child: const Icon(Icons.add),
),
);
}
}
위 코드에서 primaryColor에 Color(0xFF0D47A1)이라는 단일 색상을 지정했습니다. 이 코드를 실행하면 AppBar의 배경색이 우리가 지정한 진한 파란색으로 잘 적용되는 것을 볼 수 있습니다. 간단하고 명확합니다. 하지만 여기서 문제가 발생하기 시작합니다. FloatingActionButton(FAB)의 색상은 어떻게 될까요? 버튼을 눌렀을 때 퍼지는 잉크 효과(Splash Effect)의 색상은? 슬라이더나 스위치 같은 다른 위젯들은 어떤 색상을 가질까요?
primaryColor의 한계점
primaryColor만 설정했을 때, Flutter는 이 단일 색상에서 파생되는 다른 음영(shade)의 색상들을 '추측'하거나 '알 수' 없습니다. 예를 들어, 버튼을 누르고 있을 때 필요한 약간 더 어두운 색상이나, 비활성화 상태일 때 필요한 더 옅은 색상 등을 자동으로 만들어주지 않습니다. 이 때문에 어떤 위젯들은 의도치 않은 기본값(보통 파란색 계열)으로 표시되거나, primaryColor 하나만으로 표현되어 앱 전체의 색상 조화가 깨져 보일 수 있습니다.
위 예제에서 FAB는 아마도 `ColorScheme`의 `secondary` 색상이나 다른 기본값을 따르게 되어 AppBar와 색상이 다를 수 있습니다. 바로 이 지점에서 "하나의 기본 색상을 지정하면, 관련된 다른 색상들도 알아서 조화롭게 지정해주면 좋겠다"는 요구가 생겨나고, 그에 대한 Flutter의 해답이 바로 primarySwatch입니다.
마법의 색상 견본, primarySwatch의 정체
primarySwatch는 primaryColor처럼 단일 Color 값을 받지 않습니다. 대신 MaterialColor라는 특별한 객체를 받습니다. 'Swatch'라는 단어가 '견본'이나 '색상표'를 의미하는 것처럼, MaterialColor는 단일 색상이 아니라, 하나의 기본 색상에서 파생된 여러 농도의 색상들을 모아놓은 팔레트입니다.
Flutter의 `material.dart` 라이브러리에는 `Colors.blue`, `Colors.red`, `Colors.green` 등 미리 정의된 여러 MaterialColor들이 있습니다. 이 각각의 견본은 10가지 음영(shade)을 가지고 있으며, 각 음영은 50, 100, 200, ..., 900 이라는 키(key)로 접근할 수 있습니다.
- 50: 가장 옅은 색상
- 100~400: 점점 진해지는 색상
- 500: 기준이 되는 기본 색상 (가장 대표적인 색)
- 600~900: 점점 어두워지는 색상
우리가 ThemeData에서 primarySwatch를 설정하면, Flutter는 다음과 같은 마법 같은 일들을 자동으로 처리합니다.
primaryColor자동 설정:primarySwatch의 500번 농도 색상(primarySwatch[500])을primaryColor의 기본값으로 자동 설정합니다.- 다양한 테마 속성 파생:
primarySwatch의 다른 음영들을 사용하여 다른 테마 속성들을 자동으로 설정합니다.primaryColorLight: 더 밝은 음영 (예: 100번)primaryColorDark: 더 어두운 음영 (예: 700번)accentColor(이전 버전) /colorScheme.secondary: 다른 음영 (예: 200 또는 400번)splashColor,highlightColor: 상호작용 시 사용되는 색상들도 이 견본 내에서 조화롭게 선택됩니다.toggleableActiveColor: 스위치, 라디오 버튼 등이 활성화되었을 때의 색상도 설정됩니다.
이제 primarySwatch를 사용한 예제를 살펴보겠습니다.
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(
title: 'PrimarySwatch Example',
theme: ThemeData(
// MaterialColor 객체인 Colors.teal을 primarySwatch로 지정
primarySwatch: Colors.teal,
),
home: const HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
// AppBar는 자동으로 Colors.teal[500] 색상을 사용합니다.
appBar: AppBar(
title: const Text('PrimarySwatch 테스트'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text('앱 전체의 색상이 일관성 있게 변경되었습니다.'),
const SizedBox(height: 20),
// Slider 또한 활성 부분이 teal 계열로 자동 설정됩니다.
Slider(
value: 0.5,
onChanged: (value) {},
),
Switch(
value: true,
onChanged: (value) {},
),
],
),
),
// FAB 또한 AppBar와 조화로운 색상으로 자동 설정됩니다.
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
);
}
}
이 코드를 실행하면, AppBar 뿐만 아니라 FloatingActionButton, Slider의 활성 부분, Switch의 활성 상태 색상까지 모두 teal 색상 계열로 통일성 있게 적용된 것을 볼 수 있습니다. 이것이 바로 primarySwatch의 힘입니다. 단 하나의 속성을 설정함으로써 앱 전체의 색상 조화를 손쉽게 구현할 수 있는 것입니다.
Flutter의 테마 시스템은 단순히 색상을 지정하는 것을 넘어, 위젯 간의 시각적 관계와 상호작용까지 고려하여 설계되었습니다. primarySwatch는 이러한 철학을 가장 잘 보여주는 예시로, 개발자가 색상 하나하나를 고민하는 대신 더 큰 그림에 집중할 수 있도록 돕습니다.
풀스택 개발자의 경험
primarySwatch vs. primaryColor: 직접 비교 분석
이제 두 속성의 개념과 역할을 알았으니, 한눈에 비교하여 차이점을 명확히 해보겠습니다. 이 비교는 여러분이 프로젝트의 요구사항에 따라 어떤 속성을 사용해야 할지 결정하는 데 큰 도움이 될 것입니다.
| 특징 | primarySwatch |
primaryColor |
|---|---|---|
| 타입 | MaterialColor (색상 팔레트) |
Color (단일 색상) |
| 주요 역할 | 앱의 전반적인 색상 테마를 정의하고, 다양한 위젯의 색상을 자동으로 파생시킴 | 앱의 가장 핵심적인 단일 색상(주로 AppBar 배경)을 지정함 |
| 자동 색상 파생 | 예. primaryColor, primaryColorLight, primaryColorDark, splashColor 등 수많은 색상을 자동으로 설정 |
아니요. 오직 primaryColor 값만 설정하며, 다른 색상에 영향을 주지 않음 |
| 일관성 | 매우 높음. 앱 전체에 걸쳐 조화로운 색상 경험을 쉽게 제공 | 낮음. 다른 위젯 색상을 수동으로 설정하지 않으면 일관성이 깨질 수 있음 |
| 사용 시나리오 | 대부분의 앱에서 권장되는 기본 접근 방식. 앱의 브랜딩과 일관된 UI를 구축할 때 | 매우 단순한 앱, 특정 위젯의 색상만 국소적으로 변경하고 싶을 때, 또는 primarySwatch의 500번 색상을 다른 색으로 덮어쓰고 싶을 때 |
| 코드 예시 | theme: ThemeData(primarySwatch: Colors.blue) |
theme: ThemeData(primaryColor: const Color(0xFF2196F3)) |
만약 둘 다 설정한다면 어떻게 될까?
이것은 많은 개발자들이 궁금해하는 지점입니다. ThemeData에 primarySwatch와 primaryColor를 동시에 설정하면 어떻게 될까요? Flutter는 이 경우 충돌을 일으키는 대신 명확한 우선순위 규칙을 따릅니다.
규칙:primaryColor가primarySwatch[500]을 덮어쓴다. 하지만 다른 파생 색상들은 여전히primarySwatch로부터 생성된다.
말로만 들으면 혼란스러울 수 있으니 코드로 직접 확인해 보겠습니다.
MaterialApp(
title: 'Swatch and Color Conflict',
theme: ThemeData(
// primarySwatch는 파란색 계열로 설정
primarySwatch: Colors.blue,
// 하지만 primaryColor는 완전히 다른 색인 주황색으로 덮어쓰기
primaryColor: Colors.orange,
),
home: const HomeScreen(),
)
// HomeScreen.dart
// ...
Scaffold(
// AppBar의 배경색은 무엇이 될까? -> 덮어쓴 `primaryColor`인 주황색!
appBar: AppBar(
title: const Text('Swatch vs Color'),
),
body: Center(
child: Slider(
value: 0.5,
onChanged: (value) {},
// 슬라이더의 활성 색상은 무엇이 될까? -> `primarySwatch`에서 파생된 파란색!
),
),
// FAB의 배경색은 무엇이 될까?
// -> 보통 colorScheme.secondary를 따르며, 이는 `primarySwatch`에서 파생됨. 즉 파란색 계열!
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
)
위 예제의 결과는 다음과 같습니다:
- AppBar 배경색: 명시적으로 지정한
primaryColor인Colors.orange가 됩니다. - Slider, FloatingActionButton 등 다른 위젯: 여전히
primarySwatch인Colors.blue로부터 파생된 색상들을 사용합니다.
이러한 동작 방식은 때로는 유용할 수 있지만, 대부분의 경우 개발자의 의도와 다른 혼란을 야기할 수 있습니다. 따라서 특별한 의도가 없다면 primarySwatch를 사용하고 primaryColor는 설정하지 않거나, 반대로 primarySwatch 없이 primaryColor와 다른 색상들을 개별적으로 설정하는 것이 좋습니다. 두 가지를 혼용하는 것은 신중해야 합니다.
우리 회사 브랜드 색상은 MaterialColor에 없는데? 커스텀 primarySwatch 만들기
primarySwatch가 매우 편리하다는 점은 알겠습니다. 하지만 현실의 프로젝트는 Colors.blue나 Colors.teal처럼 미리 정의된 색상만 사용하지 않습니다. 모든 회사와 서비스에는 고유한 브랜드 색상이 있습니다. 이럴 때 어떻게 primarySwatch의 이점을 누릴 수 있을까요? 정답은 '직접 MaterialColor를 만드는 것'입니다.
커스텀 MaterialColor를 만드는 과정은 생각보다 간단합니다. 기본 색상(보통 500번이 될 색상)을 정하고, 그 색상의 더 밝은 버전들과 더 어두운 버전들을 만들어 10단계의 색상 팔레트를 구성하면 됩니다. 이 과정을 단계별로 알아보겠습니다.
1단계: 기본 브랜드 색상 정하기
가장 먼저 디자이너에게 받은 우리 앱의 핵심 브랜드 색상의 HEX 코드를 확인합니다. 예를 들어, 우리의 브랜드 색상이 세련된 네이비 색인 #1A2B3C라고 가정하겠습니다. 이 값은 우리 커스텀 swatch의 500번 색상이 될 것입니다.
2단계: 색상 음영(Shades) 생성하기
이제 #1A2B3C를 기준으로 50, 100, ..., 900에 해당하는 나머지 9개의 색상을 만들어야 합니다. 이 색상들을 직접 눈으로 계산하는 것은 거의 불가능하며, 디자인 감각이 없다면 조화롭지 못한 결과가 나올 수 있습니다. 다행히 이 과정을 도와주는 훌륭한 온라인 도구들이 많이 있습니다.
- Material Design Color Tool: 구글에서 공식 제공하는 색상 도구로, 기본 색상을 입력하면 보조 색상 및 전체 팔레트를 추천해줍니다.
- Material Theme Builder: 최신 Material 3 기반의 테마를 만들어주는 강력한 도구입니다. Figma 플러그인도 제공합니다.
- Material Color Palette Generator: 사용법이 매우 직관적입니다. HEX 코드를 입력하면 즉시
MaterialColorDart 코드를 생성해줍니다.
위와 같은 도구를 사용하여 #1A2B3C에 대한 팔레트를 생성하면, 다음과 유사한 결과물을 얻을 수 있습니다. (아래 색상값은 예시입니다.)
50: #E8EAED
100: #C5CBD2
200: #9FAAB6
300: #7A899A
400: #5E7085
500: #425870 // 우리의 기본 색상과 가장 유사한 값
600: #3B5067
700: #32465B
800: #2A3C4F
900: #1F2F40
3단계: `MaterialColor` 코드로 변환하기
이제 생성된 10개의 HEX 코드를 사용하여 Flutter에서 사용할 수 있는 MaterialColor 객체를 만듭니다. 재사용성과 코드의 깔끔함을 위해 별도의 파일(예: `app_colors.dart`)에 상수로 정의하는 것이 좋습니다.
import 'package:flutter/material.dart';
class AppColors {
// private 생성자로 인스턴스화 방지
AppColors._();
// 기본 색상 값을 int로 정의 (0xFF + 6자리 HEX 코드)
static const int _brandPrimaryValue = 0xFF425870;
// MaterialColor 객체 생성
static const MaterialColor brandColor = MaterialColor(
_brandPrimaryValue,
{
50: Color(0xFFE8EAED),
100: Color(0xFFC5CBD2),
200: Color(0xFF9FAAB6),
300: Color(0xFF7A899A),
400: Color(0xFF5E7085),
500: Color(_brandPrimaryValue),
600: Color(0xFF3B5067),
700: Color(0xFF32465B),
800: Color(0xFF2A3C4F),
900: Color(0xFF1F2F40),
},
);
}
위 코드에서 MaterialColor 생성자는 두 개의 인자를 받습니다. 첫 번째는 기본 색상의 int 값(500번 색상)이고, 두 번째는 각 음영의 int 키와 Color 값을 연결한 Map입니다.
4단계: 커스텀 Swatch를 `ThemeData`에 적용하기
마지막으로, 이렇게 만든 brandColor를 ThemeData의 primarySwatch에 적용하면 됩니다.
MaterialApp(
title: 'Custom Swatch App',
theme: ThemeData(
// 직접 만든 brandColor를 primarySwatch로 지정
primarySwatch: AppColors.brandColor,
// 필요하다면 다른 속성들도 커스터마이징
// 예: 버튼 텍스트 스타일
textTheme: const TextTheme(
labelLarge: TextStyle(fontWeight: FontWeight.bold),
),
),
home: const HomeScreen(),
)
이제 여러분의 앱은 미리 정의된 색상이 아닌, 고유한 브랜드 색상 팔레트를 기반으로 일관되고 전문적인 UI를 갖추게 되었습니다. 이 방법은 앱의 정체성을 확립하고 사용자에게 높은 퀄리티의 경험을 제공하는 데 매우 중요합니다.
그렇다면 primaryColor는 언제 사용해야 할까?
지금까지의 설명은 primarySwatch가 대부분의 경우 더 나은 선택이라는 인상을 줍니다. 실제로도 그렇습니다. 하지만 그렇다고 해서 primaryColor가 쓸모없는 속성은 결코 아닙니다. primaryColor가 빛을 발하는 특정 시나리오들이 존재합니다.
시나리오 1: 앱의 특정 부분만 색상을 다르게 하고 싶을 때
앱 전체에는 primarySwatch로 일관된 테마를 적용했지만, 특정 화면이나 위젯에서만 AppBar의 색상을 강조하거나 다르게 표현하고 싶을 수 있습니다. 예를 들어, '프리미엄 기능' 화면에서는 금색 AppBar를 보여주고 싶을 수 있죠. 이때는 전체 테마를 건드리지 않고, 해당 위젯 트리에만 Theme 위젯으로 감싸 primaryColor를 국소적으로 재정의할 수 있습니다.
// PremiumScreen.dart
class PremiumScreen extends StatelessWidget {
const PremiumScreen({super.key});
@override
Widget build(BuildContext context) {
// 기존 테마를 복사하고, primaryColor만 금색으로 덮어쓴다.
final localTheme = Theme.of(context).copyWith(
primaryColor: Colors.amber[700],
);
return Theme(
data: localTheme,
child: Scaffold(
// 이 AppBar는 이제 금색 배경을 갖게 된다.
appBar: AppBar(
title: const Text('프리미엄 멤버십'),
),
body: const Center(
child: Text('특별한 경험을 즐겨보세요!'),
),
),
);
}
}
이 방식은 전체 테마의 일관성을 유지하면서 특정 부분에만 유연하게 변화를 줄 수 있어 매우 효과적입니다.
시나리오 2: 매우 간단한 프로토타입 또는 단일 화면 앱
앱의 규모가 매우 작거나, 아이디어를 빠르게 확인하기 위한 프로토타입을 만들 때는 굳이 MaterialColor를 만들 필요가 없을 수 있습니다. 단지 AppBar 색상만 지정하면 되는 간단한 경우에는 primaryColor만 사용하는 것이 더 빠르고 간편할 수 있습니다.
시나리오 3: primarySwatch의 500번 색상을 미세 조정하고 싶을 때
커스텀 primarySwatch를 만들었지만, 막상 AppBar에 적용해보니 500번 색상이 생각보다 너무 밝거나 어두워 보일 수 있습니다. 이럴 때 전체 swatch를 다시 생성하는 대신, primarySwatch는 그대로 두고 primaryColor에만 살짝 다른 색상을 지정하여 AppBar 색상만 미세하게 조정하는 트릭을 사용할 수 있습니다. 앞서 설명했듯이 이는 혼란을 야기할 수 있으므로, 팀 내에 명확한 주석과 문서화를 통해 그 의도를 공유하는 것이 중요합니다.
primarySwatch 자체를 조화롭게 수정하는 것이 더 근본적인 해결책입니다.
Material 3와 ColorScheme: primarySwatch의 미래
Flutter의 테마 시스템은 계속해서 발전하고 있습니다. 최신 Material Design 3 (M3)의 도입과 함께, Flutter 테마 설정의 중심은 primarySwatch에서 ColorScheme으로 점차 이동하고 있습니다.
ColorScheme은 primarySwatch보다 훨씬 더 정교하고 포괄적인 색상 체계입니다. primary, secondary, tertiary 같은 주요 색상뿐만 아니라, 각 색상 위에 표시될 콘텐츠(텍스트, 아이콘)의 색상(onPrimary, onSecondary 등), 그리고 앱의 표면(surface), 배경(background), 오류(error) 색상까지 명시적으로 정의합니다. 이를 통해 다크 모드 전환이나 동적 색상(Dynamic Color) 적용이 훨씬 더 용이해집니다.
primarySwatch를 이용한 ColorScheme 생성 (과도기적 방법)
Flutter는 기존 primarySwatch 기반 코드와의 호환성을 위해 primarySwatch로부터 ColorScheme을 생성하는 편리한 방법을 제공합니다. 이는 M3 테마로 전환하는 좋은 첫걸음이 될 수 있습니다.
MaterialApp(
theme: ThemeData(
// Material 3 사용 활성화
useMaterial3: true,
// swatch로부터 ColorScheme을 생성
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.deepPurple,
// (선택) 일부 색상을 직접 지정하여 커스터마이징 가능
// brightness: Brightness.dark,
// accentColor: Colors.cyan, // 이제 secondary가 대신함
),
),
// ...
)
이 방법은 primarySwatch의 편리함을 유지하면서 ColorScheme의 구조적 이점을 활용할 수 있게 해줍니다.
명시적인 ColorScheme 정의 (권장되는 최신 방법)
하지만 가장 강력하고 권장되는 방법은 ColorScheme을 직접 명시적으로 정의하는 것입니다. 이 방법은 앱의 모든 색상을 완벽하게 제어할 수 있게 해주며, 디자이너의 의도를 코드에 가장 정확하게 반영할 수 있습니다.
MaterialApp(
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme(
brightness: Brightness.light,
primary: const Color(0xFF6750A4),
onPrimary: Colors.white,
secondary: const Color(0xFF625B71),
onSecondary: Colors.white,
error: const Color(0xFFB3261E),
onError: Colors.white,
background: const Color(0xFFFFFBFE),
onBackground: const Color(0xFF1C1B1F),
surface: const Color(0xFFFFFBFE),
onSurface: const Color(0xFF1C1B1F),
// ... tertiary, surfaceVariant 등 M3의 모든 색상을 정의할 수 있다.
),
),
// ...
)
primarySwatch에 대한 이해는 ColorScheme을 구성하는 데에도 큰 도움이 됩니다. `primary` 색상을 기준으로 `onPrimary` 색상을 어떻게 선택해야 할지, `surface`와 `background`는 어떻게 구분해야 할지에 대한 감각은 결국 조화로운 색상 팔레트, 즉 'swatch'에 대한 이해에서 비롯되기 때문입니다.
결론: 현명한 개발자의 선택 가이드
primarySwatch와 primaryColor 사이의 선택은 '무엇이 더 좋은가'의 문제가 아니라 '현재 상황에 무엇이 더 적합한가'의 문제입니다. 이 긴 여정을 통해 우리는 각 속성의 역할과 장단점, 그리고 미래를 살펴보았습니다. 마지막으로 여러분의 상황에 맞는 최종 가이드를 제시하며 글을 마무리하겠습니다.
- Flutter를 처음 배우는 초심자라면:
primarySwatch와Colors의 미리 정의된 색상들을 사용하세요. 가장 빠르고 쉽게 일관성 있는 앱을 만들며 Flutter 테마 시스템의 기본 원리를 익힐 수 있습니다. - 실제 프로덕션 앱을 개발 중이라면: 브랜드 색상을 기반으로 커스텀
MaterialColor를 만들어primarySwatch에 적용하세요. 이는 앱의 정체성을 확립하고 높은 완성도를 보장하는 가장 확실한 방법입니다. - Material 3를 도입하거나, 다크 모드 등 고도의 테마 제어가 필요하다면:
primarySwatch개념을 바탕으로ColorScheme을 직접 정의하는 방식으로 전환하세요. 이는 가장 현대적이고 강력하며, 미래 지향적인 접근 방식입니다. - 특정 부분의 색상만 수정하고 싶다면:
Theme위젯과copyWith를 활용하여primaryColor를 국소적으로 재정의하는 방법을 사용하세요.
결론적으로, primarySwatch는 Flutter 테마의 강력한 자동화 도구이며, primaryColor는 정밀한 수동 제어 도구입니다. 이 둘의 관계와 작동 방식을 정확히 이해함으로써 우리는 더 효율적이고 아름다운 Flutter 앱을 만들어 나갈 수 있습니다. 이제 여러분의 ThemeData를 자신 있게 설정할 시간입니다.
Post a Comment