플러터(Flutter) pull to refresh 패키지 사용해서 RefreshIndicator 내 입맛대로 바꾸기 - [스크롤 로딩바 커스터마이징 하는법]

 

이번에 소개할 패키지는 pull_to_refresh라는 로딩 인디케이터를 변경할 수 있는 패키지이다.

https://pub.dev/packages/pull_to_refresh

pull_to_refresh | Flutter package

Pub.dev에 2533 LIKES인것을 보니, 꽤 많은 사람들이 사용하고 있고 어느정도 검증된 패키지라는 의미이다.

 

이제 어떻게 사용하는지 차근히 알아보자.

그전에 혹시 무슨 패키지인지 감을 안오는 분들을 위해서 동작 이미지를 간단히 보여주자면

 

우리가 Flutter내장 함수인 RefreshIndicator함수라고 생각하면 될 것 같다.

즉 위에서 밑으로(pull up)스크롤을 했을경우에는 새로고침!

밑에서 위로(pull down)했을경우에는 데이터를 계속해서 받아오는 기능에

로딩 Indicator를 커스터마이징을 쉽게 도와주는 패키지라고 생각하면 된다.

 

일단 기본적인 플러터 로딩 화면은(패키지 사용안했을 시)

대충 이런 느낌이다. 파란색에 가운데 동그랗게 돌아가고 끝인 형태이다.

하지만 이 패키지를 사용한다면

새로고침 기능

추가 데이터 받아오기 기능

 

이 패키지에 기능들을 보면

GridView, ListView등 여러 패키지에 사용하지 아주 적합하다고 한다.

그냥 부모로 SmartRefresher()를 감싸주면 끝이라고 한다.

이제 대충 구현방식은 알게 되었으니 바로 코드로 알아보자.

SmartRefresher에 들어갈 수 있는 요소들

일단 나는 다 사용하지는 않고 필요한 부분만 설명할 예정이다.

onRefresh: onRefresh,
onLoading: onLoading,
enablePullDown: true,
enablePullUp: true,
controller: refreshController,
footer : footer,

enablePullDown: true,
enablePullUp: true,

위 두개는 변수명에서도 알 수 있듯이 드래그 기능을 ON/OFF 할 것인지 유무이다.

그다음으로는 컨트롤러를 생성해주어야 한다.

controller: refreshController,

final refreshController = useState(RefreshController(initialRefresh: false)).value;

컨트롤러는 이렇게 생성해 주면 된다.

 

그리고 마지막으로 onRefresh와 onLoading부분을 설정해야 한다.

onRefresh: onRefresh,
onLoading: onLoading,

 

// 위에서 스크롤
void onRefresh() async {
  // 네트워크 모방 딜레이
  await Future.delayed(const Duration(milliseconds: 1000));
  refreshController.refreshCompleted();
}

// 아래에서 스크롤 (새로운 데이터 로딩)
void onLoading() async {
  await Future.delayed(const Duration(milliseconds: 1000));
  // items.value.add({items.value.length + 1}.toString());
  final newItems = List<String>.from(items.value)..add((items.value.length + 1).toString());
  items.value = newItems;
  refreshController.loadComplete();
}

Future.delayed는 서버에서 데이터를 받아올때 딜레이가 생기므로 모방하기 위해 주었다.

neewItems의 역활은 아래로 스크롤을해서 로딩바가 생긴 후 새로운 아이템을 생성해주기 위해

새로운 리스트를 만들어서 값을 추가해주었다. 여기서 새로운 리스트를 넣어서 만든 이유로는

내가 사용하는 hook의 동작원리와 연관이 있다.

 

위 코드에 보면 주석처리한

items.value.add({items.value.length + 1}.toString()); 가 보일 것이다.

처음에 아무생각없이 items라는 List[]에다가 add하는 방식으로 구현했는데,

값은 정상적으로 변하는데 내가 수동으로 hotReload를 해주어야만 화면이 재갱신되는 것이다.

즉, 값이 변하면 hooks에 useState()가 변화를 자동으로 감지해서 Rebuild를 하지 못하였다.

그래서 그 이유를 찾아보니

즉, List[]에 add메소드를 통해서 값을 추가해서 useState는 이를 상태변화로 감지 할 수 없다는 의미였다.

즉 위 내용은 내가 예전에 배운 깊은복사(Deep copy)와 얕은 복사(Shallow Copy)의 내용을 이해하면 왜 변화가 안되는지

쉽게 이해 할 수 있을 것이다.

즉, List[]에 단순이 add메소드를 사용하는것은 얕은복사이기에 참조가 변경되지 않아서 상태를 감지하지 못해서 재빌드가

되지 않는 것이다.

 

깊은 복사와 얕은복사의 관련된 내용은 여기서 적기에는 길어질 것 같아서 추후에 다룰 예정이다.

 

무튼 이렇게 onRefresh()와 onLoading() 두개의 함수 설명은 간단하게 마쳤는데,

마지막으로

refreshController.refreshCompleted();

 는 무엇인지 알아보자.

위 코드는 로딩후에 마지막으로 보여줄 로딩바가 무엇인지 보여주는 기능이다.

만약 Failed을 표시하고 싶다면 아래 코드처럼 바꾸면 된다.

refreshController.refreshFailed();

더 많은 기능들은 아래를 참고 하기 바란다.

  /// request complete,the header will enter complete state,
  ///
  /// resetFooterState : it will set the footer state from noData to idle
  void refreshCompleted({bool resetFooterState: false}) {
    headerMode?.value = RefreshStatus.completed;
    if (resetFooterState) {
      resetNoData();
    }
  }

  /// end twoLeveling,will return back first floor
  Future<void>? twoLevelComplete(
      {Duration duration: const Duration(milliseconds: 500),
      Curve curve: Curves.linear}) {
    headerMode?.value = RefreshStatus.twoLevelClosing;
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      position!
          .animateTo(0.0, duration: duration, curve: curve)
          .whenComplete(() {
        headerMode!.value = RefreshStatus.idle;
      });
    });
    return null;
  }

  /// request failed,the header display failed state
  void refreshFailed() {
    headerMode?.value = RefreshStatus.failed;
  }

  /// not show success or failed, it will set header state to idle and spring back at once
  void refreshToIdle() {
    headerMode?.value = RefreshStatus.idle;
  }

  /// after data returned,set the footer state to idle
  void loadComplete() {
    // change state after ui update,else it will have a bug:twice loading
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      footerMode?.value = LoadStatus.idle;
    });
  }

  /// If catchError happen,you may call loadFailed indicate fetch data from network failed
  void loadFailed() {
    // change state after ui update,else it will have a bug:twice loading
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      footerMode?.value = LoadStatus.failed;
    });
  }

  /// load more success without error,but no data returned
  void loadNoData() {
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      footerMode?.value = LoadStatus.noMore;
    });
  }

  /// reset footer noData state  to idle
  void resetNoData() {
    if (footerMode?.value == LoadStatus.noMore) {
      footerMode!.value = LoadStatus.idle;
    }
  }

 

---

그리고 추가적으로

header: const WaterDropMaterialHeader(),

header를 설정할 수 있다.

 

위와 같이 Pull-down시 재미있는 애니메이션 효과를 추가할 수 있다.

추가 가능한 효과들

상세한 내용은 pub.dev에 잘 나와있으니 참고하자

 

---

그리고 마지막으로 footer를 설정할 수 가 있다.

로딩시 보여줄 텍스트 부분을 설정하는 부분이라 생각하면 된다.

 

footer를 설정하지 않을시 (기본 텍스트로 설정 됨)

 

footer 적용시

 

footer: CustomFooter(
  builder: (context, mode) {
    Widget body;
    if (mode == LoadStatus.idle) {
      body = const Text("위로 끌기");
    } else if (mode == LoadStatus.loading) {
      body = const CupertinoActivityIndicator();
    } else if (mode == LoadStatus.failed) {
      body = const Text("데이터 불러오기 실패!");
    } else if (mode == LoadStatus.canLoading) {
      body = const Text("더 많은 내용 불러오기");
    } else {
      body = const Text("추가할 데이터 없음");
    }
    return SizedBox(
      height: 55.0,
      child: Center(child: body),
    );
  },
),

 

일단 이정도만 알게 된다면 pull_to_refresh의 기본적인 기능들은 다 사용한다고 볼 수 있을 것 같다.

더 전문적인 부분은 (예를들어 다국어 지원부분)은 개발자 페이지를 참고해서 개발해보자.

추가적인 질문은 댓글을 통해 달아주기 바란다.

 

깃허브 풀코드

https://github.com/baka9131/dartPackage-pullToRefresh-usage

GitHub - baka9131/dartPackage-pullToRefresh-usage

 

전체 코드

코드 보기

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends HookWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final items = useState(["1", "2", "3", "4", "5", "6", "7", "8"]);
    // refresh 컨트롤러
    final refreshController = useState(RefreshController(initialRefresh: false)).value;

    // 위에서 스크롤
    void onRefresh() async {
      // 네트워크 모방 딜레이
      await Future.delayed(const Duration(milliseconds: 1000));
      refreshController.refreshCompleted();
    }

    // 아래에서 스크롤 (새로운 데이터 로딩)
    void onLoading() async {
      await Future.delayed(const Duration(milliseconds: 1000));
      // items.value.add({items.value.length + 1}.toString());
      final newItems = List<String>.from(items.value)..add((items.value.length + 1).toString());
      items.value = newItems;
      refreshController.loadNoData();
    }

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text('Pull to refresh'),
        titleTextStyle: const TextStyle(color: Colors.black),
      ),
      body: SmartRefresher(
        onRefresh: onRefresh,
        onLoading: onLoading,
        enablePullDown: true,
        enablePullUp: true,
        controller: refreshController,
        header: const WaterDropMaterialHeader(),
        footer: CustomFooter(
          builder: (context, mode) {
            Widget body;
            if (mode == LoadStatus.idle) {
              body = const Text("위로 끌기");
            } else if (mode == LoadStatus.loading) {
              body = const CupertinoActivityIndicator();
            } else if (mode == LoadStatus.failed) {
              body = const Text("데이터 불러오기 실패!");
            } else if (mode == LoadStatus.canLoading) {
              body = const Text("더 많은 내용 불러오기");
            } else {
              body = const Text("추가할 데이터 없음");
            }
            return SizedBox(
              height: 55.0,
              child: Center(child: body),
            );
          },
        ),
        child: ListView.builder(
          itemExtent: 50.0,
          itemCount: items.value.length,
          itemBuilder: (context, index) => Card(
            child: Center(
              child: Text(
                items.value[index],
              ),
            ),
          ),
        ),
      ),
    );
  }
}