VmPageNumbers

A highly customizable Flutter widget for pagination that provides an elegant and responsive page number navigation interface.

Features

• Responsive layout that automatically adapts to available width
• Customizable appearance for all elements (numbers, navigation buttons, separators)
• Smart pagination algorithm that maintains context around the current page
• Support for keyboard navigation
• Material Design 3 default theme
• Highly performant custom render object implementation

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  vm_page_numbers: ^2.1.2

Usage

VmPageNumbers(
  currentPage: 5,
  totalPages: 20,
  onPageSelected: (page) {
    setState(() => _currentPage = page);
  },
)

Customization

You can customize the appearance of all elements:

VmPageNumbers(
  currentPage: currentPage,
  totalPages: totalPages,
  onPageSelected: onPageSelected,
  numberButtonBuilder: (context, page, isCurrent) {
    return CustomButton(
      page: page,
      isSelected: isCurrent,
    );
  },
  previousButtonBuilder: (context, isEnabled, onPressed) {
    return CustomNavButton(
      icon: Icons.chevron_left,
      onPressed: isEnabled ? onPressed : null,
    );
  },
  nextButtonBuilder: (context, isEnabled, onPressed) {
    return CustomNavButton(
      icon: Icons.chevron_right,
      onPressed: isEnabled ? onPressed : null,
    );
  },
  separatorBuilder: (context) {
    return const Text('•••');
  },
  navNumberSpacing: 16.0,
  numberNumberSpacing: 8.0,
)

Properties

• currentPage: The current active page (1-based indexing)
• totalPages: Total number of pages
• onPageSelected: Callback when a page number is selected
• onPreviousPage: Optional callback for custom previous page navigation
• onNextPage: Optional callback for custom next page navigation
• numberButtonBuilder: Builder for page number buttons
• previousButtonBuilder: Builder for the previous page button
• nextButtonBuilder: Builder for the next page button
• separatorBuilder: Builder for separator (ellipsis) elements
• navNumberSpacing: Spacing between navigation buttons and number buttons
• numberNumberSpacing: Spacing between number buttons

Examples

See the example folder for a complete sample application.

License

This project is licensed under the MIT License - see the LICENSE file for details.