How to display user data in an edit form using 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

Set the data to the text field

setState (() { 
           lastNameController.text = model.lastName ;
             });

Assign Controller to your textform field

TextFormField(
                controller: lastNameController,
              ),

Answer 3

@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,
      ),
 ],
)