CODEWITHSUNDEEP
flutterwidget
allan
allan

Reputation: 131

Display output in textfield widget on a button a button click after calculation on a button click in Flutter

I have three different Widgets (Textfields) and I need one to take input, and the other two to display result after calculation on a button click. In this case, one text field takes temperature in Kelvin, the other two displays the result in Fahrenheit and Celsius. If Celcius textfield takes the input the the ther two display the result after conversion. Pardon me the code might be dirty but I'm green. I am left with the displaying of the result whenever input is done in either of the textfields.

void main() {
  runApp(TemperatureCalculator());
}

class TemperatureCalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Calculator',
      theme: ThemeData(
        primaryColor: Colors.cyanAccent,
      ),
      home: new TemperatureHome(),
    );
  }
}

class TemperatureHome extends StatefulWidget {
  @override
  createState() => TemperatureState();
}

class TemperatureState extends State<TemperatureHome> {
  String result = '';
  final temperatureMeasurer = ['Celcius', 'Kelvin', 'Farenheit'];
  double formBorders = 6.0;
  TextEditingController celciusController = TextEditingController();
  TextEditingController farenheitController = TextEditingController();
  TextEditingController kelvinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Temperature Converter"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Column(children: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
            child: TextField(
              controller: celciusController,
              decoration: InputDecoration(
                  labelText: 'Temperature in Degrees Celcius',
                  hintText: 'e.g 25',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
              keyboardType: TextInputType.number,
            )),
        Padding(
            padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
            child: TextField(
              controller: farenheitController,
              decoration: InputDecoration(
                  labelText: 'Temperature in FarenHeit',
                  hintText: 'e.g 25',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
              keyboardType: TextInputType.number,
            )),
        Padding(
          padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
          child: TextField(
            controller: kelvinController,
            decoration: InputDecoration(
                labelText: 'Temperature in Kelvin',
                hintText: 'e.g 25',
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            keyboardType: TextInputType.number,
          ),
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).primaryColorDark,
              onPressed: () {
              setState(() {
                
              });
                  
              },
              child: Text(
                'Convert',
                textScaleFactor: 1.5,
              ),
            ),
            RaisedButton(
                color: Theme.of(context).buttonColor,
                textColor: Theme.of(context).primaryColorDark,
                child: Text(
                  'Reset',
                  textScaleFactor: 1.5,
                ),
                onPressed: () {
                  setState(() {
                    reset();
                  });
                }),
          ],
        ),
      ]),
    );
  }

  double converter() {
    double celciusTemp = double.parse(celciusController.text);
    double farenheitTemp = double.parse(farenheitController.text);
    double kelvinTemp = double.parse(kelvinController.text);

    double farenheitToCelsius = (farenheitTemp - 32) * 5 / 9;
    double farenheitToKelvin = (farenheitTemp - 32) * 5 / 9 + 273.15;
    double celciusToFarenheit = (celciusTemp * 9 / 5) + 32;
    double celsiusToKelvin = celciusTemp + 273.15;
    double kelvinToFarenheit = (kelvinTemp - 273.15) * 9 / 5 + 32;
    double kelvinToCelcius = kelvinTemp - 273.15;

    //if()
  }

  void reset() {
    celciusController.text = '';
    farenheitController.text = '';
    kelvinController.text = '';
    setState(() {
      result = '';
    });
  }
}
`

Upvotes: 1

Views: 311

Answers (3)

Bensal
Bensal

Reputation: 4140

Does this work:

if (celciusController.text != null && celciusController.text.length > 0) {
  farenheitController.text = (int.parse(celciusController.text)* 9 / 5) + 32;
  kelvinController.text = int.parse(celciusController.text)+ 273.15;
} 
else if (farenheitController.text != null && farenheitController.text.length > 0) {
  celciusController.text = (int.parse(farenheitController.text)- 32) * 5 / 9;
  kelvinController.text = (int.parse(farenheitController.text)- 32) * 5 / 9 + 273.15;
}
else{
  ....
}

Does this work?

Upvotes: 1

savke
savke

Reputation: 296

This solution will work but you definitely need some code changes for example handling null situation in converter method.

void main() {
  runApp(TemperatureCalculator());
}

class TemperatureCalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Calculator',
      theme: ThemeData(
        primaryColor: Colors.cyanAccent,
      ),
      home: new TemperatureHome(),
    );
  }
}

class TemperatureHome extends StatefulWidget {
  @override
  createState() => TemperatureState();
}

class TemperatureState extends State<TemperatureHome> {
  String result = '';
  final temperatureMeasurer = ['Celcius', 'Kelvin', 'Farenheit'];
  double formBorders = 6.0;
  TextEditingController celciusController = TextEditingController();
  TextEditingController farenheitController = TextEditingController();
  TextEditingController kelvinController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Temperature Converter"),
        backgroundColor: Colors.deepOrange,
      ),
      body: Column(children: <Widget>[
        Padding(
            padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
            child: TextField(
              controller: celciusController,
              decoration: InputDecoration(
                  labelText: 'Temperature in Degrees Celcius',
                  hintText: 'e.g 25',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
              keyboardType: TextInputType.number,
            )),
        Padding(
            padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
            child: TextField(
              controller: farenheitController,
              decoration: InputDecoration(
                  labelText: 'Temperature in FarenHeit',
                  hintText: 'e.g 25',
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0))),
              keyboardType: TextInputType.number,
            )),
        Padding(
          padding: EdgeInsets.only(top: formBorders, bottom: formBorders),
          child: TextField(
            controller: kelvinController,
            decoration: InputDecoration(
                labelText: 'Temperature in Kelvin',
                hintText: 'e.g 25',
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(5.0))),
            keyboardType: TextInputType.number,
          ),
        ),
        Row(
          children: <Widget>[
            RaisedButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).primaryColorDark,
              onPressed: () {
                setState((){
                  converter();    
                });
              
                  
              },
              child: Text(
                'Convert',
                textScaleFactor: 1.5,
              ),
            ),
            RaisedButton(
                color: Theme.of(context).buttonColor,
                textColor: Theme.of(context).primaryColorDark,
                child: Text(
                  'Reset',
                  textScaleFactor: 1.5,
                ),
                onPressed: () {
                  setState(() {
                    reset();
                  });
                }),
          ],
        ),
      ]),
    );
  }

  void converter() {
    double celciusTemp = double.tryParse(celciusController.text);
    double farenheitTemp = double.tryParse(farenheitController.text);
    double kelvinTemp = double.tryParse(kelvinController.text);

    double farenheitToCelsius = ((farenheitTemp ?? 0) - 32) * 5 / 9;
    double farenheitToKelvin = ((farenheitTemp ?? 0) - 32) * 5 / 9 + 273.15;
    double celciusToFarenheit = ((celciusTemp ?? 0) * 9 / 5) + 32;
    double celsiusToKelvin = (celciusTemp ?? 0) + 273.15;
    double kelvinToFarenheit = ((kelvinTemp ?? 0) - 273.15) * 9 / 5 + 32;
    double kelvinToCelcius = (kelvinTemp ?? 0) - 273.15;
    
    if(celciusController.text.isNotEmpty 
       && double.tryParse(celciusController.text) != null){
     
        farenheitController.text = celciusToFarenheit.toString();
        kelvinController.text = celsiusToKelvin.toString();
      
    }else if(farenheitController.text.isNotEmpty 
       && double.tryParse(farenheitController.text) != null){
      celciusController.text = farenheitToCelsius.toString();
      kelvinController.text = farenheitToKelvin.toString();
    }else if(kelvinController.text.isNotEmpty 
       && double.tryParse(kelvinController.text) != null){
      celciusController.text = kelvinToCelcius.toString();
      farenheitController.text = kelvinToFarenheit.toString();
    }

    //if()
  }

  void reset() {
    celciusController.text = '';
    farenheitController.text = '';
    kelvinController.text = '';
    setState(() {
      result = '';
    });
  }
}

Upvotes: 1

Akif
Akif

Reputation: 7660

You can add listeners to the text controllers in your initState(). A simple example of a workaround will look like this:

  @override
  void dispose() {        
    celciusController.dispose();
    farenheitController.dispose();
    kelvinController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    celciusController.addListener((){
        
        setState(() {
                  converter();
                });
    });
    farenheitController.addListener((){
        
        setState(() {
                  converter();
                });
    });
    kelvinController.addListener((){
        
        setState(() {
                  converter();
                });
    });

    super.initState();
  }

Read more from the official document.

Upvotes: 0

Related Questions