TIssue | Flutter | primaryColor 설정해도 AppBar 색상이 흰색인 이유

Flutter, primaryColor 설정해도 AppBar 색상이 흰색인 이유에 대한 글이다.

TIssue - Flutter, primaryColor 설정해도 AppBar 색상이 흰색인 이유

TIssue - Flutter - primaryColor 설정해도 AppBar 흰색인 이유

현상

ThemeData 위젯의 속성으로 primaryColor를 사용할 때, AppBar 색상이 흰색, 즉 변하지 않는 이슈가 있었다.

ThemeData - primaryColor 코드

AppBar가 흰색

원인

• Flutter 2.5 버전부터 primaryColor 속성은 deprecated 되었다.
• 최신 Flutter에서는 기본적으로 Material 3 디자인을 사용하는데, Material 3에서는 AppBar의 기본 색상이 surface 색상으로 설정되며, 이 것이 일반적으로 흰색으로 설정되어 있다.

해결방법

AppBar 색상만을 고려한다면 해결방법에는 여러가지가 있다. 하지만 다양한 방법중에서 가능하다면 ColorScheme 사용을 권장하고 있다. 이는 ColorScheme은 AppBar 뿐만 아니라, 애플리케이션 전체에걸쳐 일관된 색상 팔레트를 적용할 수 있기 때문이다. 또한 ColorScheme을 사용하면, 요즘 모바일 기기에서 기본적으로 제공하는 라이트모드와 다크 모드를 간편하게 구현할 수 있다는 장점도 있고, ColorScheme은 색상 대비를 고려해 설계되어 있기 때문에 애플리케이션의 접근성을 높히는데 장점이 있다.

ColorScheme을 이용해 AppBar 색상 적용하기

theme: ThemeData(
	appBarTheme: AppBarTheme(backgroundColor: Colors.red),
)

AppBar가 빨강

ColorScheme primiary 색상 적용하기

위와 같이 AppBar의 색상만 적용하는 것으로 애플리케이션 전반에 일관된 색상 팔레트를 적용할 수 있다고 말할 수 없다. 왜냐면 정말 위의 속성은 AppBar의 색상만 적용하기 때문이다. 해당 색상을 전체 애플리케이션의 요소들에 일관되게 적용시키기 위해서 colorScheme 속성을 추가해주는 것이 좋다.

theme: ThemeData(
	colorScheme: ColorScheme.light(primary: Colors.red)
	appBarTheme: AppBarTheme(backgroundColor: Colors.red),
)

이와 같이 설정해 주면, 아래 사진과 같이 주요 요소들이 일관된 색상으로 적용된다.

FloatingButtone이 빨강