How to listen changes inside TextController?

Question

I am using GetX. I need to listen changes in TextController. The follow code do not work:

class Controller extends GetxController{

  final txtList = TextEditingController().obs;

  @override
  void onInit() {
    debounce(txtList, (_) { 
      print("debouce$_");
      }, time: Duration(seconds: 1));
    super.onInit();
  }

}

Is does not print nothing when I am changing txtList value from UI. I suppose it's because it does not check text field inside txtList.

How to get it work?

TextEditingController().obs wont work! either you use onchange property of textfield or you add a listener to the controller on Init and try printing. — Krish Bhanushali, Oct 27 '21 at 16:44

score 3 · Accepted Answer · answered Nov 12 '21 at 14:36

You need to pass an RxInterface into debounce to do this via GetX. Just create an RxString and add a listener to the controller then pass the RxString into debounce.

class Controller extends GetxController {
  final txtList = TextEditingController();

  RxString controllerText = ''.obs;

  @override
  void onInit() {
    txtList.addListener(() {
      controllerText.value = txtList.text;
    });
    
    debounce(controllerText, (_) {
      print("debouce$_");
    }, time: Duration(seconds: 1));
    super.onInit();
  }
}

Then on any page in the app you can pass in that controller into the textfield and it'll print the value after the user stops typing for 1 second.

class Home extends StatelessWidget {
 final controller = Get.put(Controller());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextField(controller: controller.txtList), // this will print
      ),
    );
  }
}

And if you need that value for anything else it's also always accessible via controller.controllerText.value.

Broccoli_Salad · Answer 2 · 2021-11-21T08:42:06.150

By TextEditingController.text, we can already get changing text input value so it does not need .obs.
To pass parameter for debounce, we should pass value itself : txtList.text. (see here: https://github.com/jonataslaw/getx/blob/master/documentation/en_US/state_management.md)

final txtList = TextEditingController(); // 1. here

  @override
  void onInit() {
    debounce(txtList.text, (_) {  // 2. here
      print("debouce$_");
     }, time: Duration(seconds: 1));
    super.onInit();
  }

This might work.

=================== added 11/21 ==================

Here's the example. I know the RxString variable seems a duplication for TextEditingController.text, but GetX's debounce function needs RxString type variable as a parameter. I tried to find more elegant way to do this, but I couldn't find anything. Please let me know if somebody knows a better way.

// in controller

  late final TextEditingController textController;
  final RxString userInput = "".obs;

  @override
  void onInit() {
    super.onInit();
    textController = TextEditingController();
    userInput.value = textController.text;

    textController.addListener(() {
            userInput.value = textController.text;
        }
    );

    
    debounce(userInput, (_) {
      print("debouce$_");
     }, time: Duration(seconds: 1));
  }

I am getting error: `The argument type 'String' can't be assigned to the parameter type 'RxInterface — Dmitry Bubnenkov, Nov 02 '21 at 11:00
Sorry. You might need to define `RxString` type variable and use it instead of `txtList.text`. — Broccoli_Salad, Nov 03 '21 at 05:35
but my type is `TextEditingController`, not `RxString`. `TextEditingController` is needed for controller of surch type. Could you show me full example. — Dmitry Bubnenkov, Nov 08 '21 at 08:43
Sorry for late response. I edited my answer with example. @DmitryBubnenkov — Broccoli_Salad, Nov 21 '21 at 08:36

score 0 · Answer 3 · answered Oct 27 '21 at 18:18

check this snippet for example to listen to TextEditingController text change listener

    import 'package:flutter/material.dart';

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

    class MyApp extends StatefulWidget {
      const MyApp({Key? key}) : super(key: key);

      @override
      _MyAppState createState() => _MyAppState();
    }

    class _MyAppState extends State<MyApp> {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: ThemeData(),
          darkTheme: ThemeData.dark(),
          home: const HomePage(),
        );
      }
    }

    class HomePage extends StatefulWidget {
      const HomePage({Key? key}) : super(key: key);

      @override
      State<HomePage> createState() => _HomePageState();
    }

    class _HomePageState extends State<HomePage> {
      final TextEditingController controller = TextEditingController();
      @override
      void initState() {
        super.initState();
        controller.addListener(_printLatestValue);
      }

      void _printLatestValue() {
        print('Second text field: ${controller.text}');
      }

      @override
      void dispose() {
        controller.dispose();
        super.dispose();
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: TextField(
            controller: controller,
          ),
        );
      }
    }

@HemanhS GetX does in fact have a `debounce` method it's not necessary to use `RxDart` directly. — Loren.A, Nov 12 '21 at 14:39

How to listen changes inside TextController?

3 Answers3