Multiply Values of two text fields and display result in third

I’m trying to get a value(percentage of second text field) in a third text field, by multiplying input value in the second text field by a preset value in another text field(which is going to be the percentage). anyone have an idea how i can go about this? Having a challenge getting this from the text field controllers.

One possible solution is to utilise “onTap” function of a TextField.

Create and attach TextEditingController for all the 3 TextField.

Use “onTap” function of 3rd TextField as shown below:

onTap: () {
  double a = double.parse(_one.text); //_one => TextEditingController of 1st TextField
  double b = double.parse(_two.text); //_two => TextEditingController of 2nd TextField
  double c = ( a + b ) / 100; //do your calculation 
  _three.text = c.toString(); //_three => TextEditingController of 3rd TextField and parse it to a String
}
1 Like

Thanks @mahesh_krishnappa, I’ve tried this, and it works fine. How do i implement this function so that the third TextField is set as I input the value in the second ? As is, this implementation would have to be in the third TextField and user would need to Tap on it to get the result.

I am sorry I could not understand.
Could please give an example maybe?

Thanks. So these are my textfields

//First TextField 
CustomTextFormField(
                readOnly: true,
                labelText: 'Income Source Rate (%)',
                controller: incomeCodeRate,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  WhitelistingTextInputFormatter.digitsOnly
                ],

              ),

//Second TextField
TextFormField(
                style: TextStyle(
                    fontSize: 14,
                    // fontWeight: FontWeight.w600,
                    color: Colors.black87),
                decoration: InputDecoration(
                  labelText: 'Taxable Amount',
                  hintStyle: TextStyle(color: Colors.blue),
                  border: OutlineInputBorder(),
                ),
                controller: taxableAmountAmended,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  WhitelistingTextInputFormatter.digitsOnly
                ],

                validator: (value) {
                  if (value.isEmpty) {
                    return 'Provide taxable amount';
                  }
                  return null;
                },
              ),

//Third TextField
CustomTextFormField(
                readOnly: true,
                labelText: 'Tax Amount',
                controller: taxAmountAmended,
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  WhitelistingTextInputFormatter.digitsOnly
                ],
                onTap: (){
                  double a = double.parse(incomeCodeRate.text); // this is the value in my first text field (This is the percentage rate i intend to use)
                  double b = double.parse(taxableAmountAmended.text); // this is my second text field
                  double c = ( a * b ) / 100; //do your calculation
                  taxAmountAmended.text = c.toString();  // trying to set my third text field to display the calculated value here..

                },
              ),

So what i want is to display result in my third textfield as I am inputting value in my second TextField… the caluculation is done at the time of input of value in second textfield, so that (second_textfield value times first textfield value) divided by 100 equals the value to be set on the third.

Rather than tapping on the 3rd TextField, you want the result to be computed after user has entered value for 2nd field and the result to be displayed on the 3rd field.
Is my understanding correct?

1 Like

You can make use of onChanged / onFieldSubmitted of second TextField…

  1. onChanged:

Will be called for every character that is entered.
and then you could compute the result inside onChanged function of second TextField…

onChanged: (val) {
  double a = double.parse(incomeCodeRate.text); // this is the value in my first text field (This is the percentage rate i intend to use)
  double b = double.parse(val); // this is my second text field
  double c = ( a * b ) / 100; //do your calculation
  taxAmountAmended.text = c.toString();  // trying to set my third text field to display the calculated value here..
}
  1. onFieldSubmitted

It is called when an user taps on the “Done” (Tick) button at the right button corner on the keyboard.

onFieldSubmitted: (val) {
  double a = double.parse(incomeCodeRate.text); // this is the value in my first text field (This is the percentage rate i intend to use)
  double b = double.parse(val); // this is my second text field
  double c = ( a * b ) / 100; //do your calculation
  taxAmountAmended.text = c.toString();  // trying to set my third text field to display the calculated value here..
}

onChanged is more dynamic in the sense that the result is computed and displayed in the 3rd text field for every number that is entered whereas onFieldSubmitted computes and displays the result after the user taps on Done button on the keyboard.

1 Like

Yes this is very correct.

Thanks this is what I was trying to get at. I tried the same with a different approach, but result was not being set to third texfield. This works just fine.

1 Like