[Flutter&Dart] pull_to_refresh Package 사용하기 - Easy Flutter Package #3

pull_to_refresh

아래로 당겨서(pull down) 새로고침(refresh), 위로 올려서(pull up) 추가 로드(loading)을 쉽게 구현할 수 있는 Package이다.

GridView, ListView 등에 사용할 수 있다.

pull_to_refresh | Flutter Package

설치하기

flutter pub add pull_to_refresh

 

사용법

1. SmartRefresher 위젯으로 감싸준다.

 

2. Controller를 Builder 밖에 선언해주고, 값을 입력해준다.

*안에 선언할 경우, refresh 후 스크롤이 멈추는 오류가 발생한다.

controller 선언

controller 값 입력

3. pull up, pull down 을 Enable하게 해주고, onRefresh, onLoading 함수를 지정해준다.

나의 경우에는 API에서 이미지를 불러서 기존에 리스트에 추가하는 함수를 동일하게 사용하고,

Refresh에만 List를 비워주는 코드를 한 줄 넣었다.

 

*마지막에는 꼭 refreshCompleted(); 와 loadComplete(); 를 써주어야 한다.

써주지 않으면 인디케이터가 끝없이 돌아간다.

refresh, loading 함수 지정

4. Header와 Footer를 커스터마이징 한다.

나는 default로 있던 text를 없애고 아이콘만 남기기 위해. text를 ''으로 입력해주고, spacing을 0으로 해주었다.

spacing은 기본이 15로 들어가있기 때문에, 없에지 않으면 아이콘만 남았을 때 미묘하게 좌측으로 쏠려있는 것을 확인할 수 있다.

 

이 외에도 다양한 Header, Footer 스타일이 있다.

 

Header와 Footer 커스터마이징

 

pull to refresh

 

최종 코드

body: SmartRefresher(
          header: const ClassicHeader(
            spacing: 0,
            releaseText: '',
            completeText: '',
          ),
          footer: const ClassicFooter(
            spacing: 0,
            loadingText: '',
            canLoadingText: '',
            idleText: '',
          ),
          enablePullDown: true,
          enablePullUp: true,
          onRefresh: () {
            catService.catImageList = [];
            catService.getRandomCatImageList();
            _refreshController.refreshCompleted();
          },
          onLoading: () {
            catService.getRandomCatImageList();
            _refreshController.loadComplete();
          },
          controller: _refreshController,
          child: GridView.count(
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
            crossAxisCount: 2,
            padding: const EdgeInsets.all(8),
            children: List.generate(catImageList.length, (index) {
              String catImage = catImageList[index];
              return GestureDetector(
                onTap: () {
                  if (catService.favoriteList.contains(catImage)) {
                    catService.deleteFavorite(catImage);
                  } else {
                    catService.addFavorite(catImage);
                  }
                },
                child: Stack(children: [
                  Positioned.fill(
                    child: Image.network(
                      catImage,
                      fit: BoxFit.cover,
                    ),
                  ),
                  Positioned(
                    bottom: 8,
                    right: 8,
                    child: Icon(
                      CupertinoIcons.heart_fill,
                      color: catService.favoriteList.contains(catImage)
                          ? Colors.amber
                          : Colors.transparent,
                    ),
                  )
                ]),
              );
            }),
          ),
        )

 

Easy Flutter Package Series

[Flutter&Dart] flutter_animate Package를 이용해서 Click Animation 만들기 - Easy Flutter Package #1

[Flutter&Dart] flutter_animate Package를 이용해서 Click Animation 만들기

[Flutter&Dart] shared_preferences Package 사용하기 - Easy Flutter Package #2

[Flutter&Dart] shared_preferences Package 사용하기

[Flutter&Dart] pull_to_refresh Package 사용하기  - Easy Flutter Package #3

[Flutter&Dart] pull_to_refresh Package 사용하기 - Easy Flutter Package #3

[Flutter&Dart] url_launcher Package 사용하기 - Easy Flutter Package #4

[Flutter&Dart] url_launcher Package 사용하기 - Easy Flutter Package #4