[플러터 Flutter] primarySwatch와 primaryColor는 무슨 차이일까?

 

primarySwtach와 primaryColor는 모두 앱의 기본 테마 색상을 설정하는데 사용되지만, 각기 다른 방식으로 작동합니다.
이 둘의 차이점을 이해하려면 색상의 적용 범위와 사용 방식에서 차이가 있음을 알아야 합니다.

 

---

PrimarySwatch

 

• 역할
  • 앱의 기본 색조 팔레트를 설정하는 데 사용됩니다.
• 값
  • MaterialColor 타입을 사용하며, 이는 여러 단계의 색상 명도(50, 100, 200… 900)가 포함된 색상 팔레트입니다.
• 적용 범위
  • 기본적으로 앱의 전체적인 테마 색상을 제공합니다.
  • 예를 들어, 버튼, 앱바, 토글 버튼 등의 다양한 UI 요소에서 이 색조 팔레트에 있는 적절한 색상이 자동으로 선택됩니다.
• 자동 명도 조절
  • primarySwatch는 앱의 다양한 요소에 적절한 명도의 색상을 자동으로 적용합니다.
  • 예를 들어, 버튼은 팔레트에서 어두운 색을 사용하고, 배경은 밝은 색을 사용할 수 있습니다.

 

---

PrimaryColor

 

• 역할
  • 앱의 주요 색상을 지정하는 데 사용됩니다.
• 값
  • Color 타입을 사용하며, 단일 색상 값을 설정합니다.
• 적용 범위
  • 주로 앱바, 플로팅 액션 버튼(FAB), 탭 바 등의 특정 UI 요소에만 직접적으로 사용됩니다.
  • 이는 앱의 전반적인 색조와 관련된 모든 위젯에 영향을 미치지는 않습니다.
• 수동 설정
  • primaryColor는 앱의 기본 색상을 한 가지로 명확히 정의할 때 사용되며, 명도에 따른 색상 변형이 없습니다.
  • 한 가지 색상을 고정하여 사용하고자 할 때 유용합니다.

 

---

 

요약하자면

	primarySwatch	primaryColor
타입	MaterialColor (색상 팔레트)	Color (단일 색상)
적용 범위	앱의 여러 요소에서 자동으로 적절한 명도의 색상 사용	특정 UI 요소에만 적용 (주로 AppBar, FAB 등)
자동 색상 명도 조정	자동으로 명도에 맞게 다양한 색상 사용	고정된 단일 색상 사용
사용 목적	앱 전체의 색상 테마를 제공하는 색상 팔레트 설정	특정 UI 요소에 대한 주요 색상 지정

 

primarySwatch == 

앱의 다양한 위젯에서 일관된 색상 테마를 자동으로 적용하고 싶을 때

 

primaryColor ==

특정 요소에 단일 색상을 명확히 지정하고 싶을 때