How To Paginate Listview Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

A customizable pagination package for Flutter. This package can be used to fetch and display data from an API page by page.

How To Paginate Listview Using Flutter Android App

Paginate Listview
Complete Code For Paginate Listview In Flutter
main.dart

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  static final List<int> _listData = List<int>.generate(200, (i) => i);
  ScrollController _scrollController = ScrollController();

  int _listOffset = 0;
  int _listLimit = 10;
  bool _isLoading = false;

  List<int> _dataForListView = _listData.sublist(0, 30);

  _scrollListener() {
    if (_scrollController.position.pixels ==
        _scrollController.position.maxScrollExtent) {
      setState(() {
        _isLoading = true;
        _listLimit += 50;
        _listOffset = _listLimit + 1;
        Future.delayed(Duration(seconds: 3)).then((_) {
          _dataForListView
            ..addAll(
                List<int>.from(_listData.sublist(_listOffset, _listLimit)));
        });
        _isLoading = false;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightGreen,
        title: Text('Listview Paginate'),
      ),
      body: ListView(
          controller: _scrollController,
          padding: EdgeInsets.all(8.0),
          children: _dataForListView
              .map((data) => ListTile(title: Text("Item $data")))
              .toList()
            ..add(ListTile(
                title: _isLoading
                    ? CircularProgressIndicator()
                    : SizedBox()))),
    );
  }
}

Related Post