How to implement pagination in flutter

Pagination is a process of dividing data in smaller pages to enhance user experience and improve performance. Instead of displaying all the content at once, pagination allows users to navigate through different pages of data. In this tutorial we will learn how to implement pagination in Flutter applications.

Pagination in Mobile applications

In the context of mobile applications, pagination is commonly used in scenarios where there is a large amount of data to be displayed.  Such as lists, grids, or search results. By breaking the data into smaller chunks. It becomes easier for users to browse and locate the specific information they are looking for.

Anatomy of Pagination

Typically, pagination involves displaying a limited number of items or records on a single page and providing navigation controls. Such as next and previous buttons or swipe gestures, to move between pages. Users can move forward or backward through the pages to view additional content. Users can also scroll a list to bottom to navigate to next items.

The anatomy of pagination refers to the different components or elements involved in implementing pagination functionality within a user interface. Here are the key components typically found in the anatomy of pagination:

1. Data set: Pagination begins with a larger data set that needs to be divided into smaller, manageable sections or pages. This data set could be a list of items, search results, or any other collection of data.
   
2. Page size: Page size refers to the number of items or records displayed on each page. It determines how many items are visible to the user at a given time. Common page sizes include 10, 20, or 50 items per page, but it can vary depending on the specific application or requirements.
   
3. Current page indicator: The current page indicator visually communicates to the user which page they are currently viewing within the pagination sequence. It could be a highlighted page number, a progress bar, or any other visual cue that distinguishes the current page from the rest.
   
4. Pagination controls: Pagination controls allow users to navigate between different pages of content. These controls typically include:
   
5. Previous page button: Allows users to move to the previous page.
   
6. Next page button: Allows users to move to the next page.
   
7. Page number buttons: Display a set of page numbers for users to directly jump to a specific page.
   
8. These controls can be represented as buttons, links, or interactive elements that users can interact with to navigate through the paginated content.
   
9. Total pages indicator: The total pages indicator displays the total number of pages available in the paginated data set. It helps users understand the overall scope and extent of the content.
   

Benefits of Pagination

Benefits of pagination in mobile applications include:

1. Improved performance: Loading and rendering smaller portions of data at a time reduces the strain on device resources and improves the overall performance of the application.
   
2. Faster data retrieval: With pagination, only a subset of data is fetched from the server or database at a given time, resulting in faster data retrieval and reduced latency.
   
3. Enhanced user experience: Users can navigate through content more easily, avoiding information overload and allowing them to focus on specific sections of interest.
   
4. Reduced data consumption: By loading only the required data, pagination can help minimize data usage, particularly in scenarios where users may have limited or expensive data plans.

When implementing pagination in a mobile application. it’s essential to design clear navigation controls, provide visual cues to indicate the current page or position, and ensure a smooth transition between pages. Additionally, considering factors such as data loading indicators and caching mechanisms can further enhance the user experience.

Pagination in Flutter

Let’s see how to implement pagination in flutter

Full Code

class ItemsList extends StatefulWidget {
  @override
  _ItemsListState createState() => _ItemsListState();
}

class _ItemsListState extends State<ItemsList> {
  ScrollController _scrollController = ScrollController();
  List<String> _data = [];
  bool _isLoading = false;
  int _currentPage = 1;
  int _totalPages = 10;

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

  void _scrollListener() {
    if (_scrollController.offset >=
        _scrollController.position.maxScrollExtent &&
        !_scrollController.position.outOfRange) {
      if (!_isLoading && _currentPage < _totalPages) {
        setState(() {
          _isLoading = true;
          _currentPage++;
        });
        _fetchData();
      }
    }
  }

  Future<void> _fetchData() async {
    // Simulate API call delay
    await Future.delayed(Duration(seconds: 2));

    // Fetch data for the current page from your data source
    List<String> newData = await _getPaginatedData(_currentPage);

    setState(() {
      _data.addAll(newData); 
    });
  }

  Future<List<String>> _getPaginatedData(int page) async {
    // Fetch data for the given page from your data source
    // Example API call:
    // final response = await http.get('https://api.example.com/data?page=$page');
    // Parse the response and return the data as a list
    // return List<String>.from(json.decode(response.body));

    // Simulate fetching data
    return List<String>.generate(20, (index) => 'Item ${(page - 1) * 20 + index + 1}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pagination Example'),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: _data.length + 1,
        itemBuilder: (context, index) {
          if (index < _data.length) {
            return ListTile(
              title: Text(_data[index]),
            );
          } else if (_isLoading) {
            return Center(child: CircularProgressIndicator());
          } else {
            return Container();
          }
        },
      ),
    );
  }

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

}

ScrollController in Flutter

In Flutter, ScrollController is a class that allows us to control the scrolling behavior of a scrollable widget, such as ListView, GridView, SingleChildScrollView, etc. It provides methods and properties to manipulate the scroll position and listen to scroll events.

With a ScrollController, we can programmatically scroll to a specific position, within the scrollable widget. Determine the current scroll position and perform other actions based on the scrolling state.

Here we used ScrollController to check the scroll position of List View. When we scroll list and reaches at the end of the List. Then we request for the data of next page.

Conclusion 

In this tutorial we have learned that what is pagination and how to paginate a list view in Flutter. Hope you have understand and this tutorial will be helpful for you in you projects.