[Flutter] AppBar 배경 색상 사라짐, 색깔 지정 방법

분명 Flutter 공부를 시작하면서 작성했던 코드와 동일한 코드인데, 갑자기 AppBar의 색상이 적용되지 않았다.

무엇이 문제일까 고민하던 중, 최근 Flutter를 3.16.5 버전으로 업데이트 한 것이 생각났다.

공식 문서를 찾아본 결과 Flutter 최신 버전 부터 변경되는 일부 사항이 존재했다.

 

 

위와 같이 Flutter 3.16 버전 이후 부터는 기본적으로 Material 3 디자인이 적용 된다.

이 때문에 기존 기본으로 적용되던 파란색의 AppBar 배경색이 사라진 것이었다.

 

따라서 Material 3 부터는 AppBar에 색상을 넣고 싶다면, 아래와 같이 AppBar 위젯에서 색상을 별도로 지정해 주어야 한다.

 AppBar(
      backgroundColor: Colors.blue, // 배경색 별도 지정 필요
      title: const Text('App Bar Title'),
    ),

Material Design for Flutter

Migrating a Flutter app to Material 3 | Codemagic Blog