Pagination

​

Overview

​

Basic Usage

import 'package:hux/hux.dart';

HuxPagination(
  currentPage: 5,
  totalPages: 20,
  onPageChanged: (page) {
    print('Selected page: $page');
  },
)

​

Properties

​

Examples

​

Basic Pagination

HuxPagination(
  currentPage: 3,
  totalPages: 10,
  onPageChanged: (page) {
    setState(() {
      currentPage = page;
    });
  },
)

​

Large Page Count

HuxPagination(
  currentPage: 15,
  totalPages: 100,
  maxPagesToShow: 7,
  onPageChanged: (page) {
    // Handle page change
  },
)

​

Custom Page Range

HuxPagination(
  currentPage: 1,
  totalPages: 3,
  maxPagesToShow: 3,
  onPageChanged: (page) {
    // Handle page change
  },
)

​

Accessibility

• WCAG AA Compliant: Uses proper contrast ratios for all text and backgrounds
• Keyboard Navigation: All buttons are focusable and keyboard accessible
• Screen Reader Support: Proper semantic markup and ARIA labels
• Touch Targets: Meets minimum touch target size requirements

​

Styling

• Theme-aware colors: Automatically adapts to light/dark themes
• Consistent spacing: Uses Hux spacing tokens
• Typography: Follows Hux text style patterns
• Interactive states: Proper hover and focus states

​

Best Practices

1. Always provide feedback: Use the onPageChanged callback to update your content
2. Handle edge cases: The component handles single pages and large page counts automatically
3. Consider mobile: The compact design works well on mobile devices
4. Accessibility: Ensure your page content changes are announced to screen readers