ff_pagination 1.0.0

A customizable pagination widget for Flutter with support for circular, rounded, and styled page buttons.

example/lib/main.dart

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

void main() {
  runApp(const PaginationDemoApp());
}

class PaginationDemoApp extends StatelessWidget {
  const PaginationDemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pagination Demo',
      home: PaginationDemoPage(),
    );
  }
}

class PaginationDemoPage extends StatefulWidget {
  @override
  State<PaginationDemoPage> createState() => _PaginationDemoPageState();
}

class _PaginationDemoPageState extends State<PaginationDemoPage> {
  int currentPage = 1;
  final int maxPages = 1000; // Use this to keep things in bounds

  @override
  Widget build(BuildContext context) {
    // Ensure currentPage is in bounds
    if (currentPage > maxPages) currentPage = maxPages;

    return Scaffold(
      appBar: AppBar(title: const Text('FF Pagination Demo')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Current Page: $currentPage',
            style: const TextStyle(fontSize: 20),
          ),
          const SizedBox(height: 20),

          // Pagination with teal active style
          Pagination(
            numOfPages: maxPages,
            selectedPage: currentPage,
            pagesVisible: 4,
            onPageChanged: (page) {
              setState(() {
                currentPage = page.clamp(1, maxPages);
              });
            },
            activeTextStyle: const TextStyle(color: Colors.white),
            activeBtnStyle: TextButton.styleFrom(
              backgroundColor: Colors.teal,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            ),
            inactiveTextStyle: const TextStyle(color: Colors.black),
            inactiveBtnStyle: TextButton.styleFrom(backgroundColor: Colors.grey[300]),
            spacing: 6,
          ),

          const SizedBox(height: 20),

          // Pagination with showFirstLastButtons
          Pagination(
            numOfPages: maxPages,
            selectedPage: currentPage,
            pagesVisible: 3,
            onPageChanged: (page) {
              setState(() {
                currentPage = page.clamp(1, maxPages);
              });
            },
            showFirstLastButtons: true,
            activeBtnStyle: TextButton.styleFrom(backgroundColor: Colors.orange),
            inactiveBtnStyle: TextButton.styleFrom(backgroundColor: Colors.orange.shade100),
          ),

          const SizedBox(height: 20),

          // Rounded Pagination
          Pagination(
            numOfPages: maxPages,
            selectedPage: currentPage,
            pagesVisible: 4,
            onPageChanged: (page) {
              setState(() {
                currentPage = page.clamp(1, maxPages);
              });
            },
            showFirstLastButtons: false,
            isRounded: true, 
            activeBtnStyle: TextButton.styleFrom(
              backgroundColor: Colors.purple,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            ),
            inactiveBtnStyle: TextButton.styleFrom(
              backgroundColor: Colors.purple.shade100,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
            ),
          ),

          const SizedBox(height: 20),

          // Circular Pagination (Fixed)
          Pagination(
            
            numOfPages: maxPages,
            selectedPage: currentPage,
            pagesVisible: 5,
            onPageChanged: (page) {
              setState(() {
                currentPage = page.clamp(1, maxPages);
              });
            },
            isCircular: true, 
            showFirstLastButtons: true,
            activeBtnStyle: TextButton.styleFrom(
              backgroundColor: Colors.red,
              shape: const CircleBorder(),
              minimumSize: const Size(48, 48),
              padding: EdgeInsets.zero,
            ),
            inactiveBtnStyle: TextButton.styleFrom(
              backgroundColor: Colors.red.shade100,
              shape: const CircleBorder(),
              minimumSize: const Size(48, 48),
              padding: EdgeInsets.zero,
            ),
          ),
        ],
      ),
    );
  }
}