[Flutter] 스크롤 할 때 app bar 색상 변경 이슈

문제 상황

Flutter에서 app bar를 그대로 사용하면 스크롤 할 때 색깔이 변경되는 문제가 있다.

 
[변경 전]

스크롤 할 때 app bar 색깔이 흰색 -> 회색으로 변함

 
 

해결

원인은 기본적으로 스크롤할 때 그림자가 지도록 설정 되어있기 때문에,
그림자가 생기면서 색깔이 진해지는 것이다.
 

이를 해결하기 위해선 AppBar 안에 scrolledUnderElevation: 0 을 추가하면 된다.

return Scaffold(
    appBar: AppBar(
        scrolledUnderElevation: 0, // 해당 부분 추가
        ...
    ),
    ...
);

 
 

[변경 후]

title 부분 색깔 고정

 
 
이제 "알림" title 부분 app bar는 색깔이 변하지 않는다!
근데 아직 최상단 app bar는 스크롤 할 때 색상이 변한다.
 
이는 Home.dart 위젯 내부 Scaffold의 body에서 _selectedIndex에 따라
{화면번호}.dart의 화면 위젯을 띄우도록 했는데

지금은 내부 화면의 app bar에만 적용했기 때문이다.
 

즉, 별개의 app bar를 사용하는 것이 원인이므로 Home.dart의 app bar도 수정해주면,

[최종]

최상단 앱바에도 적용

 
 
오류 없이 잘 작동한다!