Flutter AppBar Scroll 시 color가 변할 때

Flutter가 업데이트 되며, 새로운 프로젝트를 생성하거나 Material3를 사용 시,

스크롤을 하게 되면 앱바의 색상이 변하는 모습을 경험한 적이 있을 것이다. 

 

 

스크롤 전

아래로 스크롤 한 후

 

스크롤을 하더라도 앱바의 색상을 유지시키고 싶다면,

 

AppBar의 옵션에서

  appBar: AppBar(
        backgroundColor: [your Color],
        title: Text('새하'),
        
        surfaceTintColor: Colors.transparent, // 1번
        scrolledUnderElevation: 0, // 2번

      ),

1번과 2번 둘 중에 하나를 택하여 변경해주면 된다.

 

 

1번과 2번을 동시에 사용해도 되지만,

 

 

 

스크롤 시 앱바의 색상의 변화를 없애고 싶다면, 

 

1번

surfaceTintColor 의 값을 transparent 으로 주면 된다. 

  appBar: AppBar(
        backgroundColor: [your Color],
        title: Text('새하'),
        surfaceTintColor: Colors.transparent,
      ),

 

or

 

2번

scrolledUnderElevation 의 값을 '0' 으로 주면 된다.

 appBar: AppBar(
        backgroundColor: [your Color],
        title: Text('새하'),
        scrolledUnderElevation: 0,
      ),

 

 

적용 후

 

이제 스크롤 시 앱바의 색상이 변하지 않는다!