How to paginate a ListView in Flutter

In this Google flutter code example we are going to learn how to paginate a ListView in Flutter.

The code is based on flutter version 1.0.0

Main.dart (App entry point)

import 'package:flutter/material.dart';
import 'week4/listview_pagination_task-5.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      //home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: ListViewPaginate(),
    );
  }
}

listview_pagination_task-5.dart

import 'package:flutter/material.dart';

class ListViewPaginate extends StatefulWidget {
  @override
  ListViewPaginateState createState() {
    return new ListViewPaginateState();
  }
}

class ListViewPaginateState extends State<ListViewPaginate> {
  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 += 30;
        _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(
        title: Text('ListView Paginate Example'),
      ),
      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()))),
    );
  }
}

Flutter Listview Pagination

If you have any questions or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.