Flutter

SliverAppBar에 Sliver 겹치는 방법

붕어사랑 티스토리 2024. 7. 11. 18:42
반응형

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

 

 

 

 

아니 그럼 어쩌라고?

 

 

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

 

 

 

하는 방법은 다음과 같다

 

 

 

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()
        
        ...

 

 

 

 

 

반응형