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()
...
반응형