TextField value is not getting updated in Flutter

Question

class UserInputArea extends StatefulWidget {
  @override
  State<UserInputArea> createState() => _UserInputAreaState();
}

class _UserInputAreaState extends State<UserInputArea> {
  @override
  Widget build(BuildContext context) {
    String convertedText='';
    setState(() {
       convertedText = Provider.of<UserText>(context, listen: true).convertedText;
       print('convertedText :: $convertedText');
    });
    return Card(
      elevation: 10,
        child: Container(
          padding: EdgeInsets.all(10),
          child: TextField(
              decoration: InputDecoration(hintText: convertedText.isNotEmpty ? convertedText : 'Enter text'),
              keyboardType: TextInputType.multiline,
              maxLines: 5,
              onChanged: (value){
                Provider.of<UserText>(context, listen: false).updateText(value);
              },
            ),
        ),
    );
  }
}

Need to update hintText field whenever convertedText gets updated. This update is happening only if screen refreshed somehow (In Appbar, if click on home-button-icon the data get updated in TextField), Using Provider package that should listen the changes and update the required feild, didnot work. So converted page to Stateful widget and addedd setState() & moved convertedText variable inside it. But still its not working, and not able to figure it out, what is exactly missing here? Anyhelp appreciated. Thanks in advance

Answer 1

Please use TextEditingController class

your code will be somthing like this

    class UserInputArea extends StatefulWidget {
      @override
      State<UserInputArea> createState() => _UserInputAreaState();
    }
    
    class _UserInputAreaState extends State<UserInputArea> {
      final TextEditingController nameController = TextEditingController();
      @override
      void initState() {
       nameController.text = "test";
       super.initState();
       //Here you should write your func to change the controller value  
       Future.delayed(const Duration(seconds: 2), () {
       nameController.text = 'test after chabging';
       });
      } 
      @override
      Widget build(BuildContext context) {
       
        return Card(
          elevation: 10,
            child: Container(
              padding: EdgeInsets.all(10),
              child: TextField(
               controller: nameController,
                  decoration: InputDecoration(hintText: convertedText.isNotEmpty ? convertedText : 'Enter text'),
                  keyboardType: TextInputType.multiline,
                  maxLines: 5,

                ),
            ),
        );
      }
    }

in the write it code above when you will enter the page the hint text will be test after 2 seconds the value will be "test after chabging" without any problem you do not need setState(() {}) I tired it and it works

Answer 2

I think that putting SetState() into the method and calling the method from onChanged could solve the issue. And moving it from Widget build. Something like this:

    class UserInputArea extends StatefulWidget {
          @override
          State<UserInputArea> createState() => _UserInputAreaState();
        }
        
        class _UserInputAreaState extends State<UserInputArea> {
          String convertedText='';
          void _updateField() {
             setState(() {
             convertedText = Provider.of<UserText>(context, listen: true).convertedText;
             print('convertedText :: $convertedText');
          });

          @override
          Widget build(BuildContext context) {
            return Card(
              elevation: 10,
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: TextField(
                      decoration: InputDecoration(hintText: convertedText.isNotEmpty ? convertedText : 'Enter text'),
                      keyboardType: TextInputType.multiline,
                      maxLines: 5,
                      onChanged: (value){
                        Provider.of<UserText>(context, listen: false).updateText(value);
                        _updateField();
                      },
                    ),
                ),
            );
          }
        }