무한 스크롤 만들기 - PageView

스크롤 인디케이터 - Vertical
스크롤 인디케이터 - Horizontal
무한 스크롤 만들기 - Vertical
무한 스크롤 만들기 - Horizontal

이번에는 PageView 구조에서 무한 스크롤 기능을 만들어 보려고 한다.

앞서 만들었던 무한 스크롤들과 크게 다를 건 없는 기능이다.

Data

Lorem Picusm

Flutter

State Management - Provider

UI

Padding(
              padding: const EdgeInsets.symmetric(vertical: 80),
              child: PageView(
                onPageChanged: (int index) => value.changedPage(index),
                children: [
                  ...value.items.map((e) => SizedBox(
                        child: Image.network(
                          e,
                          fit: BoxFit.cover,
                        ),
                      )),
                  Container(
                    color: const Color.fromRGBO(71, 71, 71, 1),
                    child: const Center(
                      child: CircularProgressIndicator(
                        color: Colors.deepOrange,
                      ),
                    ),
                  ),
                ],
              ),
            ),

Provider

앞서 만들어본 무한 스크롤과 거의 동일하게 개발이 되었지만 여기서는 스크롤 값이 아닌 PageView에서 제공하는 onPageChanged() 함수를 활용해서 만들어 보았다.

  List<String> items = [];
  int currentIndex = 0;
  bool isMore = false;

Future<void> pageViewItems({
    bool isStart = true,
  }) async {
    if (!isMore) {
      isMore = true;
      notifyListeners();
      Future.delayed(Duration(milliseconds: isStart ? 0 : 2000), () {
        for (int i = 0; i < 3; i++) {
          items
              .add('https://picsum.photos/id/${i + currentIndex + 50}/300/400');
        }
        currentIndex = currentIndex + 3;
        isMore = false;
        notifyListeners();
      });
    }
  }

Git

https://github.com/boglbbogl/flutter_velog_sample/tree/main/lib/infinity_scroll

Result

마무리

여기까지 해서 무한 스크롤에 사용되는 대표적인 뷰들로 기능을 구현해 봤는데, 다음에는 라이브러리를 사용한 무한 스크롤 기능에 대해서도 작성을 해보려고 한다.