TextEditingController vs OnChanged

Question

I am looking for a better explanation on the benefit of TextEditingController over OnChanged event for a TextField.

My understanding is that onChanged's setState notifies all widgets of the change in state variable value. This way any widget (e.g. Text) can simply use the state variable and it will be notified of its changes.

My false hopes were TextEditingController would make it even simpler that I won't even need a state variable. Something like below:

import "package:flutter/material.dart";  class TestForm extends StatefulWidget {   @override   State<StatefulWidget> createState() {     return TestFormState();   } }  class TestFormState extends State<TestForm> {   //string myStateVariable = "";   final ctrl = TextEditingController();    @override   Widget build(BuildContext context) {      var tf = TextField(       controller: ctrl,     );      var t = Text("Current value: " + ctrl.text);  // <<<<<<<<<<< false hope! doesnt work!      var x = Column(children: <Widget>[tf,t],);      return MaterialApp(home: Material(child: Scaffold(       appBar: AppBar(title: Text("Test Form"),),       body: x,     )));   } } 

Can anyone explain why TextEditingController or something similar cannot manage the state itself and notifies all consumers of change in state?

Thanks.

Answer 1

You are just not setting state synchronously that's all. What onChanged does is exactly possible with this approach:

class _TestFormState extends State<TestForm> {   late TextEditingController controller;    @override   void initState() {     controller = TextEditingController()       ..addListener(() {         setState(() {});       });     super.initState();   }    @override   void dispose() {     controller.dispose();     super.dispose();   }    @override   Widget build(BuildContext context) {     return Column(       mainAxisAlignment: MainAxisAlignment.spaceAround,       children: <Widget>[         Text('Current Value: ${controller.text}'),         TextField(           controller: controller,         ),       ],     );   } } 

As you see, we have listener that setting state every time state of the controller changes. This is exactly what onChanged does.

So, about benefits, you can achieve everything with both approach, it's a subjective way.

About benefits: If you need to hold field values within Stream, onChanged is what you need. In other cases you may use controller.

Actually you won't need both in most of time in my opinion because TextFormField + Form within StatefulWidget is quite complete way to implement form pages. Checkout cookbook: https://flutter.dev/docs/cookbook/forms/validation