Introduction
Last week, I went into Flutter and made a little project with it, you can read all about it here. Now, as my journey continues, I decided to challenge myself and create a simple temperature conversion app in Flutter, I did something similar on the CLI while I was learning Python. My goal with this was to get a better understanding on how Stateful Widgets work, and how to get a user input, process it and output it to the UI.
Diving into the code
My UI was going to be relatively simple; I will have an AppBar with a title, a TextField to take the user inputs and a lonely Text Widget that will display the output of the conversion.
With that base structure in mind, I got to work.
The first order of business was to delete the boilerplate code, after that, I need to get the basics going, AppBar and TextField, that should be simple enough since I have a little experience working with Widgets.
After confirming that everything was working so far, my first big task was to take the input from the TextField Widget and do something with it. Here is what I managed to do.
As you can see I created a function that takes a String input as parameter and a String degree(which I later removed), after that it does the calculation to convert from Celsius to Kelvin, and returns the result. At first I converted my String to Int, I later changed this to double since I was going to deal with decimal values.
With that win under my belt, I decided to also implement the conversion from Celsius to Fahrenheit, after checking some things out, I got this.
Later on, I realized that my function could be void, so I removed the return statement. I also did a bit of string work to check if my input string has the letter C in it, this tells that the input temperature was Celsius, meaning that the conversion was going to be Kelvin and Fahrenheit. This time I didn’t change my UI code to reflect this, but if you check the debug console, you will see the results.
My confidence levels were rising with the little wins here and there, now, I styled the output a little bit.
It’s not going to win any design awards, but was good enough for what I need him to be, definitely better than the lonely Text Widget it was before. With that out of the way, I implemented the remaining temperature conversions, this shouldn’t be that hard, since I got the baseline for it already done.
The conversions were working as expected, the little UI details I added looked great, this was definitely a success!
Things that are missing, but for the purpose of this little exercises I’ll leave it at that.
- An input validation. Right now you can enter any type of data inside the TextField, and “nothing” will happen.
- An error dialog when you enter incorrect data.
Closing thoughts
The more I mess around with Flutter, the more I like it, and despite the simplicity of this app, this gives me confidence to continue working with Flutter. This was the first time that I dealt with a Stateful Widget, handled user input, and output a result to the UI. The thing I love most about Flutter, it is cross platform.
Amazing!
Hope to see you again on my next post.
Back to top