title: Flutter: getx controller not updated when list data changed. How can i make sure with every list added, GetX controller knows that?
body: <p>I simply have a form in stepper there are two fields Name and Email. The Add button works fine and add name and email to list as expected. When I click on save, The JSON data is printed with all the data available in the list.</p>
  <p><a href="https://i.stack.imgur.com/4WfoJ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4WfoJ.gif" alt="enter image description here" /></a></p>
  <pre><code>[{&quot;Name&quot;:&quot;first language&quot;,&quot;Email&quot;:&quot;first value&quot;},{&quot;Name&quot;:&quot;second language&quot;,&quot;Email&quot;:&quot;second value&quot;},{&quot;Name&quot;:&quot;third language&quot;,&quot;Email&quot;:&quot;third value&quot;},{&quot;Name&quot;:&quot;test&quot;,&quot;Email&quot;:&quot;test&quot;}]
  </code></pre>
  <p>But, when i click on save button at the bottom, The hard coded list is printed and not the data we entered.</p>
  <p><a href="https://i.stack.imgur.com/EArCW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EArCW.gif" alt="enter image description here" /></a></p>
  <p>The output is the following. I wanted to get all the list data inside JSON. Currently, the following doesn't have the manually inserted data from list.:</p>
  <pre><code>{&quot;User Data&quot;:[{&quot;Name&quot;:&quot;first language&quot;,&quot;Email&quot;:&quot;first value&quot;},{&quot;Name&quot;:&quot;second language&quot;,&quot;Email&quot;:&quot;second value&quot;},{&quot;Name&quot;:&quot;third language&quot;,&quot;Email&quot;:&quot;third value&quot;}]}
  </code></pre>
  <p>The code is as below: -</p>
  <ol>
  <li>model.dart</li>
  </ol>
  <pre><code>    class User {
        String name;
        String email;
      
        User({this.name, this.email});
      
        Map toJson() =&gt; {
              'Name': name,
              'Email': email,
            };
      }
  
  class JSONGenerate {
    List&lt;User&gt; userData;
  
    JSONGenerate([this.userData]);
  
    Map toJson() {
      List&lt;Map&gt; userData = this.userData != null
          ? this.userData.map((i) =&gt; i.toJson()).toList()
          : null;
  
      return {
        'User Data': userData,
      };
    }
  } 
  </code></pre>
  <ol start="2">
  <li>User.dart</li>
  </ol>
  <pre><code>class UserMinor extends StatefulWidget {
    @override
    _UserMinorState createState() =&gt; _UserMinorState();
  }
  
  class _UserMinorState extends State&lt;UserMinor&gt; {
    final form = GlobalKey&lt;FormState&gt;();
    static var _focusNode = new FocusNode();
    // finding same instance if initialized controller
    final controller = Get.find&lt;UserMinorController&gt;();
    @override
    Widget build(BuildContext context) {
      Widget bodyData() =&gt; DataTable(
            onSelectAll: (b) {},
            sortColumnIndex: 0,
            sortAscending: true,
            columns: &lt;DataColumn&gt;[
              DataColumn(label: Text(&quot;User Name&quot;), tooltip: &quot;User Name&quot;),
              DataColumn(label: Text(&quot;User Email&quot;), tooltip: &quot;User Email&quot;),
            ],
            rows: controller.userList // accessing list from Getx controller
                .map(
                  (user) =&gt; DataRow(
                    cells: [
                      DataCell(
                        Text(user.name),
                      ),
                      DataCell(
                        Text(user.email),
                      ),
                    ],
                  ),
                )
                .toList(),
          );
  
      return Padding(
        padding: EdgeInsets.all(10.0),
        child: Column(
          children: &lt;Widget&gt;[
            Padding(
              padding: EdgeInsets.all(10.0),
              child: Form(
                key: form,
                child: Container(
                  child: Column(
                    children: &lt;Widget&gt;[
                      TextFormField(
                        controller: controller.nameController,
                        focusNode: _focusNode,
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        maxLines: 1,
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'This field is required';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          labelText: 'Name',
                          hintText: 'Name',
                          labelStyle: new TextStyle(
                              decorationStyle: TextDecorationStyle.solid),
                        ),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      TextFormField(
                        controller: controller.emailController,
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        maxLines: 1,
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'This field is required';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                            labelText: 'Email',
                            hintText: 'Email',
                            labelStyle: new TextStyle(
                                decorationStyle: TextDecorationStyle.solid)),
                      ),
                      SizedBox(
                        height: 10,
                      ),
                      Column(
                        children: &lt;Widget&gt;[
                          Center(
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: &lt;Widget&gt;[
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: &lt;Widget&gt;[
                                    TextButton(
                                      child: Text(&quot;Add&quot;),
                                      onPressed: () {
                                        if (validate() == true) {
                                          form.currentState.save();
                                          controller.addLanguagetoList(
                                            controller.nameController.text,
                                            controller.emailController.text,
                                          );
                                        }
                                      },
                                    ),
                                    ElevatedButton(
                                        child: Text(&quot;Save&quot;),
                                        onPressed: () {
                                          form.currentState.save();
                                          String minorlanguageListJson =
                                              jsonEncode(controller.userList);
                                          print(minorlanguageListJson);
                                        }),
                                  ],
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),
            // GetBuilder rebuilds when update() is called
            GetBuilder&lt;UserMinorController&gt;(
              builder: (controller) =&gt; bodyData(),
            ),
          ],
        ),
      );
    }
  
    bool validate() {
      var valid = form.currentState.validate();
      if (valid) form.currentState.save();
      return valid;
    }
  }
  </code></pre>
  <ol start="3">
  <li>stepper.dart</li>
  </ol>
  <pre><code>class StepperBody extends StatefulWidget {
    @override
    _StepperBodyState createState() =&gt; new _StepperBodyState();
  }
  
  class _StepperBodyState extends State&lt;StepperBody&gt; {
    int currStep = 0;
    static var _focusNode = new FocusNode();
    GlobalKey&lt;FormState&gt; _formKey = new GlobalKey&lt;FormState&gt;();
  
    @override
    void initState() {
      super.initState();
      _focusNode.addListener(() {
        setState(() {});
        print('Has focus: $_focusNode.hasFocus');
      });
    }
  
    @override
    void dispose() {
      _focusNode.dispose();
      super.dispose();
    }
  
    List&lt;Step&gt; steps = [
      new Step(
        title: const Text('Technical Language Basics'),
        isActive: true,
        state: StepState.indexed,
        content: UserMinor(),
      ),
    ];
  
    @override
    Widget build(BuildContext context) {
      return Container(
        child: new Form(
          key: _formKey,
          child: new ListView(
            children: &lt;Widget&gt;[
              new Stepper(
                steps: steps,
                type: StepperType.vertical,
                currentStep: this.currStep,
                onStepContinue: () {
                  setState(() {
                    if (currStep &lt; steps.length - 1) {
                      currStep = currStep + 1;
                    } else {
                      currStep = 0;
                    }
                  });
                },
                onStepCancel: () {
                  setState(() {
                    if (currStep &gt; 0) {
                      currStep = currStep - 1;
                    } else {
                      currStep = 0;
                    }
                  });
                },
                onStepTapped: (step) {
                  setState(() {
                    currStep = step;
                  });
                },
              ),
              new ElevatedButton(
                child: new Text(
                  'Save details',
                  style: new TextStyle(color: Colors.white),
                ),
                onPressed: () {
                  var technicalInfo = UserMinorController().userList;
                  JSONGenerate jsonGenerate = JSONGenerate(technicalInfo);
                  print(
                    jsonEncode(jsonGenerate),
                  );
                },
              ),
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <ol start="4">
  <li>GetX Controller class</li>
  </ol>
  <pre><code>    class UserMinorController extends GetxController {
        TextEditingController nameController = TextEditingController();
        TextEditingController emailController = TextEditingController();
        int currentIndex = 0;
      
        List&lt;User&gt; userList = [
          User(name: &quot;first language&quot;, email: &quot;first value&quot;),
          User(name: &quot;second language&quot;, email: &quot;second value&quot;),
          User(name: &quot;third language&quot;, email: &quot;third value&quot;),
        ];
      
      
      
        void addLanguagetoList(name, email) {
          userList.add(User(name: name, email: email));
          update();
        }
      }
  </code></pre>