How to display user data in an edit form using Flutter? - flutter

Question

I'm building an application for the company I'm working for in Flutter. We are using the MVVM (Model, View, ViewModel) architecture with the other developer I'm working with.
I would like to display user data from my ViewModel to my edit form (those data are fetched through our API).
The problem is: the data won't display to my view. I have access to it and I can print it (see screenshots below)...
What I tried so far :
I used initialValue primarily and called, for instance, my 'lastName' variable (but it doesn't show anything)
I tried using a controller for each field. With this method, it shows my user data but I then have a weird keyboard issue where each time I want to type some content, the cursor just goes to the start and deletes the word.
Also, I noticed that my variable can be displayed in a Text() widget.
I'm pretty clueless and I would really love to get an answer on this bug.
class MyAccountViewModel with ChangeNotifier {
String _lastName;
MyAccountViewModel() {
// this._lastName = 'Hardcoded text';
ApiHelper api = new ApiHelper();
api.getUserData().then((Map<String, dynamic>response) {
print(response);
this._lastName = response['last_name'];
});
notifyListeners();
}
String get lastName => this._lastName;
set lastName(String value) {
this._lastName = value;
notifyListeners();
}
Widget editProfileForm(model, BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
initialValue: model.lastName,
),
],
),
);
}
current view
response after the API call

Answer 1

Thanks to the answer I received in this post, I managed to find a working solution.
As advised in the previous comments, I needed to instantiate a controller and bind for instance "lastName" from my api response to controller.text.
Here is a sample code using the MVVM architecture :
class MyAccountViewModel with ChangeNotifier {
TextEditingController _lastNameController;
MyAccountViewModel() {
_lastNameController = new TextEditingController();
ApiHelper api = new ApiHelper();
api.getUserData().then((Map<String, dynamic> response) {
this._lastNameController.text = response['last_name'];
notifyListeners();
});
}
TextEditingController get lastName => this._lastNameController;
set lastName(TextEditingController value) {
this._lastNameController = value;
notifyListeners();
}
}
Widget editProfileForm(model, BuildContext context) {
return Form(
key: _formKey,
child: TextFormField(
controller: model.lastName,
),
);
}

Answer 2

#Metr0me, have you tried using controller to update the value? It could look something like this,
Initialize the controller as final lastNameController = TextEditingController();
Assign text value to the controller when you have your model instance as,
MyAccountViewModel model = new MyAccount.....
lastNameController.text = model.lastName;
setState(() {}); //Refresh if you need to
Assign lastNameController to your form field as,
child: Column(
children: <Widget>[
TextFormField(
controller: lastNameController,
),
],
)

Answer 3

Set the data to the text field
setState (() {
lastNameController.text = model.lastName ;
});
Assign Controller to your textform field
TextFormField(
controller: lastNameController,
),