Flutter CustomScrollView AppBar에 Opacity 적용하기 : Toss클론코딩

ISHNN·2021년 8월 4일
0

Toss 클론코딩

목록 보기
1/4

스크롤 시 천천히 나타나는 Toss Appbar의 동작을 구현해본 예제입니다.


먼저 CustomScrollView를 포함하고 있는 StateScrollController를 정의해 주어야 합니다.

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

profile
일 말고 다른 거 하고 싶을 때 싸놓은 코드 기록 보관소

0개의 댓글