How to fix top row and first column to be always visible in a datatable

I have a data table that scrolls horizontally and vertically due to the amount of data available. I want the top row which specifies the column names to always be visible when scrolling down vertically and the leftmost column to always be visible when scrolling horizontally.

@override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text(appTitle),
    ),
    body: DataTableWidget(),
  );

class DataTableWidgetState extends State<DataTableWidget> {

  @override
  Widget build(BuildContext context) {
    final width = 100 * cityColumns.length;
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: width * 1.4,
        child: ListView(
          children: <Widget>[
            buildDataTable(),
          ],
        ),
      ),
    );
  }

  Widget buildDataTable() => DataTable(
    sortAscending: ascending,
    sortColumnIndex: 0,
    columns: cityColumns
        .map(
          (String column) => DataColumn(
        label: Text(column),
        onSort: (int columnIndex, bool ascending) => onSortColumn(
            columnIndex: columnIndex, ascending: ascending),
      ),
    )
        .toList(),
    rows: cities
        .map((City city) => DataRow(
      selected: selectedCities.contains(city),
      cells: [
        DataCell(Text('${city.name}')),
        DataCell(Text('${city.nation}')),
        DataCell(Text('${city.name2}')),
        DataCell(Text('${city.nation2}')),
        DataCell(Text('${city.name3}')),
        DataCell(Text('${city.nation3}')),
        DataCell(Text('${city.population}')),
        DataCell(Text('${city.nation}')),
      ],
    ))
        .toList(),
  );
}