FF Pagination

A flexible, customizable, and responsive pagination widget for Flutter. ff_pagination allows developers to easily implement sleek pagination UIs with full control over style and behavior.

pub package likes platform

✨ Features

  • Set a custom number of visible pages
  • First/Last navigation button support
  • Circular and rounded pagination styles
  • Fully customizable colors, text styles, and icons
  • Smart handling of edge cases (first/last pages)
  • Suitable for large datasets (1000+ pages tested)
  • Adaptive layout for light and dark themes

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  ff_pagination: ^1.0.0

Then run:

flutter pub get

🛠️ Usage

Import the package

import 'package:ff_pagination/ff_pagination.dart';

Basic Example

Pagination(
  numOfPages: 100,
  selectedPage: currentPage,
  pagesVisible: 4,
  onPageChanged: (page) {
    setState(() {
      currentPage = page;
    });
  },
)

🎨 Advanced Customization

Pagination(
  numOfPages: 1000,
  selectedPage: currentPage,
  pagesVisible: 5,
  onPageChanged: (page) {
    setState(() {
      currentPage = page;
    });
  },
  showFirstLastButtons: true,
  isRounded: true,
  activeBtnStyle: TextButton.styleFrom(
    backgroundColor: Colors.teal,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  inactiveBtnStyle: TextButton.styleFrom(
    backgroundColor: Colors.grey.shade300,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  activeTextStyle: TextStyle(color: Colors.white),
  inactiveTextStyle: TextStyle(color: Colors.black),
)

🧭 Layout Configuration

  • pagesVisible: Number of visible page buttons (e.g. 3, 5, 7)
  • isRounded: Enables rounded corners
  • isCircular: Makes buttons perfectly circular

💡 If pagesVisible is even, pages are auto-balanced around the selected page.

💡 Highlights

  • Auto-balances page range (e.g. pages near start/end)
  • Prevents overflow and invalid page access
  • Icon and button styles update dynamically
  • Horizontal scroll view ensures responsive layout

📱 Demo

To see it in action:

git clone https://github.com/harshilchovatiya/ff_pagination.git
cd ff_pagination/example
flutter run

The demo includes:

  • Teal theme
  • Rounded purple buttons
  • Circular red buttons
  • First/Last navigation buttons

🔧 TODO (Planned Features)

  • RTL (Right-to-Left) support
  • Vertical pagination mode
  • Keyboard & gesture navigation
  • Page transition animations

🤝 Contributing

Contributions are welcome! Feel free to open issues, suggest features, or submit pull requests.

📄 License

MIT

💬 Contact

Created with ❤️ by WIF Group For support or queries, open an issue or reach out via GitHub.

Libraries

ff_pagination