add scroll mode

example/android/gradle.properties

@@ -1,3 +1,4 @@
 org.gradle.jvmargs=-Xmx4G -XX:MaxMetaspaceSize=2G -XX:+HeapDumpOnOutOfMemoryError
 android.useAndroidX=true
 android.enableJetifier=true
+org.gradle.java.home=C:/Program Files/Java/jdk-17

example/lib/main.dart

@@ -2,6 +2,7 @@ import 'package:example/builder_page.dart';
 import 'package:example/dropdown_page.dart';
 import 'package:example/numbers_page.dart';
 import 'package:example/only_arrows_page.dart';
+import 'package:example/scrollable_numbers.dart';
 import 'package:flutter/material.dart';
 
 void main() => runApp(const MyApp());
@@ -28,7 +29,7 @@ class HomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return DefaultTabController(
-      length: 4,
+      length: 5,
       child: Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
@@ -37,17 +38,21 @@ class HomePage extends StatelessWidget {
             tabs: [
               Tab(child: Text("Hidden")),
               Tab(child: Text("Numbers")),
+              Tab(child: Text("Scrollable Numbers")),
               Tab(child: Text("Dropdown")),
               Tab(child: Text("Custom Builder")),
+
             ],
           ),
         ),
         body: const TabBarView(
           children: [
             OnlyArrowsPage(),
             NumbersPage(),
+            ScrollableNumbers(),
             DropdownPage(),
             BuilderPage(),
+
           ],
         ),
       ),

example/lib/numbers_page.dart

@@ -16,7 +16,7 @@ class _NumbersPageState extends State<NumbersPage> {
   Widget build(BuildContext context) {
     var pages = List.generate(
       _numPages,
-      (index) => Center(
+          (index) => Center(
         child: Text(
           "Page ${index + 1}",
           style: Theme.of(context).textTheme.displayLarge,
@@ -32,7 +32,6 @@ class _NumbersPageState extends State<NumbersPage> {
         margin: EdgeInsets.zero,
         elevation: 4,
         child: NumberPaginator(
-          // by default, the paginator shows numbers as center content
           numberPages: _numPages,
           onPageChange: (int index) {
             setState(() {

example/lib/scrollable_numbers.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:number_paginator/number_paginator.dart';
+
+class ScrollableNumbers extends StatefulWidget {
+  const ScrollableNumbers({Key? key}) : super(key: key);
+
+  @override
+  _ScrollableNumbersState createState() => _ScrollableNumbersState();
+}
+
+class _ScrollableNumbersState extends State<ScrollableNumbers> {
+  final int _numPages = 100;
+  int _currentPage = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    var pages = List.generate(
+      _numPages,
+          (index) => Center(
+        child: Text(
+          "Page ${index + 1}",
+          style: Theme.of(context).textTheme.displayLarge,
+        ),
+      ),
+    );
+
+    return Scaffold(
+      backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+      body: pages[_currentPage],
+      // card for elevation
+      bottomNavigationBar: Card(
+        margin: EdgeInsets.zero,
+        elevation: 4,
+        child: NumberPaginator(
+          config: const NumberPaginatorUIConfig(mode: ContentDisplayMode.scrollableNumbers),
+          numberPages: _numPages,
+          onPageChange: (int index) {
+            setState(() {
+              _currentPage = index;
+            });
+          },
+        ),
+      ),
+    );
+  }
+}

lib/src/model/display_mode.dart

@@ -2,4 +2,5 @@ enum ContentDisplayMode {
   hidden,
   numbers,
   dropdown,
+  scrollableNumbers,
 }

lib/src/ui/widgets/paginator_content.dart

@@ -3,13 +3,14 @@ import 'package:number_paginator/src/model/display_mode.dart';
 import 'package:number_paginator/src/ui/widgets/inherited_number_paginator.dart';
 import 'package:number_paginator/src/ui/widgets/paginator_content/dropdown_content.dart';
 import 'package:number_paginator/src/ui/widgets/paginator_content/number_content.dart';
+import 'package:number_paginator/src/ui/widgets/paginator_content/scrollable_numbers_content.dart';
 
 class PaginatorContent extends StatelessWidget {
   final int currentPage;
 
   const PaginatorContent({
-    super.key,
-    required this.currentPage,
+  super.key,
+  required this.currentPage,
   });
 
   @override
@@ -18,13 +19,11 @@ class PaginatorContent extends StatelessWidget {
 
     switch (mode) {
       case ContentDisplayMode.numbers:
-        return NumberContent(
-          currentPage: currentPage,
-        );
+        return NumberContent(currentPage: currentPage);
       case ContentDisplayMode.dropdown:
-        return DropDownContent(
-          currentPage: currentPage,
-        );
+        return DropDownContent(currentPage: currentPage);
+      case ContentDisplayMode.scrollableNumbers:
+        return ScrollableNumberContent(currentPage: currentPage);
       default:
         return Container();
     }

lib/src/ui/widgets/paginator_content/scrollable_numbers_content.dart

@@ -0,0 +1,41 @@
+import 'package:auto_size_text/auto_size_text.dart';
+import 'package:flutter/material.dart';
+import 'package:number_paginator/src/ui/widgets/buttons/paginator_button.dart';
+import 'package:number_paginator/src/ui/widgets/inherited_number_paginator.dart';
+
+class ScrollableNumberContent extends StatelessWidget {
+  final int currentPage;
+
+  const ScrollableNumberContent({
+  super.key,
+  required this.currentPage,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    var numberPages = InheritedNumberPaginator.of(context).numberPages;
+
+    return SizedBox(
+      //height: 50, // Set a fixed height
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal, // Enable scrolling
+        itemCount: numberPages,
+        itemBuilder: (context, index) {
+          return _buildPageButton(context, index);
+        },
+      ),
+    );
+  }
+
+  /// Builds a **clickable page button**.
+  Widget _buildPageButton(BuildContext context, int index) => PaginatorButton(
+    onPressed: () =>
+        InheritedNumberPaginator.of(context).onPageChange?.call(index),
+    selected: index == currentPage,
+    child: AutoSizeText(
+      (index + 1).toString(),
+      maxLines: 1,
+      minFontSize: 5,
+    ),
+  );
+}