[flutter] colors.white가 연보라색으로 보일때 해결법

 

 2024년 10월, 오랜만에 플러터 앱 업데이트하려고 켰는데 또 flutter.h 오류가 떠서 다시 pod 삭제하고 새로 셋팅하다가 플러터 버전을 업그레이드 해버렸다. 그 후, 다른 색상들은 잘 적용되지만 Colors.white로 적용한 부분이 모두 연보라색으로 적용되어버린다.

커뮤니티에 질문하니 테마가 변경되어서 그렇다고 답변이 와서 찾아보았다.

 

이번 플러터 업데이트 된 부분을 살펴보았다.

1. MD3(Material Design 3) 적용

Material Design 3가 적용되면서 색상, 텍스트스타일, 컴포넌트 모양 등이 바뀌었다. 다크모드와 밝은 모드 간의 색상 대비를 더 강하게 적용해서 Colors.white와 같은 기본 색상이 예상치 못하게 보일 수도 있다고 한다.

 

2. ColorScheme이 정교하게 적용되어 테마의 일관성을 높였다.

ThemeData에서 색상을 지정할 때 ColorScheme.light() 또는 ColorScheme.dark() 메서드를 사용해 설정하는 것이 권장되며, 단순히 Colors.white를 사용하는 것이 아니라 전체적인 테마 팔레트를 따르는 방식이 일반적이다. 따라서, background 색상이나 onBackground 색상 설정이 명확

하지 않으면 자동으로 다른 색상으로 변환될 수 있으니 설정을 명확히 할 필요가 있다.

 

3. 기본 색상 값의 변화

Flutter는 업데이트 때마다 색상이나 스타일의 기본값을 변경할 수 있. 만약 primaryColor, backgroundColor 등을 설정하지 않고 ThemeData를 사용할 경우, 기본 설정이 업데이트된 MD3 스타일을 따라 변경될 수 있다.

 

해결방법

MaterialApp > ThemeData > useMaterial3: false

 

material3를 꺼주었더니 정상적으로 흰색이 보인다!