flutter_pagination 0.0.8

Use pagination for your flutter app. You can use group pagination or normal pagination also. You can customize paginated widgets with custom styles.

Flutter Pagination Buttons

Use Pagination In Flutter

Example

• Without Group

int currentPage = 1;
Pagination(
            paginateButtonStyles: PaginateButtonStyles(),
            prevButtonStyles: PaginateSkipButton(
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(20),
                    bottomLeft: Radius.circular(20))),
            nextButtonStyles: PaginateSkipButton(
                borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(20),
                    bottomRight: Radius.circular(20))),
            onPageChange: (number) {
              setState(() {
                currentPage = number;
              });
            },
            useGroup: false,
            totalPage: 30,
            show: 2,
            currentPage: currentPage,
          )

Example 2

• With Group

Pagination(
            width: MediaQuery.of(context).size.width * .6, // this prop is optional
            paginateButtonStyles: PaginateButtonStyles(),
            prevButtonStyles: PaginateSkipButton(
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(20),
                    bottomLeft: Radius.circular(20))),
            nextButtonStyles: PaginateSkipButton(
                borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(20),
                    bottomRight: Radius.circular(20))),
            onPageChange: (number) {
              setState(() {
                currentPage = number;
              });
            },
            useGroup: true,
            totalPage: 30,
            show: 4,
            currentPage: currentPage,
          )

Note: If show value greater than totalPage It will throw error.

Note2: Height value default:50. And works with only groupped pagination. Also width works with too

-- Styling

Pagination(
            paginateButtonStyles: PaginateButtonStyles(
                backgroundColor: Colors.pink,
                activeBackgroundColor: Colors.black,
                activeTextStyle: const TextStyle(color: Colors.red)),
            prevButtonStyles: PaginateSkipButton(
                buttonBackgroundColor: Colors.orange,
                icon: const Icon(
                  Icons.arrow_back_ios,
                  size: 30,
                ),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(20),
                    bottomLeft: Radius.circular(20))),
            nextButtonStyles: PaginateSkipButton(
                buttonBackgroundColor: Colors.purple,
                icon: const Icon(
                  Icons.arrow_right_alt,
                  color: Colors.white,
                ),
                borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(20),
                    bottomRight: Radius.circular(20))),
            onPageChange: (number) {
              setState(() {
                currentPage = number;
              });
            },
            useGroup: true,
            totalPage: 30,
            show: 4,
            currentPage: currentPage,
          )

```


| Required Fields     | Type                 |
|----------------------|----------------------|
| totalPage            | integer              |
| currentPage          | integer              |
| onPageChange         | (number) => void     |
| nextButtonStyles     | PaginateSkipButton   |
| prevButtonStyles     | PaginateSkipButton   |
| paginateButtonStyles | PaginateButtonStyles |