diff --git a/README.md b/README.md
index d4fcab2..e46728e 100644
--- a/README.md
+++ b/README.md
@@ -5,17 +5,17 @@
A Flutter paginator widget for switching between page numbers.
-
+
## Getting Started
-The **number_paginator** widget allows you to implement pagination with page numbers very easily. If you have a list that is split up into several pages, **number_paginator** can be used to let the user switch between these page numbers.
+The **number_paginator** widget allows you to implement pagination with page numbers very easily. If you have content that is split up into several pages, **number_paginator** can be used to let the user switch between these page numbers.
The package automatically handles the case where page numbers don't fit on one screen and replaces some of them with three dots.
## Usage
-`NumberPaginator` only requires the number of pages (`numberPages`) to be set. All the rest is handled by the widget automatically. Normally, one also wants to react to page changes using the `onPageChange` callback.
+`NumberPaginator` only requires the number of pages (`numberPages`) to be set. All the rest is handled by the widget automatically. Normally, one also wants to react to page changes using the `onPageChange` callback. By default, `NumberPaginator` displays page numbers as central content of the paginator.
```dart
NumberPaginator(
numberPages: 10,
@@ -30,32 +30,120 @@ NumberPaginator(
`NumberPaginator` allows for several customizations.
```dart
NumberPaginator(
+ // by default, the paginator shows numbers as center content
numberPages: 10,
onPageChange: (int index) {
setState(() {
- _currentPage = index;
+ _currentPage = index; // _currentPage is a variable within State of StatefulWidget
});
},
// initially selected index
initialPage: 4,
- // default height is 48
- height: 70,
- buttonShape: BeveledRectangleBorder(
- borderRadius: BorderRadius.circular(8),
+ config: NumberPaginatorUIConfig(
+ // default height is 48
+ height: 64,
+ buttonShape: BeveledRectangleBorder(
+ borderRadius: BorderRadius.circular(8),
+ ),
+ buttonSelectedForegroundColor: Colors.yellow,
+ buttonUnselectedForegroundColor: Colors.white,
+ buttonUnselectedBackgroundColor: Colors.grey,
+ buttonSelectedBackgroundColor: Colors.blueGrey,
+ ),
+)
+```
+
+ 
+
+
+### Content variations
+The new version of `NumberPaginator` allows for further customization of how a user can navigate between pages. It provides three different modes and an additional possibility of complete customization o the content using a `builder`.
+
+#### Hidden (only arrows are visible)
+The user only sees arrows to switch to the previous/next page.
+
+```dart
+NumberPaginator(
+ numberPages: _numPages,
+ // shows only default arrows, no center content of paginator
+ config:
+ const NumberPaginatorUIConfig(mode: ContentDisplayMode.hidden),
+ onPageChange: (int index) {
+ setState(() {
+ _currentPage = index;
+ });
+ },
+)
+```
+
+
+
+
+#### Numbers (default)
+The paginator shows numbers for switching to any page number that is visible.
+
+```dart
+NumberPaginator(
+ // by default, the paginator shows numbers as center content
+ numberPages: _numPages,
+ onPageChange: (int index) {
+ setState(() {
+ _currentPage = index;
+ });
+ },
+)
+```
+
+
+
+
+
+#### Dropdown
+The paginator shows a dropdown (material widget) for choosing which page to show, along with the prev/next buttons.
+
+```dart
+NumberPaginator(
+ numberPages: _numPages,
+ // shows a dropdown as the center paginator content
+ config: const NumberPaginatorUIConfig(
+ mode: ContentDisplayMode.dropdown),
+ onPageChange: (int index) {
+ setState(() {
+ _currentPage = index;
+ });
+ },
+)
+```
+
+
+
+
+
+#### Builder (for passing any content)
+Using the `contentBuilder` property, you can pass any content that you want that should be displayed as a central part of the paginator. For example, you can pass a custom text:
+
+```dart
+NumberPaginator(
+ numberPages: _numPages,
+ contentBuilder: (index) => Expanded(
+ child: Center(
+ child: Text("Currently selected page: ${index + 1}"),
+ ),
),
- buttonSelectedForegroundColor: Colors.yellow,
- buttonUnselectedForegroundColor: Colors.white,
- buttonUnselectedBackgroundColor: Colors.grey,
- buttonSelectedBackgroundColor: Colors.blueGrey,
+ onPageChange: (int index) {
+ setState(() {
+ _currentPage = index;
+ });
+ },
)
```
- 
+
+
## Coming soon...
- Controller for controlling page switching
-- More customization options
- Animations
## Contribute