Can't get onChanged properly work with GetX

Question

I am learning GetX. I am trying to write simple app that display text field and allow to edit it. So user can click on default text and continue to editing it.

But I am confused with onChange actions and controllers. I am not sure that I am using them properly because next code do not printing noting in console, so it's seems that TextEditingController did not bind with data.

Here copy-past code:

import 'package:flutter/material.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  var mycontroller = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(child: TextField(
              controller: TextEditingController(text: mycontroller.text),
              onChanged: (value) {
                mycontroller.changeText();
              }
      ))
    ));
  }
}

controller:

import 'package:flutter/material.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart';

class MyController extends GetxController {

    var _text = "".obs;
    TextEditingController _controller;

    get text => this._text.value;
    set text(value) => this._text.value = value;
    
    @override
    void onInit() async  {
      super.onInit();
      _controller = TextEditingController();
      _text.value = "Hello World"; 

       _controller.addListener(changeText);
    }

    changeText() {
      _text.value = _controller.text;
      print(_text.value); // nothing is printed on Console!
    }

}

And the second question. If I need two text fields how I need to organize code? Do I need to different _controller.addListener(changeText); like: _controller.addListener(changeText1); _controller.addListener(changeText2);?

Answer 1

Getting the value of textfield as it changes can be done by utilizing Textfieldcontroller as well as by using onchanged method, you are deploying both of them in your code, which is not necessary. You can monitor textfield value either ways. Read more on above here https://flutter.dev/docs/cookbook/forms/text-field-changes.

In case of you wish to use Textfieldcontroller, it(Textfieldcontroller) need to be creatated in MyController which is little complicated and I dont use this approach. How you can use onchanged with GetX is mentioned below.

mycontroller.dart

var _text = "".obs;

get getText => _text.value;
set setText(String screenvalue) => _text.value = screenvalue;

// there is no need of initiating textcontroller here in mycontroller.dart

yourscreen.dart

class MyApp extends StatelessWidget {
  final mycontroller = Get.put(MyController());
  // intiate TextEditingController in screen
  var textValueController = TextEditingController();

home: Scaffold(
  body: 
  
Column(
children: [  
  
  Container(child: TextField(
    // initiate TextEditingController normally in screen itself 
    // if you wish to use it for purpose of submitting form data
    // or for validation purpose
    controller: textValueController,
    onChanged: (value) {
      mycontroller.setText (value);
    }
  )),

  Obx(() {
    return Text(
      'Your text updated as typed = ${mycontroller.getText}',
    );
  }),
  
],
))}

Answer 2

Dmitry,

I too am learning GetX so not 100% with it all just yet.

As a starter, it appears you are using two different TextEditingControllers! One in MyController and one in MyApp may need to make MyController one not private and use it on MyApp.

The second question is easy as you can/should create a TextEditingController for each text field.