246 lines
8.0 KiB
Dart
246 lines
8.0 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
|
|
class PaginationControls extends StatelessWidget {
|
|
final int currentPage;
|
|
final int itemsPerPage;
|
|
final int totalItems;
|
|
final Function(int) onPageChanged;
|
|
final Function(int) onItemsPerPageChanged;
|
|
final Color? activeColor;
|
|
|
|
const PaginationControls({
|
|
Key? key,
|
|
required this.currentPage,
|
|
required this.itemsPerPage,
|
|
required this.totalItems,
|
|
required this.onPageChanged,
|
|
required this.onItemsPerPageChanged,
|
|
this.activeColor = Colors.blue, // fallback if no color given
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
// int totalPages = (totalItems / itemsPerPage).ceil();
|
|
final int totalPages = (totalItems / itemsPerPage).ceil();
|
|
|
|
// return Row(
|
|
// mainAxisAlignment: MainAxisAlignment.end,
|
|
// children: [
|
|
// Padding(
|
|
// padding: const EdgeInsets.symmetric(vertical: 12),
|
|
// child: Row(
|
|
// mainAxisAlignment: MainAxisAlignment.center,
|
|
// children: [
|
|
// DropdownButton<int>(
|
|
// value: itemsPerPage,
|
|
// items:
|
|
// [5, 10, 15, 20, 50].map((int value) {
|
|
// return DropdownMenuItem<int>(
|
|
// value: value,
|
|
// child: Text(
|
|
// ' $value ',
|
|
// style: GoogleFonts.poppins(fontSize: 15),
|
|
// ),
|
|
// );
|
|
// }).toList(),
|
|
// onChanged: (newValue) {
|
|
// if (newValue != null) {
|
|
// onItemsPerPageChanged(newValue);
|
|
// onPageChanged(1); // reset to first page
|
|
// }
|
|
// },
|
|
// ),
|
|
// IconButton(
|
|
// onPressed:
|
|
// currentPage > 1
|
|
// ? () => onPageChanged(currentPage - 1)
|
|
// : null,
|
|
// icon: Icon(Icons.chevron_left),
|
|
// ),
|
|
// for (int i = 1; i <= totalPages - 1; i++)
|
|
// Padding(
|
|
// padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
// child: ElevatedButton(
|
|
// style: ElevatedButton.styleFrom(
|
|
// backgroundColor:
|
|
// currentPage == i - 1 ? activeColor : Colors.grey[300],
|
|
// foregroundColor:
|
|
// currentPage == i - 1 ? Colors.white : Colors.black,
|
|
// minimumSize: Size(36, 36),
|
|
// padding: EdgeInsets.zero,
|
|
// ),
|
|
// onPressed: () => onPageChanged(i - 1),
|
|
// child: Text(i.toString()),
|
|
// ),
|
|
// ),
|
|
// IconButton(
|
|
// onPressed:
|
|
// currentPage < totalPages - 1
|
|
// ? () => onPageChanged(currentPage + 1)
|
|
// : null,
|
|
// icon: Icon(Icons.chevron_right),
|
|
// ),
|
|
// ],
|
|
// ),
|
|
// ),
|
|
// ],
|
|
// );
|
|
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
// Text(
|
|
// 'Items per page:',
|
|
// style: TextStyle(
|
|
// fontSize: 12,
|
|
// fontWeight: FontWeight.w400,
|
|
// color: Colors.black87,
|
|
// fontFamily: "Inter",
|
|
// ),
|
|
// ),
|
|
// SizedBox(width: 8),
|
|
DropdownButton<int>(
|
|
value: itemsPerPage,
|
|
items:
|
|
[10, 20, 50, 100]
|
|
.map(
|
|
(value) => DropdownMenuItem<int>(
|
|
value: value,
|
|
child: Text(
|
|
'$value',
|
|
style: TextStyle(fontSize: 12, fontFamily: "Inter"),
|
|
),
|
|
),
|
|
)
|
|
.toList(),
|
|
onChanged: (value) {
|
|
if (value != null) {
|
|
onItemsPerPageChanged(value);
|
|
}
|
|
},
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.black,
|
|
fontFamily: "Inter",
|
|
),
|
|
underline: SizedBox(),
|
|
iconSize: 16,
|
|
),
|
|
SizedBox(width: 16),
|
|
IconButton(
|
|
icon: Icon(Icons.arrow_back_ios_new, size: 10),
|
|
onPressed:
|
|
currentPage > 0 ? () => onPageChanged(currentPage - 1) : null,
|
|
),
|
|
|
|
// SingleChildScrollView(
|
|
// scrollDirection: Axis.horizontal,
|
|
// child: Row(
|
|
// children: List.generate(totalPages, (index) {
|
|
// print("totalPagesList - $totalPages");
|
|
// // Only show 2 pages: currentPage and currentPage + 1
|
|
// if (index == currentPage || index == currentPage + 1) {
|
|
// return Padding(
|
|
// padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
// child: ElevatedButton(
|
|
// onPressed: () => onPageChanged(index),
|
|
// style: ElevatedButton.styleFrom(
|
|
// backgroundColor:
|
|
// currentPage == index
|
|
// ? activeColor
|
|
// : Colors.grey[300]!,
|
|
// minimumSize: Size(30, 30),
|
|
// padding: EdgeInsets.zero,
|
|
// ),
|
|
// child: Text(
|
|
// '${index + 1}',
|
|
// style: TextStyle(
|
|
// fontSize: 12,
|
|
// fontFamily: "Inter",
|
|
// color:
|
|
// currentPage == index ? Colors.white : Colors.black,
|
|
// ),
|
|
// ),
|
|
// ),
|
|
// );
|
|
// } else {
|
|
// return SizedBox.shrink(); // Don't show other pages
|
|
// }
|
|
// }),
|
|
// ),
|
|
// ),
|
|
SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Row(children: _buildPageButtons()),
|
|
),
|
|
|
|
IconButton(
|
|
icon: Icon(Icons.arrow_forward_ios, size: 10),
|
|
onPressed:
|
|
(currentPage + 1) * itemsPerPage < totalItems
|
|
? () => onPageChanged(currentPage + 1)
|
|
: null,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
List<Widget> _buildPageButtons() {
|
|
final int totalPages = (totalItems / itemsPerPage).ceil();
|
|
List<Widget> buttons = [];
|
|
|
|
// Always show first page
|
|
buttons.add(_buildPageButton(0));
|
|
|
|
// Add left ellipsis if needed
|
|
if (currentPage > 2) {
|
|
buttons.add(_buildEllipsis());
|
|
}
|
|
|
|
// Add previous, current, next page if in range
|
|
for (int i = currentPage - 1; i <= currentPage + 1; i++) {
|
|
if (i > 0 && i < totalPages - 1) {
|
|
buttons.add(_buildPageButton(i));
|
|
}
|
|
}
|
|
|
|
// Add right ellipsis if needed
|
|
if (currentPage < totalPages - 3) {
|
|
buttons.add(_buildEllipsis());
|
|
}
|
|
|
|
// Always show last page
|
|
if (totalPages > 1) {
|
|
buttons.add(_buildPageButton(totalPages - 1));
|
|
}
|
|
|
|
return buttons;
|
|
}
|
|
|
|
Widget _buildPageButton(int pageIndex) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
child: ElevatedButton(
|
|
onPressed: () => onPageChanged(pageIndex),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor:
|
|
currentPage == pageIndex ? activeColor : Colors.grey[300],
|
|
foregroundColor:
|
|
currentPage == pageIndex ? Colors.white : Colors.black,
|
|
minimumSize: Size(36, 36),
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
child: Text('${pageIndex + 1}'),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEllipsis() {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 6),
|
|
child: Text('...', style: TextStyle(fontSize: 16)),
|
|
);
|
|
}
|
|
}
|