Background

I'm into fitness, like, REALLY into fitness. I frequently go to the gym and track every workout. I've used a few different apps for tracking, and none of them are really what I want out of a tracking app. I want to be able to choose from a wide selection of exercises (or create my own if the one I want is not available), input the sets, reps, and weight, and input how good my pump is, and how much muscle disruption there is afterward. I've found a few apps which do the first part okay, but completely ignore pump tracking, which is crucial for adjusting the volume on the next week or session. This is why I've decided to make my own app.

What am I going to use?

I want to create the app, mostly with just one codebase, and have it be available on both iOS and Android. There are a couple of different choices here, such as React Native, Ionic, a PWA, or, of course, Flutter. I am already very familiar with React and React Native and have made apps using it before, but I'm looking for something new. If I was going to make an App as well as a website, I would probably use a PWA (Progressive Web App), however, the app I'm making does not need a website version. Flutter has gained a lot of popularity, and I've heard a lot about it, but I never learned how to use it, and have stuck with React Native. So, it'll be a fun challenge to learn how to use Flutter, and Dart (the programming language used).

So, let's get started

After installing Flutter, I need to create a project, I don't have a name for the app yet, so I'll just call it "tracking_progression" for now.

flutter create tracking_progression

This will create all the files required for our Flutter app and provides some demo code to test if everything is working.

I'm testing it on my Android device, so, with it connected to my PC via USB, I run the following command.

flutter run

It will then go through the setup and launch the demo app on my device.

So, that's great, everything is working! Now, we can make some changes. I'll start with something basic, I'll change the heading from "Flutter Demo Home Page" to our app name, "Tracking Progression." In the lib/main.dart, is where I can change the title.

home: const MyHomePage(title: 'Tracking Progression')

After changing that line, and pressing 'r' in the terminal, to hot reload, the heading updates and now displays the title of the app!

Now, I will delete all the demo code, and start learning the basic functionality of Flutter. I then messed around with some of the code for a while and implemented a Title bar, some text in the center of the screen, and a button that outputs to the console when pressed. It's not much yet, but we'll get there!

See the code for yourself

I've decided to make the entire project open source, so you will be able to see all my spaghetti code as I write it (and maybe contribute some, too!). You can check out the project on GitHub at: https://github.com/CobbCoding1/tracking_progression