Reputation: 131
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
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
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
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