378 lines
12 KiB
Dart
378 lines
12 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;
|
|
|
|
const PaginationControls({
|
|
Key? key,
|
|
required this.currentPage,
|
|
required this.itemsPerPage,
|
|
required this.totalItems,
|
|
required this.onPageChanged,
|
|
required this.onItemsPerPageChanged,
|
|
}) : super(key: key);
|
|
|
|
List<int> _visiblePages(int totalPages, int currentPage) {
|
|
const int maxVisible = 5; // Show up to 5 visible pages
|
|
if (totalPages <= maxVisible) {
|
|
return List<int>.generate(totalPages, (i) => i + 1);
|
|
}
|
|
|
|
// Near the start
|
|
if (currentPage <= 3) {
|
|
return [1, 2, 3, -1, totalPages]; // -1 means ellipsis (...)
|
|
}
|
|
|
|
// Near the end
|
|
if (currentPage >= totalPages - 2) {
|
|
return [1, -1, totalPages - 2, totalPages - 1, totalPages];
|
|
}
|
|
|
|
// Middle pages
|
|
return [
|
|
1,
|
|
-1,
|
|
currentPage - 1,
|
|
currentPage,
|
|
currentPage + 1,
|
|
-1,
|
|
totalPages,
|
|
];
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final int totalPages = (totalItems / itemsPerPage).ceil();
|
|
final List<int> pages = _visiblePages(totalPages, currentPage);
|
|
|
|
return Container(
|
|
// color: Colors.yellow.shade100,
|
|
height: 30,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Dropdown for rows per page
|
|
DropdownButton<int>(
|
|
value: itemsPerPage,
|
|
items: [5, 10, 15, 20, 50].map((int value) {
|
|
return DropdownMenuItem<int>(
|
|
value: value,
|
|
child: Text('$value', style: GoogleFonts.inter(fontSize: 12)),
|
|
);
|
|
}).toList(),
|
|
onChanged: (newValue) {
|
|
if (newValue != null) {
|
|
onItemsPerPageChanged(newValue);
|
|
onPageChanged(1);
|
|
}
|
|
},
|
|
),
|
|
|
|
// Previous Button
|
|
IconButton(
|
|
onPressed: currentPage > 1
|
|
? () => onPageChanged(currentPage - 1)
|
|
: null,
|
|
icon: const Icon(Icons.chevron_left, size: 18),
|
|
),
|
|
|
|
// Page buttons with ellipsis
|
|
for (final i in pages)
|
|
if (i == -1)
|
|
const Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 2),
|
|
child: Text("..."),
|
|
)
|
|
else
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 2),
|
|
child: ElevatedButton(
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: currentPage == i
|
|
? const Color(0xFFD4F8F3)
|
|
: const Color(0xFFEDF6F5),
|
|
foregroundColor: currentPage == i
|
|
? Colors.black
|
|
: Colors.grey,
|
|
minimumSize: const Size(26, 26),
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
onPressed: () => onPageChanged(i),
|
|
child: Text(i.toString()),
|
|
),
|
|
),
|
|
|
|
// Next Button
|
|
IconButton(
|
|
onPressed: currentPage < totalPages
|
|
? () => onPageChanged(currentPage + 1)
|
|
: null,
|
|
icon: const Icon(Icons.chevron_right, size: 18),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// 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) {
|
|
// final int totalPages = (totalItems / itemsPerPage).ceil();
|
|
//
|
|
// return Row(
|
|
// mainAxisAlignment: MainAxisAlignment.end,
|
|
// children: [
|
|
// // Dropdown for rows per page
|
|
// 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 page 1 when rows change
|
|
// }
|
|
// },
|
|
// ),
|
|
//
|
|
// // Previous button
|
|
// IconButton(
|
|
// onPressed: currentPage > 1
|
|
// ? () => onPageChanged(currentPage - 1)
|
|
// : null,
|
|
// icon: Icon(Icons.arrow_back),
|
|
// ),
|
|
//
|
|
// // Page buttons
|
|
// for (int i = 1; i <= totalPages; i++)
|
|
// Padding(
|
|
// padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
// child: ElevatedButton(
|
|
// style: ElevatedButton.styleFrom(
|
|
// backgroundColor: currentPage == i
|
|
// ? Color(0xFFD4F8F3)
|
|
// : Color(0xFFEDF6F5),
|
|
// foregroundColor: currentPage == i ? Colors.black : Colors.grey,
|
|
// minimumSize: const Size(36, 36),
|
|
// padding: EdgeInsets.zero,
|
|
// ),
|
|
// onPressed: () => onPageChanged(i),
|
|
// child: Text(i.toString()),
|
|
// ),
|
|
// ),
|
|
//
|
|
// // Next button
|
|
// IconButton(
|
|
// onPressed: currentPage < totalPages
|
|
// ? () => onPageChanged(currentPage + 1)
|
|
// : null,
|
|
// icon: Icon(Icons.arrow_forward),
|
|
// ),
|
|
// ],
|
|
// );
|
|
// }
|
|
// // Widget build(BuildContext context) {
|
|
// // // int totalPages = (totalItems / itemsPerPage).ceil();
|
|
// // final int totalPages = (widget.totalItems / widget.itemsPerPage).ceil();
|
|
// //
|
|
// // return Row(
|
|
// // mainAxisAlignment: MainAxisAlignment.end,
|
|
// // 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) {
|
|
// // setState(() {
|
|
// // itemsPerPage = newValue!;
|
|
// // currentPage = 1; // Reset to first page when rows per page changes
|
|
// // });
|
|
// // },
|
|
// // ),
|
|
// // IconButton(
|
|
// // onPressed: currentPage > 1
|
|
// // ? () {
|
|
// // setState(() {
|
|
// // currentPage--;
|
|
// // });
|
|
// // }
|
|
// // : null,
|
|
// // icon: Icon(Icons.chevron_left),
|
|
// // ),
|
|
// // for (int i = 1; i <= (totalItems / itemsPerPage).ceil(); i++)
|
|
// // Padding(
|
|
// // padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
// // child: ElevatedButton(
|
|
// // style: ElevatedButton.styleFrom(
|
|
// // backgroundColor: _currentPage == i
|
|
// // ? Color(0xFF00A6A6)
|
|
// // : Colors.grey[300],
|
|
// // foregroundColor: _currentPage == i
|
|
// // ? Colors.white
|
|
// // : Colors.black,
|
|
// // minimumSize: Size(36, 36),
|
|
// // padding: EdgeInsets.zero,
|
|
// // ),
|
|
// // onPressed: () {
|
|
// // setState(() {
|
|
// // _currentPage = i;
|
|
// // });
|
|
// // },
|
|
// // child: Text(i.toString()),
|
|
// // ),
|
|
// // ),
|
|
// // IconButton(
|
|
// // onPressed: currentPage < (totalItems / itemsPerPage).ceil()
|
|
// // ? () {
|
|
// // setState(() {
|
|
// // currentPage++;
|
|
// // });
|
|
// // }
|
|
// // : null,
|
|
// // icon: Icon(Icons.chevron_right),
|
|
// // ),
|
|
// // ],
|
|
// // // children: [
|
|
// // // 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, size: 18),
|
|
// // // onPressed: currentPage > 0
|
|
// // // ? () => onPageChanged(currentPage - 1)
|
|
// // // : null,
|
|
// // // ),
|
|
// // //
|
|
// // // SingleChildScrollView(
|
|
// // // scrollDirection: Axis.horizontal,
|
|
// // // child: Row(children: _buildPageButtons()),
|
|
// // // ),
|
|
// // //
|
|
// // // IconButton(
|
|
// // // icon: Icon(Icons.arrow_forward, size: 18),
|
|
// // // 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
|
|
// ? Color(0xFFD4F8F3)
|
|
// : Color(0xFFEDF6F5),
|
|
//
|
|
// foregroundColor: currentPage == pageIndex
|
|
// ? Colors.black
|
|
// : Colors.grey,
|
|
// 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)),
|
|
// );
|
|
// }
|
|
// }
|