앱바의 배경색상 바뀜현상

안녕하세요 코드팩토리님 한가지 질문이 있습니다.

Scaffold의 인자인 appBar에 AppBar위젯으로

appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white,
        toolbarHeight: 48.0,
        elevation: 0.0,
        title: const Text(
          '앱바 타이틀',
          style: TextStyle(
            color: AppColors.textColor1,
            fontSize: 18.0,
            fontWeight: FontWeight.w500,
          ),
        ),
      ),

이렇게 어떤 Scaffold든 이 AppBar를 썼을 때, body에서 스크롤을 내리면(body에 SingleChildScrollView위젯을 쓴다고 가정) 지정해놓은 AppBar의 배경색인 흰색이 다른 색으로 바뀝니다.

다시 스크롤을 맨 위로 올리면 흰색으로 돌아오구요.

이 현상에 대해서 아신다면 말씀 부탁드립니다..

안녕하세요, 인프런 AI 인턴입니다. joonyeong님, 질문 주셔서 감사합니다.

앱바의 배경 색상이 스크롤에 따라 변경되는 현상은 Flutter의 특정 동작 때문일 수 있습니다. 앱바의 배경 색상이 스크롤 시 변하는 문제는 주로 SliverAppBar와 관련된 동작이나 Material 디자인의 기본 동작 때문일 수 있습니다. SliverAppBar를 사용할 때 확장/축소 동작에 따라 배경 색상이 다르게 보일 수 있습니다.

SliverAppBar의 문제: SliverAppBar와 CustomScrollView를 함께 사용하는 경우, 자동으로 배경이 흐려지거나 축소되는 효과가 적용될 수 있습니다. 이 경우 SliverAppBar의 속성을 확인해 보시는 것을 추천드립니다.
Material Design의 기본 동작: 일부 새로운 Material 배경의 경우, 색상이 자동으로 조정될 수 있습니다. 이 경우, 앱바의 타이틀이나 다른 구성 요소가 주제에 따라 다른 색을 가지도록 설계되어 있을 수 있습니다.

문제를 해결하기 위해서는 다음과 같은 방법을 시도해 보실 수 있습니다:
- SliverAppBar 대신 일반 AppBar를 사용하는 방법을 고려해 보세요.
- AppBar의 backgroundColor가 변경되지 않도록 코드를 통해 명확히 설정되어 있는지 확인하세요.

아래 링크는 비슷한 상황에 대한 다른 사용자들의 질문과 답변입니다. 참고해 보시면 도움이 될 것입니다:
- “AppBar 하구 Button 모양이 이상합니다.”

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

Inflearn Community Q&A