Flutter Paginated data table fill height - flutter

Question

I'm trying to create Paginated Data Table to fill the height. However, whatever I'm trying nothing seems to work. How can I make the table fill the height? Also, how can I change the pagination background color?
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(state.department.name),
),
body: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(onPressed: () {}, child: Text('TEst 1')),
TextButton(onPressed: () {}, child: Text('TEst 1'))
],
),
Container(
child: PaginatedDataTable(
showCheckboxColumn: false,
headingRowHeight: 35,
columns: const <DataColumn>[
DataColumn(
label: Text(
'First Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Last Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Id',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Time',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Operator',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
source: tableSource
),
)
],
),
);
}
With Container the container itself is filling up the height, but the paginated data table not.

Answer 1

Solution
static const double topViewHeight = 50.0;
static const double paginateDataTableHeaderRowHeight = 35.0;
static const double pagerWidgetHeight = 56;
static const double paginateDataTableRowHeight = kMinInteractiveDimension;
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Hello'),
),
body: LayoutBuilder(
builder: (context, constraint) {
return Column(
children: <Widget>[
Container(
width: constraint.maxWidth,
height: topViewHeight,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(onPressed: () {}, child: Text('TEst 1')),
TextButton(onPressed: () {}, child: Text('TEst 1'))
],
),
),
Container(
color: Colors.greenAccent,
height: constraint.maxHeight - topViewHeight,
child: Center(
child: PaginatedDataTable(
showCheckboxColumn: false,
headingRowHeight: paginateDataTableHeaderRowHeight,
rowsPerPage: ((constraint.maxHeight -
topViewHeight -
paginateDataTableHeaderRowHeight -
pagerWidgetHeight) ~/
paginateDataTableRowHeight)
.toInt(),
columns: const <DataColumn>[
DataColumn(
label: Text(
'First Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
source: TableSource()),
))
],
);
},
),
);
}
Need to know
note:
Column is an infinite height constraint so it will not suit to fit the height.
If, you warp the column inside the SingleChildScrollViewWidget to avoid constraint errors and warnings

Answer 2

There's a derivative of Flutter's DataTable widget on pub.dev (called DataTable2) which solves exactly that issues - filling the height of the parent widget. It is in-place substitute for DataTable and also provides data rows scrolling and sticky header.
https://pub.dev/packages/data_table_2