Flutter Cursor of TextField moves to Position 0 after setState

user_5298706 0
Viewed 1758

I want to display something in a Text whenever a TextFields text changes:

class _MyPageState extends State<MyPage> {

String name;

@override
  Widget build(BuildContext context) {
      TextEditingController c = new TextEditingController(text: name);
      c.addListener(() {
         setState(() { name = c.text;});
      });
      return Scaffold(
         body: Center(
            child: Column(children: [ 
               Text('Hello, ' + name + '!'),
               TextField(controller: c)
      ])));
  }
}

The Text updates as exspected, but the problem is that the Cursor of the TextField moves to position 0 each time I enter a character.

setstate dart flutter
2 Answers

The issue is that you are creating a new TextEditingController each time your widget is rebuilt. The widget is being rebuilt on every character that is typed.

You just need to move the TextEditingController outside of the widget build function. And also move the c.addListener to the widget's initState function. This way the TextEditingController is only created one time, and the listener is only added one time.

PS: It is also good to dispose your controller when the widget is disposed

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  String name = '';
  TextEditingController c = new TextEditingController();

  @override
  void initState() {
    c.addListener(() {
      setState(() {
        name = c.text;
      });
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Column(children: [
      Text('Hello, ' + name + '!'),
      TextField(controller: c)
    ])));
  }
}
user_119642470

I have modified your code, you just need to change your TextEditingController see below.

class _MyPageState extends State<MyWidget> {
  // initialize to empty string
  String name = "";
  
 @override
  Widget build(BuildContext context) {
    // this is how textEditingController should be
    final TextEditingController c = TextEditingController.fromValue(
            new TextEditingValue(
                text: name,
                selection: new TextSelection.collapsed(
                    offset: name.length)));
    
    c.addListener(() {
         setState(() { name = c.text;});
      });
    
      return Scaffold(
         body: Center(
            child: Column(children: [ 
               Text('Hello, ' + name + '!'),
               TextField(controller: c)
      ])));
  }
}
user_80975190
Related