How to Make a Fitness App With Flutter: A Tutorial by Perpetio. Part I

9 months ago   •   35 min read

By Anastasiya Dumyak
Table of contents

Cross-platform development has been the new, hot trend for the last couple of years. Who wouldn’t want to get an app that runs on multiple platforms with a native look and feel? It beats working on two different solutions at the same time.

At Perpetio, we have designed and developed tons of fitness applications and have learned a thing or two along the way. It’s high time to share our approach and show you how to develop a cross-platform fitness app with Flutter, step by step. Interested? Let’s go!

We will be creating the most popular fitness application type today: a workout app. By the way, we discussed the different types of fitness apps in a recent post. But, for now, we will build an app to help users choose and complete workout routines. It will be a one-stop shop focused on making exercise more convenient for users. Simply choose a workout, be it cardio or yoga, receive a video and text instructions, and keep track of progress. An all-in-one app. Here’s a little spoiler of the final result:

Before we begin with the development process, which services will we need apart from Flutter itself?

BLoC

This package makes it easy to implement the BLoC Design Pattern (Business Logic Component).

This design pattern helps to separate the presentation from the business logic. Following the BLoC pattern facilitates testability and reusability. This package abstracts reactive aspects of the pattern, allowing developers to focus on writing the business logic.

Firebase

Firebase is a Backend-as-a-Service (BaaS) app development platform that provides hosted backend services, such as a real-time database, cloud storage, authentication, crash reporting, machine learning, remote configuration, and hosting for your static files.

Notification service

Notifications are an important tool used on the majority of applications to improve user experience and engage users with your application.

Flutter Secure Storage

Flutter Secure Storage provides an API to store data in secure storage. Keychain is used in iOS, and KeyStore based solution is used in Android.

Validation service

The validation service checks whether the user’s information is valid to make the apps secure and easy to use. If the user has correctly filled out the form, the information is processed. If the user submits incorrect information, a friendly error message is displayed, letting them know what went wrong.

This first part of the tutorial will show you how to set up your Flutter project, add some of the mentioned tools, such as Firebase and BLoC, and create three important screens — Onboarding, Sign up, and Log in.

Creating the Flutter project

Let’s start from the very beginning. Clearly, we need to start by creating our project.

1. Open Visual Studio Core and make sure you have the Flutter extension there. In case you don’t, you can download it here. We like to use Visual Studio Core, but if you are more familiar with Android Studio or IntelliJ IDEA, you can go for those as well.

2. Now, when you are all set, click cmd + shift + p to see create Flutter: New Application Project.

3. Let’s name our project. We decided to go as simple as using “fitness.” Similar to the Firebase setup, it is the name we will be using throughout our work on the app. You should now select the folder “Projects”: this is where the app will be stored.

4. Open the main.dart file, delete everything from there, and type this:

void main() async {
 WidgetsFlutterBinding.ensureInitialized();
 SystemChrome.setPreferredOrientations([
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown,
 ]);
 await Firebase.initializeApp();
 runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   final isLoggedIn = FirebaseAuth.instance.currentUser != null;
 
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     title: 'Fitness',
     theme: ThemeData(
       textTheme:
           TextTheme(bodyText1: TextStyle(color: ColorConstants.textColor)),
       fontFamily: 'NotoSansKR',
       scaffoldBackgroundColor: Colors.white,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: isLoggedIn ? TabBarPage() : OnboardingPage(),
   );
 }
}

In such a way, we check whether the account is logged into our fitness app. We will do this using Firebase authentication and the ternary operator. Login and authentication require a bit more actions, which we will discuss later.

SystemChrome is there to make sure the entire UI won’t turn around when the user rotates their phone 90 degrees. We are also setting the app’s colors, theme, fonts, and so on.
5. Add the FontFamily in our pubspec.yaml file and create a folder called fonts inside the assets folder. As you can guess, this folder will contain all the fonts we will need for our app. You can download the FontFamily of your choice online.

pubspec.yaml
The assets folder

6. We should add the bloc to create the logic inside our project. To install it, simply click on this page, copy a package called flutter_bloc: ^7.1.0, and insert it in the pubspec.yaml file in dependencies like shown below. Save it in this file (by pressing cmd + S) to run the extension. Now you can use the bloc inside your code!


7. And those are our first steps in making the fitness app. The foundation of the app is done as we created its logic and the basic visual assets. Now, we can add screens like building blocks. But before that, one more stop — Firebase setup.

This content is only available to subscribers

Subscribe now and have access to all our stories, enjoy exclusive content and stay up to date with constant updates.

Sign up now

Spread the word

Keep reading