One code base to rule them all - iOS app, Android app, and web app! Flutter is pretty amazing!
Below is an embedded webapp built using Flutter and Dart. Note, the same app can also be downloaded form the Apple App Store and the Google Play Store. Really cool that one code base can produce all three.
Lately, I've been learning about code, and about running, which naturally led me to build this pace calculator app. You simply enter 2 of the 3 variables: Distance, Total Time, or Pace, then press 'Calculate' and the app does the rest. I really liked the functionality of the pace calculator from Active's website (#1 result on Google search) but thought it could use a facelift.
While I liked Active's functional choice of filling the 'empty' field with the calculated value, I opted for a dialog box, which would allow the user to make small adjustments to their entered values and recalculate quickly. I wanted to make it obvious what the calculator output is.
Active's calculator also does some great input validation, not allowing the user to enter time values greater than 59. You'll notice mine lets user input 60, but if you try to go higher than that the field clears. I could forsee this being a confusing "feature" and may be better to somehow warn the user of the error, but I imagine most users wont default to 75 minutes. I could defnitely see it being possible, but unlikely. Maybe I'm wrong 🤷♂️? Let me know.
I opted to simplify the miles/km options, forcing the user to choose one set or the other. I just didn't see a strong use case for letting the user convert miles to km in a pace calcultor.
You'll notice the pop-up key on the mobile versions has a decimal point option only for distance section. The hardest part of this project was getting the keyboard to work similarly across devices, especailly making it disappear! In the end, I just wrapped the whole MaterialApp in a GestureDetector and that seems to work pretty well. I'm not sure why the pop-up keyboards don't have a dismiss feature 🤔.
The image used on the about page is 38MB and could be a lot smaller. Sorry about that. 😆 I'll get a version update with a smaller size soon, which I expect to really reduce the overall size of the app.
The last thing I'll mention is how the "RESET" button is spelled "RESE" only in the Safari web browser. Renders just fine in Chrome. I'm stumped and decided not to pursue the issue. Since the web app build functionality is part of Flutter's beta channel, I just let it be.
Anyways! I would love it if you checked the app out and gave me some feedback on what you think! Download links for the mobile versions are up top. Since the Google Play version is still under review, I'll put that one up later.
Join the newsletter to receive the latest updates in your inbox.