Flutter Dropdown value not updating and UI not updating when submitting - flutter

Question

I am working on a flutter project to display a Scrumboard, this is my first time working with flutter. I have a TextButton that opens a dialog when onpressed. The dialog is a form where you can edit details about a Scrumtask. I have discovered 2 issues. 1. issue is when i use the dropdownmenu and select a value. The value doenst get updated. 2. Lets say i edit a Scrumtask and set the state from 'Todo' to 'In Progress' from the dropdownmenu and submit, the UI doesn't move that Task object to the 'In Progress' column.
I hope the code I have provided is enough otherwise let me know.
Scrumboardscreen.dart
TextButton(
child: Text('Change'),
onPressed: () {
showDialog(
context: context,
builder: ((context) {
return AlertDialog(
title: Text('Task Informations'),
content: Form(
key: _formKey,
child: Column(
children: [
Text('Task Name'),
TextFormField(
controller: textscontrollers[0],
decoration: InputDecoration(
hintText: data[listIndex]
.items[itemIndex]
.taskName,
),
validator: (text) {
if (text == null || text.isEmpty) {
return 'Task Name cant be empty';
}
return null;
},
),
Text('Task Description'),
TextFormField(
controller: textscontrollers[1],
decoration: InputDecoration(
hintText: data[listIndex]
.items[itemIndex]
.taskDescription,
),
validator: (text) {
if (text == null || text.isEmpty) {
return 'Task Description cant be empty';
}
return null;
},
),
Text('Story Points'),
TextFormField(
controller: textscontrollers[2],
decoration: InputDecoration(
hintText: data[listIndex]
.items[itemIndex]
.storyPoints
.toString(),
),
validator: (text) {
if (text == null || text.isEmpty) {
return 'Story Points cant be empty';
}
return null;
},
),
Text('Task State'),
DropdownButton<String>(
value: data[listIndex]
.items[itemIndex]
.taskState,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(
color: Colors.blue,
),
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (String? value) {
setState(() {
data[listIndex]
.items[itemIndex]
.taskState = value!;
});
},
items: states
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!
.validate()) {
_UpdateTask(data[listIndex]
.items[itemIndex]);
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(
content:
Text('Updated Task')));
Navigator.of(context).pop();
}
},
child: Text('Submit Changes'),
)
],
),
),
);
}));
},
),
This method is being in the Futurebuilder and shows data on the UI
Future<List<BoardPostColumn>> GetData() async {
if (data.isEmpty) {
data = await manager.GetData();
}
return data;
}
The update method
void _UpdateTask(BoardPost task) async {
task.taskName = textscontrollers[0].text;
task.taskDescription = textscontrollers[1].text;
task.storyPoints = int.parse(textscontrollers[2].text);
BoardPost result = await manager.UpdateTask(task);
setState(() {
//My understanding that this would update the UI
task = result;
textscontrollers[0].clear();
textscontrollers[1].clear();
textscontrollers[2].clear();
});
}
Manager class
Future<BoardPost> UpdateTask(BoardPost task) async {
return handler.UpdateTask(task);
}
ApiHandler.dart
Future<BoardPost> UpdateTask(BoardPost task) async {
Response response = await post(
Uri.parse('https://localhost:7252/api/ScrumTask/UpdateScrumTask'),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(<String, dynamic>{
'id': task.id,
'taskName': task.taskName,
'taskDescription': task.taskDescription,
'storyPoints': task.storyPoints,
'taskState': task.taskState
}));
if (response.statusCode == 200) {
Map<String, dynamic> ScrumMap = jsonDecode(response.body);
return BoardPost.fromJson(ScrumMap);
} else {
throw Exception('Failed to Update');
}
}
class BoardPost {
int? id;
String? taskName;
String? taskDescription;
int? storyPoints;
String? taskState;
BoardPost(
{this.id,
this.taskName,
this.taskDescription,
this.storyPoints,
this.taskState});
BoardPost.fromJson(Map<String, dynamic> json) {
id = json['id'];
taskName = json['taskName'];
taskDescription = json['taskDescription'];
storyPoints = json['storyPoints'];
taskState = json['taskState'];
}
This class here is the one that will be displaying all the data
class BoardPostColumn {
String title;
List<BoardPost> items;
BoardPostColumn({
required this.title,
required this.items,
});
}
Manager class that returns the data provided from api
Future<List<BoardPostColumn>> GetData() async {
Response responseBody = await handler.GetData();
List<BoardPostColumn> data = [];
List<BoardPost> tasks = (json.decode(responseBody.body) as List)
.map((data) => BoardPost.fromJson(data))
.toList();
data.add(BoardPostColumn(
title: 'To do',
items:
tasks.where((e) => e.taskState?.toLowerCase() == 'todo').toList()));
data.add(BoardPostColumn(
title: 'In Progress',
items: tasks
.where((e) => e.taskState?.toLowerCase() == 'in progress')
.toList()));
data.add(BoardPostColumn(
title: 'Done',
items:
tasks.where((e) => e.taskState?.toLowerCase() == 'done').toList()));
return data;
}

Answer 1

Try to use StatefulBuilder inside showDialog to update the dialog ui.
showDialog(
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setStateSB) => AlertDialog(...),)
},
);
Use this setStateSB as setState to update the dialog ui, You may need to pass this setStateSB on the function or call it setStateSB((){}) at the end of the function call.