Automatically Add Two Numbers In Textfield and show the result in a third Textfield Flutter

Question

I have two textfields that accept number inputs. I want to calculate the sum of the two textfields while the user input the numbers in the textfields and in realtime show the results in a third textfield. This is what I have tried so far.

void _calculation() {
    setState((){
      _total = int.parse(_quantityController.text) * int.parse(feedPrice.text);
    },
    );
    print(_total);
  }

And show the result in the third textfield

TextField(
                readOnly: true,
                textAlign: TextAlign.center,
                decoration: InputDecoration(
                    hintText: _total.toString(),
                ),
              ),

I pass the total as a string to Textfield hint field. What am I missing or what am I doing wrong?

Solution

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class _YourPageState extends State<YourPage> {
  int _age1 = 0, _age2 = 0, _totalAge = 0;
  final firstNumber = TextEditingController();
  final secondNumber = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Column(
          children: <Widget>[
            TextField(
              controller: firstNumber,
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.number,
              onSubmitted: (String value) {},
            ),
            TextField(
              controller: secondNumber,
              textInputAction: TextInputAction.next,
              keyboardType: TextInputType.number,
              onSubmitted: (String value) {},
            ),
            Text(
              'Sum is: ${firstNumber.text + secondNumber.text}',
              textAlign: TextAlign.center,
              style: const TextStyle(fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

Comments

[Ehsan Askari]

You need to call _calculation() inside onChanged properties of both the other TextFields

[winfred adrah]

I just tried that and it didn't work.

[Waqas Yousaf]

whare have you put that code

[Waqas Yousaf]

you should have to place the code in third text field

[Waqas Yousaf]

If you want to that when you change the value of any text filed of both you have and getting updated result of sum in third textview. You have to add listener of both text view and in listener method onchanged or something like this . You have to call calculation() function in their and set the value in text field three in calculation function

[winfred adrah]

I have not tried this answer, but reading through it, it is probably the most simple answer here that will work. The thing is my problem is a little more involving than the way I put it. I will therefore ask it as a new question. I will leave this question and this answer here for those who want to make reference to it in the future.

[winfred adrah]

My problem is a little more involving than the way I put it. I will therefore ask it as a new question. I will leave this question and this answer here for those who want to make reference to it in the future.

[Nico Spencer]

This should have been a comment.

[tomerpacific]

This does not really answer the question. If you have a different question, you can ask it by clicking Ask Question. To get notified when this question gets new answers, you can follow this question. Once you have enough reputation, you can also add a bounty to draw more attention to this question. - From Review