0

When I create a PaginatedDataTable, the width of the table extends all across the page (probably because of the footer). See below: enter image description here

What I want is to get something like this that fits the width of the table:

enter image description here

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!

0 Answers0