Flutter - How can I add rows to a PaginatedDataTable by taking values from a TextField?

Question

I want to add a row after the user has entered their info and pressed a button. Right now when I press the button, an object is added to the User list but the PaginatedDataTable doesn't update to show that the row has been added.

import 'package:flutter/material.dart';

TextEditingController firstNameController = TextEditingController();
TextEditingController lastNameController = TextEditingController();

class UserDataTable extends StatefulWidget {
  const UserDataTable({Key key}) : super(key: key);

  @override
  _UserDataTableState createState() => _UserDataTableState();
}

class _UserDataTableState extends State<UserDataTable> {
  int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
  var dataSource = new CustomerDataSource();

  @override
  void initState() {
    super.initState();
  }

  void dispose() {
    firstNameController.dispose();
    lastNameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'First Name',
            ),
            controller: firstNameController,
          ),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Last Name',
            ),
            controller: lastNameController,
          ),
          MaterialButton(
            color: Color.fromRGBO(163, 22, 0, 100),
            minWidth: 200,
            onPressed: () {
              setState(() {
                dataSource.addRow(0);
                firstNameController.clear();
                lastNameController.clear();
              });
            },
            child: Text(
              'Add User',
              style: TextStyle(color: Colors.white),
            ),
          ),
          PaginatedDataTable(
            header: const Text('Users'),
            rowsPerPage: _rowsPerPage,
            availableRowsPerPage: const <int>[5, 10, 20],
            onRowsPerPageChanged: (int value) {
              setState(() {
                _rowsPerPage = value;
              });
            },
            columns: tableColumns,
            source: dataSource,
          ),
        ],
      ),
    );
  }
}

const tableColumns = <DataColumn>[
  DataColumn(label: Text('FirstName')),
  DataColumn(
    label: Text('LastName'),
  ),
];

class User {
  User(
    this.firstName,
    this.lastName,
  );
  final String firstName;
  final String lastName;

  bool selected = false;
}

class CustomerDataSource extends DataTableSource {
  int _selectedCount = 0;
  final List<User> users = <User>[];

  @override
  DataRow getRow(int index) {
    assert(index >= 0);
    if (index >= users.length) return null;
    final User user = users[index];
    return DataRow.byIndex(index: index, cells: <DataCell>[
      DataCell(Text(firstNameController.text = user.firstName)),
      DataCell(Text(lastNameController.text = user.lastName)),
    ]);
  }

  void addRow(int index) {
    users.add(User(firstNameController.text, lastNameController.text));
  }

  @override
  int get rowCount => users.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;
}

Answer 1

I was missing the notify notifyListeners(); in the addRow() method. I added the updated code with the notifyListeners(); to this answer.

import 'package:flutter/material.dart';

TextEditingController firstNameController = TextEditingController();
TextEditingController lastNameController = TextEditingController();

class UserDataTable extends StatefulWidget {
  const UserDataTable({Key key}) : super(key: key);

  @override
  _UserDataTableState createState() => _UserDataTableState();
}

class _UserDataTableState extends State<UserDataTable> {
  int _rowsPerPage = PaginatedDataTable.defaultRowsPerPage;
  var dataSource = new CustomerDataSource();

  @override
  void initState() {
    super.initState();
  }

  void dispose() {
    firstNameController.dispose();
    lastNameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'First Name',
            ),
            controller: firstNameController,
          ),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Last Name',
            ),
            controller: lastNameController,
          ),
          MaterialButton(
            color: Color.fromRGBO(163, 22, 0, 100),
            minWidth: 200,
            onPressed: () {
              setState(() {
                dataSource.addRow(0);
                firstNameController.clear();
                lastNameController.clear();
              });
            },
            child: Text(
              'Add User',
              style: TextStyle(color: Colors.white),
            ),
          ),
          PaginatedDataTable(
            header: const Text('Users'),
            rowsPerPage: _rowsPerPage,
            availableRowsPerPage: const <int>[5, 10, 20],
            onRowsPerPageChanged: (int value) {
              setState(() {
                _rowsPerPage = value;
              });
            },
            columns: tableColumns,
            source: dataSource,
          ),
        ],
      ),
    );
  }
}

const tableColumns = <DataColumn>[
  DataColumn(label: Text('FirstName')),
  DataColumn(
    label: Text('LastName'),
  ),
];

class User {
  User(
    this.firstName,
    this.lastName,
  );
  final String firstName;
  final String lastName;

  bool selected = false;
}

class CustomerDataSource extends DataTableSource {
  int _selectedCount = 0;
  final List<User> users = <User>[];

  @override
  DataRow getRow(int index) {
    assert(index >= 0);
    if (index >= users.length) return null;
    final User user = users[index];
    return DataRow.byIndex(index: index, cells: <DataCell>[
      DataCell(Text(user.firstName)),
      DataCell(Text(user.lastName)),
    ]);
  }

  void addRow(int index) {
    users.add(User(firstNameController.text, lastNameController.text));
    notifyListeners();
  }

  @override
  int get rowCount => users.length;

  @override
  bool get isRowCountApproximate => false;

  @override
  int get selectedRowCount => _selectedCount;
}