Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- Spring
- 로드밸런서
- grafana
- backend
- github
- 후기
- 성능테스트
- EC2
- 에프랩
- Flutter
- nGrinder
- 알고리즘
- FLAB
- error
- 자바백엔드
- AWS
- 레디스
- MySQL
- 백엔드
- 트러블슈팅
- F-Lab
- redis
- 멘토링
- 도커
- 플러터
- java
- 코딩테스트
- 데이터구조
- 자바
- 부트캠프
Archives
- Today
- Total
민스씨의 일취일장
TIssue | Flutter | primaryColor 설정해도 AppBar 색상이 흰색인 이유 본문
Mobile/Flutter & Dart
TIssue | Flutter | primaryColor 설정해도 AppBar 색상이 흰색인 이유
읻민스 2024. 12. 20. 17:43반응형
Flutter, primaryColor 설정해도 AppBar 색상이 흰색인 이유에 대한 글이다.
TIssue - Flutter, 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),
)
ColorScheme primiary 색상 적용하기
위와 같이 AppBar의 색상만 적용하는 것으로 애플리케이션 전반에 일관된 색상 팔레트를 적용할 수 있다고 말할 수 없다. 왜냐면 정말 위의 속성은 AppBar의 색상만 적용하기 때문이다. 해당 색상을 전체 애플리케이션의 요소들에 일관되게 적용시키기 위해서 colorScheme 속성을 추가해주는 것이 좋다.
theme: ThemeData(
colorScheme: ColorScheme.light(primary: Colors.red)
appBarTheme: AppBarTheme(backgroundColor: Colors.red),
)
이와 같이 설정해 주면, 아래 사진과 같이 주요 요소들이 일관된 색상으로 적용된다.
728x90
반응형
'Mobile > Flutter & Dart' 카테고리의 다른 글
TIssue | Flutter | Text 위젯에서 textAlign 속성지정으로 가운데 정렬이 되지 않는 이유 (0) | 2024.12.26 |
---|---|
TIssue | Android Studio | Flutter | 시뮬레이터 DEBUG 빨강 리본 제거하기 (0) | 2024.12.24 |
Flutter Log | Toy Project | 윷놀이 앱 만들기 (0) | 2024.02.06 |
Flutter Log | Widget 정리 (0) | 2024.02.06 |
Dart Log | 다트 주요 개념 기록 (0) | 2024.02.06 |