A Flutter paginator widget for switching between 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.
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.
NumberPaginator(
numberPages: 10,
onPageChange: (int index) {
// handle page change...
},
)
NumerPaginatorController
allows you to control the NumberPaginator
from the outside, e.g. with an external button anywhere in your app.
// instantiate the controller in your state
final NumberPaginatorController _controller = NumberPaginatorController();
...
/// use it within NumberPaginator
NumberPaginator(
controller: _controller,
// by default, the paginator shows numbers as center content
numberPages: _numPages,
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
)
...
// Use the controller, e.g. within a button, to trigger a page change
floatingActionButton: FloatingActionButton(
onPressed: () => _controller.next(),
child: const Icon(Icons.navigate_next),
)
NumberPaginator
allows for several customizations.
NumberPaginator(
// by default, the paginator shows numbers as center content
numberPages: 10,
onPageChange: (int index) {
setState(() {
_currentPage = index; // _currentPage is a variable within State of StatefulWidget
});
},
// initially selected index
initialPage: 4,
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,
),
)
NumberPaginator(
// by default, the paginator shows numbers as center content
numberPages: 10,
onPageChange: (int index) {
setState(() {
_currentPage = index; // _currentPage is a variable within State of StatefulWidget
});
},
// show/hide the prev/next buttons
showPrevButton: true,
showNextButton: false, // defaults to true
// custom content of the prev/next buttons, maintains their behavior
nextButtonContent: Icon(Icons.arrow_right_alt),
// custom prev/next buttons using builder (ignored if showPrevButton/showNextButton is false)
prevButtonBuilder: (context) => TextButton(
onPressed: _controller.currentPage > 0 ? () => _controller.prev() : null, // _controller must be passed to NumberPaginator
child: const Row(
children: [
Icon(Icons.chevron_left),
Text("Previous"),
],
),
),
)
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.
NumberPaginator(
numberPages: _numPages,
// shows only default arrows, no center content of paginator
config:
const NumberPaginatorUIConfig(mode: ContentDisplayMode.hidden),
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
)
The paginator shows numbers for switching to any page number that is visible.
NumberPaginator(
// by default, the paginator shows numbers as center content
numberPages: _numPages,
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
)
The paginator shows a dropdown (material widget) for choosing which page to show, along with the prev/next buttons.
NumberPaginator(
numberPages: _numPages,
// shows a dropdown as the center paginator content
config: const NumberPaginatorUIConfig(
mode: ContentDisplayMode.dropdown),
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
)
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:
NumberPaginator(
numberPages: _numPages,
contentBuilder: (index) => Expanded(
child: Center(
child: Text("Currently selected page: ${index + 1}"),
),
),
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
)
A complete example of a simple page widget with number pagination.
import 'package:flutter/material.dart';
import 'package:number_paginator/number_paginator.dart';
class NumbersPage extends StatefulWidget {
const NumbersPage({Key? key}) : super(key: key);
@override
_NumbersPageState createState() => _NumbersPageState();
}
class _NumbersPageState extends State<NumbersPage> {
final int _numPages = 10;
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.headline1,
),
),
);
return Scaffold(
body: pages[_currentPage],
// card for elevation
bottomNavigationBar: Card(
margin: EdgeInsets.zero,
elevation: 4,
child: NumberPaginator(
// by default, the paginator shows numbers as center content
numberPages: _numPages,
onPageChange: (int index) {
setState(() {
_currentPage = index;
});
},
),
),
);
}
}
- Animations
If you have any ideas for extending this package or have found a bug, please contribute!
- You'll need a GitHub account.
- Fork the number_paginator repository.
- Work on your feature/bug.
- Create a pull request.
- Star this project. โญ
- Become a hero!! ๐
number_paginator's People
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.