Pagination

FPagination(pages: 10);

FPagination(
  controller: FPaginationController(
    pages: 20,
    initialPage: 9,
    siblings: 2,
  ),
);

FPagination(
  controller: FPaginationController(
    pages: 8,
    showEdges: false,
  ),
);

FPagination(
    controller: FPaginationController(pages: 10, initialPage: 4),
    next: Padding(
      padding: style.itemPadding,
      child: ConstrainedBox(
        constraints: style.itemConstraints,
        child: FButton.icon(
          style: FButtonStyle.ghost,
          onPress: controller.next,
          child: IconTheme(data: style.itemIconStyle.resolve({}), child: Icon(FIcons.bird)),
        ),
      ),
    ),
    previous: Padding(
      padding: style.itemPadding,
      child: ConstrainedBox(
        constraints: style.itemConstraints,
        child: FButton.icon(
          style: FButtonStyle.ghost,
          onPress: controller.previous,
          child: IconTheme(data: style.itemIconStyle.resolve({}), child: Icon(FIcons.anchor)),
        ),
      ),
    ),
  );

class PageViewExample extends StatefulWidget {
  const PageViewExample({super.key});
 
  @override
  State<PageViewExample> createState() => _PageViewExampleState();
}
 
class _PageViewExampleState extends State<PageViewExample>{
  int pages = 10;
  PageController controller = PageController();
  late FPaginationController paginationController = FPaginationController(pages: pages);
 
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final value = PageStorage.maybeOf(context)?.readState(context) ?? 0;
    paginationController.page = value;
  }
 
  void _handlePageChange(int page) {
    final old = controller.page?.round();
    if (old case final old when old != page) {
      if (page == old! + 1 || page == old - 1) {
        setState(() {
          controller.animateToPage(page, duration: const Duration(milliseconds: 300), curve: Curves.easeInOut);
        });
      } else {
        setState(() {
          controller.jumpToPage(page);
        });
      }
    }
  }
 
  @override
  Widget build(BuildContext context) {
    final style = context.theme.colors;
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 10),
          child: SizedBox(
            height: 300,
            width: 300,
            child: NotificationListener(
              onNotification: (notification) {
                if (notification is ScrollEndNotification) {
                  if (controller.hasClients) {
                    paginationController.page = controller.page!.round();
                    return true;
                  }
                }
                return false;
              },
              child: PageView.builder(
                itemCount: pages,
                controller: controller,
                itemBuilder:(context, index) => ColoredBox(
                  color: index.isEven ? style.hover(style.primary) : style.mutedForeground,
                  child: Center(
                    child: DefaultTextStyle(
                      style: TextStyle(fontSize: 45, color: style.primaryForeground),
                      child: Text('Page ${index + 1}'),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        FPagination(controller: paginationController, onChange: _handlePageChange),
      ],
    );
  }
 
  @override
  void dispose() {
    paginationController.dispose();
    controller.dispose();
    super.dispose();
  }
}

FPagination(
  pages: 15,
  initialPage: 7,
  onChange: (page) {
    print('Current page: $page');
  },
);