아무나 빌려가세요

스크롤을 올리거나 내릴 때 투명도를 주는 방법 본문

플러터

스크롤을 올리거나 내릴 때 투명도를 주는 방법

빌라노바 2022. 1. 26. 20:14

스크롤을 조절하기 위해 변수를 선언한다.

final _scrollController = ScrollController();

투명도를 조절하기 위한 함수를 선언한다.

 double scrollOpacity = 1.0; // 첫시작은 전부 보이게 설정한다.

  onScroll() {
    setState(() {
 
      double offset = _scrollController.offset;
      if (offset < 0) {
        offset = 0;
      } else if (offset > 100) {
        offset = 100;
      }
      scrollOpacity = 1 - offset / 100; 
      // 스크롤을 올릴때마다 0으로 수렴한다. 1을 빼지 않으면 반대로 적용
    });
 
  }

함수를 스크롤에 리스너로 등록한다

 @override
  void initState() {
    _scrollController.addListener(onScroll);
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.removeListener(onScroll);
    super.dispose();
  }

스크롤뷰에 컨트롤러를 적용하고 투명도를 주고싶은곳에 scrollOpacity를 적용한다.

 child: CustomScrollView(
                physics: BouncingScrollPhysics(), 
                controller: _scrollController,
                slivers: <Widget>[
                  SliverAppBar(
                    leading: Opacity(
                      opacity: scrollOpacity,
                      child: IconButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        icon: Icon(Icons.arrow_back),
                        color: Colors.black,
                      ),
                    ),

'플러터' 카테고리의 다른 글

openAPI http를 이용해 데이터 가져오기  (0) 2022.01.26
CarouselSlider에 youtube 띄우기  (0) 2022.01.26
flutter Image Picker를 이용한 사진 선택,서버로 보내기  (0) 2022.01.24
Map  (0) 2022.01.17
고차함수 (first order)  (0) 2022.01.17