How to design this kind of paging?
This is my User Interface design of paging.
That is is what I coded. How to remove "1 of 8 pages" and arrange the paging navigator into center?
SizedBox(
width: constraints.maxWidth,
height: 425,
child: buildDataGrid(constraints),
),
SizedBox(
width: constraints.maxWidth,
child: SfDataPager(
pageCount: pageCount,
direction: Axis.horizontal,
delegate: _storeDataSource,
onPageNavigationStart: (int pageIndex) {
print('777777777');
// showLoadingIndicator.value = true;
},
onPageNavigationEnd: (int pageIndex) {
print('88888888');
// showLoadingIndicator.value = false;
},
),
),
Hi WONG PEI SAN,
As per the implementation of DataPager, the dataPagerLabel is configured to become visible when the available width exceeds 975; otherwise, it remains hidden in the view. To meet your specific requirements, you have the flexibility to adjust the DataPager's width. You can set it to half of the available screen width or to any value less than 975 to hide the label. Opting for a width equal to half of the available screen width will result in the label being centered. For a more detailed explanation, please review the provided code snippet.
|
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: const Text('PageNavigation Demo')), body: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return Column( children: [ SizedBox( height: constraints.maxHeight - 60, child: SfDataGrid( source: _employeeDataSource, rowsPerPage: rowsPerPage, columns: getColumns, columnWidthMode: ColumnWidthMode.fill, ), ), SizedBox( height: 60, width: constraints.maxWidth / 2, child: SfDataPager( pageCount: pageCount, delegate: _employeeDataSource), ), ], ); }, ), ); } |
Regards,
Tamilarasan
Note: If this post is helpful, please consider Accepting it
as the solution so that other members can locate it more quickly.
How to do the paging like this?
it will show the row data startIndex to endIndex per page and total length of data
how to arrage the sorting symbol beside the title?
and use this symbol instead.
How to show the paging like this?
This what shown in my code
How to do the pagination bar like this. It will show the number of row data in the page, which means in this page there is data[1] until data[7] and total data in the list is 8. Beside that, there will be the previous and next page button which arrange at the right bottom page
