Flutter/Dart 리스트 슬라이드 로딩 구현 SmartRefresher 사용법 / Refresh 새로고침 구현 하기 TIL # 47

 

요즘 뜻대로 코드가 잘 짜여서 기분이 좋다.

 

오늘은 회사앱에도 적용 SmartRefresher이라는 패키지에 대해서 소개해 볼까 한다. 

 

https://pub.dev/packages/pull_to_refresh/install

pull_to_refresh | Flutter Package

우선 이곳에 smartRefersher를 dependencies에 추가시켜주자.

 

 

dependencies:
  pull_to_refresh: ^2.0.0

다음은 홈페이지에서 가지고 온 예제이다.

 

주석 처리를 하면서 천천히 설명을 하는 시간을 가져보고자 한다.

 

그렇다. 날로 먹으려고 하는 거다.

 

 //리스트에 각각의 int값을 넣어준다.
  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];

  //컨트롤러를 지정해준다.
  RefreshController _refreshController =
  RefreshController(initialRefresh: true);

  //위로 슬라이드 하면 refresh가 된다.
  void _onRefresh() async{
    print('onRefresh');

    await Future.delayed(Duration(milliseconds: 1000));
    //1초 후에 아래에 코드가 실행이 된다.

    //컨트롤러한테 refresh가 완료되었음을 알려준다.
    _refreshController.refreshCompleted();
  }

  //아래로 슬라이드하면 loading이 된다.
  void _onLoading() async{
    print('onLoading');

    await Future.delayed(Duration(milliseconds: 1000));
    //1초 후에 아래에 코드가 실행이 된다.

    //아이템 리스트에 숫자 1을 더한 값의 아이템이 추가된다.
    items.add((items.length+1).toString());

    //mounted가 true일때 setState를 함으로써, 위젯을 업데이트 해준다.
    if(mounted)
      setState(() {

      });

    _refreshController.loadComplete();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SmartRefresher(
        enablePullDown: false, //refresh 비활성화
        enablePullUp: true, //loading 활성화
        header: WaterDropHeader(), //refresh 메서드를 활성화 했을 때, 물방울 표시에 로딩바가 뜬다. 다른 것도 많으니 홈페이지 참고
        footer: CustomFooter( //loading이 활성화 되었을 때 //내가 원하는 대로 커스텀 할 수 있다. 반대로 header에다가 CustomHeader()메서드를 사용할 수 있다.
          builder: (BuildContext context,LoadStatus mode){
            //위젯 타입에 body를 선언해주고,
            Widget body ;
            //mode 라고 넘어온 인자로, 
            //상황에 맞게 커스텀 할 수 있다.
            //커스텀 기호에 맞게 잘 꾸며서 쓸 수 있다.
            if(mode==LoadStatus.idle){
              body =  Text("pull up load");
            }
            else if(mode==LoadStatus.loading){
              body =  CupertinoActivityIndicator();
            }
            else if(mode == LoadStatus.failed){
              body = Text("Load Failed!Click retry!");
            }
            else if(mode == LoadStatus.canLoading){
              body = Text("release to load more");
            }
            else{
              body = Text("No more Data");
            }
            return Container(
              height: 55.0,
              child: Center(child:body),
            );
          },
        ),
        controller: _refreshController, //아까 생성한 컨트롤러 변수를 넣어준다.
        onRefresh: _onRefresh, //onRefresh (위)
        onLoading: _onLoading, //onLoading (아래)
        child: ListView.builder(
          itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),
          itemExtent: 100.0,
          itemCount: items.length,
        ),
      ),
    );
  }

내가 봐도 너무 친절히 설명을 써놓았다.

 

나 같은 경우는 onRefresh함수와 onLoading함수를 provider안에

 

넣어서 사용하고 있다.

 

FutureBuilder를 이용해서 서버에서 데이터를 받기 때문에,

 

값이 언제든 변할 수 있기 때문이다.

 

이렇듯 상황에 맞게 응용해서 쓰면 좋을 것 같다.

 

나도 이 글을 쓰면 서 깨달았다.

 

나 같은 경우는 onRefresh가 필요 없을 것 같아서 지웠다.

 

그래서 onLoading함수만 따로 사용을 하고 있다.

 

사실 어느 걸 쓰든 상관없다.

 

한쪽만 되는 걸 원하거나,

 

두쪽 다 원하거나의 차이다.

 

나는 채팅앱을 다루고 있기 때문에,

 

ListView.builder의 속성 중

reverse라는 속성을 true값을 주어,

 

기존에 사용하던 enablePullUp과

 

enablePullDown의 값을 반대로 주었다. 

 

 

오늘은 예제를 베껴와 날로 먹었다.

 

아무렴.. 그렇게 어렵지 않은 예제니 좋게 습득했다고 생각한다.

 

설명도 이보다 좋은 건 없다고 생각한다.

 

에헴... 오늘도 나는 고생했다. 파이팅!!