Flutter - Paginated Datatable bottom font coloring and layout

2.1k views Asked by At

I've got here my paginated data table wrapped with a theme widget to add the backgroundcolor:

return Theme(
    data: Theme.of(context).copyWith(
      cardColor: Color(0xff1D202C),
      dividerColor: Color(0xff333333),
    ),
    child: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: PaginatedDataTable(
        columns: getColumns(),
        source: RecordsSource(),
      ),
    ),
  );

And I've specified the row color by using color: MaterialStateColor.resolvewith(){} inside my DataRow.byindex method(which is within the DataTableSource, named as RecordsSource above) and it looks like this: enter image description here

So the problem is - how can I color the font of the pages at the bottom and reduce its height? To be specific, I mean the 1-10 of 11 and < > which is barely visible since the theme of my app is dark bluish.

And another problem is about layout. So the expected amount of rows is 100 and I want it 20 rows per page. However occasionally, there can be - e.g 11 rows only(since the data is from an api), so it will look like this on the second page:enter image description here

How do I make the table to only show one line on this page? For detailed code, feel free to visit https://github1s.com/davidp918/KZStats/blob/main/lib/pages/details/map_detail.dart and the paginated datatable code begins at line 233

1

There are 1 answers

0
Sara On

for changing the color of the bottom counter of pages (1-10 of 20):

wrap the PaginatedDataTable widget with a theme widget, and change the color of "caption" property:

Theme(
        data: ThemeData(cardColor: Theme.of(context).cardColor, textTheme: TextTheme(caption: TextStyle(color: Colors.white))),
child:PaginatedDataTable(..