Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use textEditiing controller with Provider in Flutter

I am using provider for state management. I am in a situation where there are multiple types of fields in my form. The problem is with text-field Whenever I change Text it is behaving weirdly like the text entered is displayed in reverse order.

class MyProvider with ChangeNotifier{
  String _name;
  String get name => _name;
  setname(String name) {
    _name = name;
    notifyListeners();
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final MyProvider myProvider = Provider.of<MyProvider>(context);

    final TextEditingController _nameController = TextEditingController(
        text: myProvider.name,
    );

    return TextField(
        controller: _nameController,
        onChanged: myProvider.setname,
    );

}
like image 273
vinayak bhanushali Avatar asked May 18 '20 05:05

vinayak bhanushali


People also ask

How do you consume providers in Flutter?

The generics (values inside <> brackets) tell Flutter what type of provider to look for. Then Flutter goes up through the widget tree until it finds the provided value. If the value isn't provided anywhere then an exception is thrown. Finally, once you've got the provider, you can call any method on it.

How do I access my provider on Flutter?

You have to pass the thing being provided directly to the dialog constructor to access it in the dialog's new context. You can also give it to a new Provider widget at the top of your dialog tree if you have a very deep widget tree in the dialog and you want to access it from somewhere deeper.

What is the use of TextEditingController in Flutter?

A TextEditingController can also be used to provide an initial value for a text field. If you build a text field with a controller that already has text, the text field will use that text as its initial value.

How does the texteditingcontroller work?

Whenever the user modifies the text field, the controller notifies its listeners so that they know the text and selection properties. TextEditingController also allows you to modify the text and selection.

How to set text values programmatically in flutter?

You can set the text value programmatically by assigning the text property with a new value. By default the cursor will move to the beginning of the text. If you want to set the cursor elsewhere, you have to set the selection property, as shown below. For clearing the text, Flutter provides clear () method.

Is the provider pattern easier to learn in flutter?

But the provider pattern is far easier to learn and has much less boilerplate code. In this post, we’ll take the default Counter app provided by Flutter and refactor it to use the provider pattern. If you want to know what the Flutter team at Google has to say about the provider pattern, check out this 2019 talk.

How do you use editable text field controller?

A controller for an editable text field. Whenever the user modifies a text field with an associated TextEditingController, the text field updates value and the controller notifies its listeners. Listeners can then read the text and selection properties to learn what the user has typed or how the selection has been updated.


Video Answer


1 Answers

It happens because new instance of TextEditingController is created on every widget build, and information about current cursor position (TextEditingValue) is getting lost.

Create a controller once in initState method and dispose of it in dispose method.


class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  TextEditingController _nameController;

  @override
  void initState() {
    final MyProvider myProvider = Provider.of<MyProvider>(context, listen: false);

    super.initState();
    _nameController = TextEditingController(text: myProvider.name);
  }

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

  @override
  Widget build(BuildContext context) {
    final MyProvider myProvider = Provider.of<MyProvider>(context);

    return TextField(
        controller: _nameController,
        onChanged: myProvider.setname,
    );
  }
}
like image 177
Igor Kharakhordin Avatar answered Oct 13 '22 00:10

Igor Kharakhordin