Flutter DropDownButton value not changing after selecting a new value

Question

I have been trying to make an external UI that a user can use to make certain changes to a database(dynamodb) in the cloud. When I select a new value, I want it to show the change that the user wants to make, without actually changing the database. The changes are saved only when I press a button on the appbar. Also when I use setState to rebuild the button, the value doesn't change on the cloud and it also changes the value for all of the buttons in the column(works fine without a setState). The code that I have provided changes the database when I press the save icon, but the drop-down button value stays the same unless I refresh the page. I apologize if I haven't explained my issue clearly enough, this is my first time posting on Stackoverflow, and I'm still learning about how to work with flutter and aws amplify.

body: InteractiveViewer(
    constrained: false,
    child: DataTable(
        columns: [
          DataColumn(label: Text('Apt #')),
          DataColumn(label: Text('Type')),
          DataColumn(label: Text('Availability')),
          DataColumn(label: Text('Price')),
          DataColumn(label: Text('Area'))
        ],
        rows: aprts.map<DataRow>((element) { //aprts is a list that contains apartment objects.
          return DataRow(cells: [
            DataCell(Text(element.aptNum.toString())),
            DataCell(Text(element.type)),
            DataCell(DropdownButton<String>( /// this is the part im having problems wi
              value: element.availabily, // gets the value for the availability attribute for the element and stores it into value.
              onChanged: (String newValue) {
                availValue = newValue; //stores the newValue in a global variable that is used in a function that is used toactually make changes to the database.
                tempAvail = element;
                
              },
              items: <String>['AVAILABLE', 'SOLD', 'RESERVED']
                  .map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            )), // end of problem. 
            DataCell(TextField(
              controller: TextEditingController()
                ..text = element.price.toString(),
              onChanged: (text) {
                aptPrice = text;
                tempPrice = element;
              },
            )),
            DataCell(TextField(
              controller: TextEditingController()..text = element.area,
              onChanged: (text) {
                aptArea = text; 
                tempArea = element;
              },
            )),
          ]);
        }).toList()),
  ),

What the app looks like. After pressing the button

Answer 1

Use

onChanged: (String newValue) {
                setState(() {
                   availValue = newValue; 
                   tempAvail = element;
                  }
                 )
                },

because for every change in the UI you must call setState((){})