SliverAppBar에 Sliver 겹치는 방법

결론부터 말하면 안된다. 찾아봤는데 방법이 없다

 

 

 

 

아니 그럼 어쩌라고?

 

 

해결방법은 직접 구현하는 것이다.

 

 

 

하는 방법은 다음과 같다

 

 

 

1. Stack위젯을 만든다

2. SliverAppBar에 해당되는 부분을 Container로 만든다

3. SingleChildScrollView를 그 위에 덮는다

4. 스크롤뷰 탑에다가 패딩을 왕창 물려줘서 AppBar부분 밑까지 내려준다

5. ScrollController를 하나 만들어 스크롤뷰에 물려준다

 

 

여기서 한가지 중요한 부분이 있다.

 

 

ScrollController는 Listenable이다 !!!

 

한마디로 AnimatedBuilder를 사용할 수 있다는것!!!

 

 

AnimatedBuilder의 장점은 child를 이용해 위젯트리 중간에 위젯만 리빌드하면서 애니메이션을 줄 수 있다.

 

 

이를 이용해 2번에 해당되는 Container를 SliverAppBar 형태로 만들 수 있는 것이다.

 

 

 

아래는 대충 와꾸의 예제임

Stack(
    children: [
      AnimatedBuilder(
        animation: _scrollController,
        builder: (context, child) {
          if(!_singleScroll.hasClients) return Container();
          double imageHeight = _scrollController.position.pixels를 이용해 계산;
          double opacity = _scrollController.position.pixels를 이용해 계산;

          return Visibility(
            visible: opacity > 0,
            child: Opacity(
              opacity: opacity,
              child: Container(
                height: imageHeight,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image:
                        CachedNetworkImageProvider(viewModel.bgImgUrl),
                    fit: BoxFit.cover,
                  ),
                ),
                child: child,
              ),
            ),
          );
        },
        child: 재활용할 위젯(),
        ),
        SingeChildScrollView()
        
        ...