Material Pagination

MaterialPagination is a customizable and flexible pagination widget for Flutter applications. It allows you to easily create pagination controls with numbered page buttons, next/previous arrows, and extensive customization options.

Screenshots

Features

• Customizable page buttons, including their size, style, and color.
• Previous and Next navigation arrows.
• Supports any number of pages with a configurable visible page range.
• Darken effect for the active page.
• Callback for page changes.
• Flexibility to adapt to various designs and themes.

Installation

Add the following to your pubspec.yaml:

dependencies:
  material_pagination: ^1.0.0

Then, run:

flutter pub get

Usage

Basic Example

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

class PaginationExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pagination Example')),
      body: Center(
        child: MaterialPagination(
          currentPage: 1,
          totalPages: 10,
          onPageChanged: (page) {
            print('Page $page selected');
          },
          visiblePageCount: 5,
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
          fontStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

Parameters

| Parameter | Type | Description | Default | | ----------------------------| ------------------------ | ------------------------------------------------------------------------------------------------------- | --------------- | | currentPage | int | The current active page number. | 1 | | totalPages | int | The total number of pages available. | Required | | onPageChanged | Function(int page) | Callback when a page number or next/previous arrow is pressed. | Required | | visiblePageCount | int | Number of page buttons visible at one time. | 5 | | activeColor | Color | The color of the active (selected) page button. | Colors.blue | | inactiveColor | Color | The color of the inactive (non-selected) page buttons. | Colors.grey | | fontStyle | TextStyle? | The text style for the page numbers. | Default | | buttonSize | double | The size of each page number button. | 32.0 | | iconSize | double | The size of the arrow icons. | 12.0 | | iconGap | double | The gap between page buttons and next/previous icons. | 4.0 | | borderRadius | double | The border radius for the page number buttons and icons. | 8.0 | | colorDarkness | double | Value between 0 and 1 to adjust the darkness of the active page's button border. | 0.3 |

Advanced Example

MaterialPagination(
  currentPage: 3,
  totalPages: 15,
  onPageChanged: (page) {
    setState(() {
      _currentPage = page;
    });
  },
  visiblePageCount: 7,
  activeColor: Colors.green,
  inactiveColor: Colors.grey,
  fontStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
  buttonSize: 40.0,
  borderRadius: 10.0,
)

Customization

Custom Button Style

You can fully customize the appearance of the page buttons by modifying the fontStyle, activeColor, inactiveColor, and other related properties.

MaterialPagination(
  currentPage: 1,
  totalPages: 20,
  onPageChanged: (page) {
    print('Page $page selected');
  },
  fontStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white),
  activeColor: Colors.orange,
  inactiveColor: Colors.black,
  buttonSize: 30.0,
)

Next/Previous Buttons

This widget also supports next and previous arrow buttons to easily navigate between pages.

MaterialPagination(
  currentPage: 5,
  totalPages: 50,
  onPageChanged: (page) {
    print('Page $page selected');
  },
  iconSize: 16.0,
  iconGap: 8.0,
)

Running Tests

You can run tests by using the Flutter testing framework:

flutter test

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

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