스크롤 시 천천히 나타나는 Toss Appbar의 동작을 구현해본 예제입니다.
먼저 CustomScrollView
를 포함하고 있는 State
에 ScrollController
를 정의해 주어야 합니다.
final _scrollController = ScrollController();
double scrollOpacity = 0; //투명도 참조 값
void initState() {
_scrollController.addListener(onScroll);
super.initState();
}
void dispose() {
_scrollController.removeListener(onScroll);
super.dispose();
}
onScroll
함수를 정의해, 현재 스크롤 위치가 0일때 ~ 100일때
까지의 값을 받아 scrollOpacity
에 전달합니다.
스크롤을 빠르게 했을 경우,
0~100사이에 들어가지 않고 -로 가거나, 100이상으로 갈 수 있으므로,
넘어갔을 경우에도scrollOpacity
를 갱신해주는 편이 좋습니다.
onScroll() {
setState(() {
//opacity = _scrollController.offset;
double offset = _scrollController.offset;
if (offset < 0) {
offset = 0;
} else if (offset > 100) {
offset = 100;
}
scrollOpacity = offset / 100;
});
}
scrollOpacity
를 받아와 title, border, background에 적용시킵니다.
Opacity
를 통해 감싸주면 Widget
에 투명도를 적용시킬 수 있습니다.
//border 적용 예제
Opacity(
opacity: scrollOpacity,
child: Container(
color: colorLine,
height: 1,
)
),
//배경 적용 예제
backgroundColor: colorBackGround.withOpacity(scrollOpacity),
전체 소스는 git페이지에서 조회할 수 있습니다.
Page 소스코드: Git: ISHNN032/toss_clone/ . . . /homepage.dart
전체 소스코드: Git: ISHNN032/toss_clone