vm_page_numbers 1.0.0+2

A customizable Flutter pagination widget that automatically adapts to available space, providing an intuitive and responsive page navigation interface.

example/lib/main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'VmPageNumbers Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF2956EF),
          dynamicSchemeVariant: DynamicSchemeVariant.vibrant,
        ),
      ),
      home: const Scaffold(
        body: Padding(
          padding: EdgeInsets.all(24.0),
          child: VmPageNumbersExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<VmPageNumbersExample> createState() => _VmPageNumbersExampleState();
}

class _VmPageNumbersExampleState extends State<VmPageNumbersExample> {
  int _currentPage = 6;
  int _pageCount = 20;
  double _availableWidth = 300;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Current Page: $_currentPage'),
        const SizedBox(height: 20),
        Container(
          decoration: const BoxDecoration(
            border: Border.symmetric(
              vertical: BorderSide(color: Colors.red, width: 2),
            ),
          ),
          child: SizedBox(
            width: _availableWidth,
            child: Align(
              alignment: Alignment.center,
              child: VmPageNumbers(
                totalPages: _pageCount,
                currentPage: _currentPage.clamp(0, _pageCount),
                onPageSelected: (page) => setState(() => _currentPage = page),
                navNumberSpacing: 30,
                numberNumberSpacing: 10,
                onNextPage: () {
                  setState(() => _currentPage = _currentPage + 1);
                },
                onPreviousPage: () {
                  setState(() => _currentPage = _currentPage - 1);
                },
              ),
            ),
          ),
        ),
        const SizedBox(height: 20),
        Row(
          children: [
            const Text('Width: '),
            Expanded(
              child: Slider(
                value: _availableWidth,
                min: 200,
                max: (MediaQuery.of(context).size.width - 24 * 2).clamp(
                  _availableWidth,
                  double.nan,
                ),
                onChanged: (value) => setState(() => _availableWidth = value),
              ),
            ),
            Text('${_availableWidth.toInt()}'),
          ],
        ),
        Row(
          children: [
            const Text('Pages: '),
            Expanded(
              child: Slider(
                value: _pageCount.toDouble(),
                min: 1,
                max: 100,
                onChanged:
                    (value) => setState(() => _pageCount = value.toInt()),
              ),
            ),
            Text('$_pageCount'),
          ],
        ),
      ],
    );
  }
}