Question 222214 in Flutter Question posted in
The official Flutter documentation can be found here.

Issue with Text-Form-Field in Flutter

I want to change value input without typing. Example, I have two Text-Form-Field then I want when I type 1 in Text-Form-Field #1 so the value display in Text-Form-Field #2 is 2. I want to value change depend on value in other input then display it.

I am trying but not work. So how to solve this problem. Please help me !!!!!!!!!

Tags:

3

Answers


  1. 0

    You can update value of text field 2 in onChanged method of text field 1.

    Example:-

    TextFormField(
                controller: textController1,
                onChanged: (String? value){
                  textController2.text="new value";
                },
              ),
    Login or Signup to reply.
  2. 0

    For this task, using the TextEditingController along with the onChanged callback function of the TextFormField is recommended. The following example provides a clear illustration of the desired approach.

    class TextFormFieldDemo extends StatefulWidget {
  const TextFormFieldDemo({super.key});

  @override
  State<TextFormFieldDemo> createState() => _TextFormFieldDemoState();
}

class _TextFormFieldDemoState extends State<TextFormFieldDemo> {
  late final TextEditingController textField1Controller;
  late final TextEditingController textField2Controller;

  @override
  void initState() {
    super.initState();
    textField1Controller = TextEditingController();
    textField2Controller = TextEditingController();
  }

  @override
  void dispose() {
    textField1Controller.dispose();
    textField2Controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          TextFormField(
            controller: textField1Controller,
            onChanged: (value) {
              final double? val = double.tryParse(value);
              if (val != null) {
                textField2Controller.text = (val + 1).toString();
              }
            },
          ),
          const SizedBox(height: 12),
          TextFormField(
            controller: textField2Controller,
          )
        ],
      ),
    );
  }
}
    Login or Signup to reply.
  3. 0

    You can simply implement this with assigning same textEditingController to the both textFormField widget as below

    class TextFormFieldDemo extends StatefulWidget {
          const TextFormFieldDemo({super.key});
        
          @override
          State<TextFormFieldDemo> createState() => _TextFormFieldDemoState();
}
        
class _TextFormFieldDemoState extends State<TextFormFieldDemo> {
          late final TextEditingController textFieldController=TextEditingController();
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(),
              body: Column(
                children: [
                  TextFormField(
                    controller: textFieldController,
                  ),
                  const SizedBox(height: 10),
                  TextFormField(
                    controller: textFieldController,
                  )
                ],
              ),
            );
          }
        }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search