[flutter] 플러터(Flutter)에서 페이징 처리 방법은?

18 Dec 2023

flutter

페이징은 애플리케이션에서 대규모 데이터를 처리하는 데 중요한 기능입니다. 사용자 경험을 향상시키기 위해 플러터에서 페이징 처리를 구현하는 방법을 알아봅시다.

1. ListView.builder 사용

ListView.builder(
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    // 아이템 빌더에서 아이템 렌더링
  },
)

2. Pagination 처리

ScrollController _scrollController = ScrollController();
bool _isLoading = false;

@override
void initState() {
  super.initState();
  _scrollController.addListener(() {
    if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
      _loadMoreData();
    }
  });
}

void _loadMoreData() async {
  if (!_isLoading) {
    setState(() {
      _isLoading = true;
    });
    // 추가 데이터를 가져오는 비동기 처리 로직
    setState(() {
      _isLoading = false;
      // 리스트에 데이터 추가
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 스크롤 컨트롤러를 ListView에 연결
    body: ListView.builder(
      controller: _scrollController,
      itemCount: itemCount,
      itemBuilder: (BuildContext context, int index) {
        if (index == itemCount - 1) {
          if (_isLoading) {
            return CircularProgressIndicator();
          } else {
            return Opacity(
              opacity: 0.0,
              child: CircularProgressIndicator(),
            );
          }
        }
        // 아이템 렌더링
      },
    ),
  );
}

위와 같이 ListView.builder와 ScrollController를 사용하여 페이징 처리를 구현할 수 있습니다. 사용자가 리스트를 스크롤할 때마다 추가 데이터를 가져와 무한 리스트를 구현할 수 있습니다.

플러터에서 페이징 처리는 사용자 경험을 향상시키는 핵심 기능이므로 신중하게 구현해야 합니다.

참고: Flutter ListView Class, Flutter ScrollController Class