Home > OS >  Pagination with ListView.bulider in Flutter
Pagination with ListView.bulider in Flutter

Time:07-30

I'm new at flutter and I have been searching for the good results in pagination.

Pagination in flutter listview is a way to load the data when you reach the end of the list. The pagination is used to load the data in part-wise. Pagination in flutter listview divides the data in page manner like page 1 and page.

Need to load the list of data 10 items on each page input: Implement pagination

output:

<1 2 3 ... > items per page 10 ^

CodePudding user response:

You can use loadmore package.

  body:  RefreshIndicator(
          child: LoadMore(
            isFinish: count >= 10,
            onl oadMore: _loadMore,
            child: ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  child: Text(list[index].toString()),
                  alignment: Alignment.center,
                );
              },
              itemCount: count,
            ),
            whenEmptyLoad: false,
            delegate: DefaultLoadMoreDelegate(),
            textBuilder: DefaultLoadMoreTextBuilder.chinese,
          ),
          onRefresh: _refresh,
        ),

CodePudding user response:

You can use the Pull To Refresh package for pagination in Flutter.

CodePudding user response:

You can use Flutter's NotificationListener<ScrollNotification>(...) widget.

Sample:

import 'package:flutter/material.dart';

class PaginatedListView extends StatefulWidget {
  const PaginatedListView({
    required this.onNext,
    this.nextPageRatio = 1,
    this.hasNextPage = false,
    required this.child,
    this.loadingIndicator,
    super.key,
  }) : assert(
          nextPageRatio >= 0 && nextPageRatio <= 1,
          '[nextPageRatio] should be between 0...1',
        );

  final VoidCallback onNext;
  final double nextPageRatio;
  final bool hasNextPage;
  final SliverList child;
  final Widget? loadingIndicator;

  @override
  State<PaginatedListView> createState() => _PaginatedListViewState();
}

class _PaginatedListViewState extends State<PaginatedListView> {
  final ScrollController _controller = ScrollController();

  double _currentMaxScrollExtent = 0;

  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_controller.position.maxScrollExtent == 0 && widget.hasNextPage) {
        widget.onNext();
      }
    });
  }

  bool _onNotification(ScrollNotification notification) {
    if (!widget.hasNextPage) {
      return false;
    }

    final double maxScrollExtent =
        notification.metrics.maxScrollExtent * widget.nextPageRatio;

    if (notification.metrics.pixels >= maxScrollExtent &&
        _currentMaxScrollExtent < maxScrollExtent) {
      _currentMaxScrollExtent = maxScrollExtent;
      widget.onNext();
    }

    return false;
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: _onNotification,
      child: CustomScrollView(
        controller: _controller,
        physics: const AlwaysScrollableScrollPhysics(),
        slivers: <Widget>[
          widget.child,
          if (widget.hasNextPage)
            SliverToBoxAdapter(
              child: Center(
                child: widget.loadingIndicator ??
                    const CircularProgressIndicator(),
              ),
            ),
        ],
      ),
    );
  }
}
  • Related