Building A Fitness App With Flutter: Devlog #1

If you have not already read the first page in this series, I did an overview of Flutter that explains more in depth about how Flutter works and has some nice resource links that you can use if you also want to develop with Flutter. Read that first to get a better understanding of what’s going on in these Devlogs!

Setting Up The Dev Environment For Flutter In Android Studio

I ran into a huge issue when setting up Flutter through Android Studio.

It’s important to be able to test the app with virtual devices so that I can see how it looks across a wide range of devices. Also, I wanted to be able to take screenshots, and record videos of the app throughout the development process for making these devlogs.

The AVD (Android Virtual Device) manager in Android Studio provides you with the ability to download and use virtual devices for testing but it requires the use of hardware acceleration. The primary method for enabling hardware acceleration is via Android SDK > SDK Tools > Intel x86 Emulator Accelerator (HAXM installer). The problem is that this requires your computer to have an Intel processor. Most computers have Intel processors, but my Windows desktop unfortunately runs an AMD CPU.

I finally found a way to get around this to still be able to use the full functionality of the AVD without an Intel processor.

I found the solution in this article on the Android Developers Blog, and a couple of helpful threads in Stack Overflow also helped me through the issue.

First, I had to enable the Windows Hypervisor Platform feature in the Windows features on my PC.

Second, I added two system environment variables so that the AVD could find the virtual devices that I downloaded in the AVD manager. Before adding these variables, I was getting an error in the console complaining that files could not be found for the specific virtual Nexus device that I was trying to test with.

Lastly, by default most computers do not have virtualization technology enabled so I checked to see that my PC also had this feature disabled by opening up System Information. As I expected, it was disabled so I needed to restart my PC to access BIOS to make the changes. Once I opened System Information again, I could see that I could now use virtualization for testing virtual devices.

Sure enough I was up and running with a virtual device after making these changes! One of the key features for testing on virtual devices is hot reloading. With hot reloading, you can see changes immediately without having to re-run the device every time you make a change which would significantly slow down the development process. I will still be doing tests on physical devices in the future.

Laying Out The Features On Paper

Since I’m still learning how to use Flutter and Android Studio, and brushing up on my object oriented programming, I’ve spent the majority of my time over the past couple of days brainstorming and laying out the features and functionality that I want for the Fitness App.

As you can see, I’ve just used the good old fashioned paper and pen diagram method to start planning out the project. The picture here is the work I’ve done in my project planning notebook.

This app will essentially be a collection of useful tools that perform particular tasks to aid with fitness, tracking fitness, finding new workouts, and sharing them with friends.

Users will have their own profile that will have information related to their fitness. They’ll be able to add friends through their profiles.

I’ve come up with some of the crucial tools/features that I want for users:

  • A simple timer/stopwatch that works seamlessly in the app so that users doesn’t have to switch to a separate timer app.
  • A workout generator that accepts fields/settings that will be used to suggest/generate the new workout. Users will be able to save their favorite workouts and share them will friends through their user profile.
  • The ability to create their own workouts manually which they can also save/favorite/share.
  • Analytics about their workouts, reps, weights, totals over time to track progress.
  • A progression picture tracker where the user uploads pictures over periods of time to visually see progress and share progress ‘journals’.

Again, these are just some of the initial features that I want to implement. In the future there will be many, many more.

Going Through Tutorials To Learn Flutter

I’m starting absolutely from scratch with zero knowledge of Flutter, Dart, or Android Studio so I’m continuously going through the process of learning. Also, it’s been a while since I last used Java in my CS courses in college so I’ll brushing up on object oriented programming to use Dart.

Flutter.io has some helpful codelabs tutorials so over the next week I’ll be going through all of these just to better understand the structure of a Flutter app, and how to make some basic apps. Hopefully I’ll get some ideas on how to implement some of my ideas with the methods in the tutorials. Also, the documentation and API reference is fantastic.

I went ahead and completed Write your First Flutter App, part 1, and part 2. I was thoroughly impressed, the tutorials were cohesive and the explanations were well written.

The finished product is a Startup Name Generator that endlessly generates and displays combinations of words from a Dart package called english_words that contains some of the most popular English words used. There are heart icons beside each name that can be selected and saved into a list.

Both the list functionality, and the name generation functionality are two things that could be useful for generating workouts and displaying them in a page for users in the Fitness App. Also, the ability to heart and save values is another piece of functionality that I want for workouts.

The second page that can be accessed via the menu in the top right corner displays the saved name suggestions. Material Design in Flutter already has some built in animations for buttons and transitioning between pages (or routes as they’re called in Flutter). Also, deselecting ‘hearted’ names on the main page also removes them from the saved list which is what we want.

Having a page like this in the user profile that displays saved workouts and adding the additional functionality of being able to share them with friends can be a solution for implementation in the Fitness App as well.

What’s Next?

Since I was able to find ideas for ways to implement some of the functionality that I want for the Fitness App, the first thing I’ll be doing next is completing the rest of the codelabs tutorials. Since I’ve just begun this process, I need to learn as much about Flutter as possible right now.

I think by the time I finish the rest of these tutorials, I’ll be ready to set up some of the basics of the App. By the next Devlog, I’ll want to have completed all of the tutorials, and started laying down some code to prototype out basic functionality for generating and saving workouts. That’s going to be one of the key fitness tools for users so I might as well start there.

Stay tuned for the next devlog! There will be a link on this page as soon as it’s up.

Tags: fitness app devlogs, Flutter, Indie Dev, mobile development

August 26, 2018 August 12, 2018 September 7, 2018

Originally published at austinhoward.tech on November 18, 2018.

Software Engineer & Writer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store