[Flutter] 플러터 무한 스크롤 구현하기

Flutter + GetX로 무한스크롤 구현하기

안녕하세요  오늘은 Flutter와 GetX를 활용해서 무한스크롤(Infinite Scroll) 리스트를 만드는 방법을 정리해보겠습니다.

보통 앱에서 리스트 끝까지 내리면 자동으로 다음 데이터를 불러오는 기능이 필요하죠. 예를 들어 뉴스 피드, 쇼핑몰 상품 리스트, 채팅 로그 등이 여기에 해당합니다.

---

 프로젝트 준비

우선 get 패키지를 pubspec.yaml에 추가해줍니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.6.6

 Controller 만들기

리스트 데이터를 관리할 Controller를 만듭니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class InfiniteScrollController extends GetxController {
  // 데이터 리스트
  var items = <String>[].obs;

  // 로딩 상태
  var isLoading = false.obs;

  // 페이지 관리
  var page = 1;

  // ScrollController
  final scrollController = ScrollController();

  @override
  void onInit() {
    super.onInit();
    fetchItems(); // 최초 데이터 불러오기
    scrollController.addListener(_scrollListener);
  }

  // 스크롤 감지
  void _scrollListener() {
    if (scrollController.position.pixels >=
        scrollController.position.maxScrollExtent - 200) {
      fetchItems();
    }
  }

  // API 대신 더미 데이터 불러오기
  Future<void> fetchItems() async {
    if (isLoading.value) return;
    isLoading.value = true;

    await Future.delayed(const Duration(seconds: 1)); // API 호출 대기 시뮬레이션

    List<String> newItems =
        List.generate(20, (index) => "아이템 ${(page - 1) * 20 + index + 1}");

    items.addAll(newItems);
    page++;
    isLoading.value = false;
  }
}

 

 View 만들기

Obx와 ListView.builder를 사용해서 UI를 구성합니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'infinite_scroll_controller.dart';

class InfiniteScrollPage extends StatelessWidget {
  final controller = Get.put(InfiniteScrollController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("무한스크롤 예제")),
      body: Obx(() {
        return ListView.builder(
          controller: controller.scrollController,
          itemCount: controller.items.length + 1, // 로딩 인디케이터 포함
          itemBuilder: (context, index) {
            if (index < controller.items.length) {
              return ListTile(
                title: Text(controller.items[index]),
              );
            } else {
              return controller.isLoading.value
                  ? const Padding(
                      padding: EdgeInsets.all(16.0),
                      child: Center(child: CircularProgressIndicator()),
                    )
                  : const SizedBox.shrink();
            }
          },
        );
      }),
    );
  }
}

 

 실행 결과

앱을 실행하면 처음에 20개 데이터가 로드되고, 스크롤을 아래로 내리면 자동으로 다음 20개 데이터가 추가됩니다.
CircularProgressIndicator가 로딩 중에 표시되고, 데이터가 추가되면 리스트에 붙는 방식입니다.

---

 정리

• GetX의 **상태관리(Obx)**와 ScrollController를 활용해서 쉽게 무한스크롤을 구현할 수 있습니다.
• API 연동 시에는 fetchItems() 부분에서 실제 서버 데이터를 불러오면 됩니다.
• 성능 최적화를 위해 중복 호출 방지(isLoading 체크), 마지막 페이지 처리 등을 추가하면 더 안정적인 코드가 됩니다.

---