When I create a PaginatedDataTable, the width of the table extends all across the page (probably because of the footer). See below:
What I want is to get something like this that fits the width of the table:
Here's a minimal example:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Paginated data table demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'Top 3 cities in US:',
),
PaginatedDataTable(
columns: const <DataColumn>[
DataColumn(label: Text('City Name')),
DataColumn(label: Text('State')),
DataColumn(label: Text('Population'), numeric: true),
],
source: _DataTableSource(),
rowsPerPage: 3,
),
],
),
),
);
}
}
class _DataTableSource extends DataTableSource {
final _data = [
['New York City', 'NY', 8622357],
['Los Angeles', 'CA', 4085014],
['Chicago', 'IL', 2670406],
];
@override
DataRow? getRow(int index) {
var row = _data[index];
return DataRow(cells: [
DataCell(Text(row[0].toString())),
DataCell(Text(row[1].toString())),
DataCell(Text(row[2].toString())),
]);
}
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => 3;
@override
int get selectedRowCount => 0;
}
If I wrap my PaginatedDataTable in a SizedBox with width: 400, I get the second image. But how to do it when I don't know the width beforehand, or when the width is dynamic?
Many thanks!