FLUTTER ECOSYSTEM

dangngocduc/flutter_paging

一個小型庫,支援在 Flutter 中為 ListView - GridView 載入無限資料。

flutter_paging 專案封面
Stars
32
Forks
10
最近推送(UTC)
2026年1月30日
專案狀態
未封存
Đặng Ngọc Đức GitHub avatar
GITHUB User

Đặng Ngọc Đức ↗

Flutter Developer

Hà Nội, Việt Nam官方網站 ↗
語言DartC++CMakeSwiftCHTMLKotlinObjective-C

技術主題

此儲存庫發佈的套件

使用的依賴

依賴清單 7 項

原始 README

以下為英文專案原文快照,最新內容請造訪 GitHub。

展開 / 收合專案 README

Paging

Pub Package
Star on GitHub style: effective dart MIT License


A Flutter package that supports pagination(load infinite) for ListView, GridView

Demo
https://raw.githubusercontent.com/dangngocduc/flutter_paging/HEAD/demo/list_view2.gif https://raw.githubusercontent.com/dangngocduc/flutter_paging/HEAD/demo/grid_view.gif https://raw.githubusercontent.com/dangngocduc/flutter_paging/HEAD/demo/sliver_demo.gif
DataSource
PageKeyedDataSource

To create a PagingListView or PagingGridView you will need create class which extended from PageKeyedDataSource.

When extended from PageKeyedDataSource, you will need override 2 methods is loadInitial and loadPageAfter.

Output of those function is a Tuple2 with item1 is List is List of data, end item2 is next page index.

Example: if your list start with page index is 0. -> on loadInitial output is Tuple2([...], 1) 1 is next page when load more item.

Example:

class ListViewDataSource extends paging.PageKeyedDataSource<int, Note> {
  NoteRepository noteRepository;

  ListViewDataSource(this.noteRepository);

  @override
  Future<Tuple2<List<Note>, int>> loadInitial(int pageSize) async {
    return Tuple2(await noteRepository.getNotes(0), 1);
  }

  @override
  Future<Tuple2<List<Note>, int>> loadPageAfter(int params, int pageSize) async {
    return Tuple2(await noteRepository.getNotes(params), params + 1);
  }
}
Display on UI

To display on UI, currently you can use PagingListView or PagingGridView.

Example:

      ListViewDataSource dataSource = ListViewDataSource(NoteRepository());

      PagingListView<Note>(
        itemBuilder: (context, data, child) => NoteWidget(data),
        pageDataSource: dataSource,
      ),