Pagy - A simple Flutter package for smooth pagination

Pagy - A Flutter Package for Pagination

Pagy is a Flutter package designed for smooth, efficient, and customizable pagination in your apps. It allows you to load data in chunks and display it seamlessly while handling API responses, pagination strategies, and UI components like shimmer effects.

Usage

Example: Paginating Property Data

Here’s an example of how you can use Pagy in your project to paginate through property data from an API:

import 'package:flutter/material.dart';
import 'package:pagy/pagy.dart';

import 'views/nav_screen.dart';

void main() {
  PagyConfig().initialize(
    baseUrl: "https://pug-elegant-jennet.ngrok-free.app/",
    pageKey: 'page',
    limitKey: 'limit',
  );

  runApp(const PagyExampleApp());
}

📄 Basic ListView Example

import 'package:flutter/material.dart';
import 'package:pagy/pagy.dart';

import '../models/property_model.dart';
import '../widgets/property_card_widget.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final PagyController<PropertyModel> pagyController = PagyController(
    endPoint: "api/properties",
    fromMap: PropertyModel.fromJson,
    limit: 3,
    responseMapper: (response) {
      return PagyResponseParser(
        list: response['data'],
        totalPages: response['pagination']['totalPages'],
      );
    },
    paginationMode: PaginationPayloadMode.queryParams,
  );

  @override
  void initState() {
    super.initState();
    pagyController.loadData();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PagyListView<PropertyModel>(
        itemsGap: 3,
        padding: const EdgeInsets.symmetric(horizontal: 14),
        controller: pagyController,
        placeholderItemCount: 3,
        shimmerEffect: true,
        placeholderItemModel: PropertyModel(),
        itemBuilder: (context, item) {
          return PropertyCardWidget(data: item);
        },
      ),
    );
  }
}