Workout Planner App in Flutter.

Overview

flutter_workout_planner

Workout Planner application in Flutter for an ongoing interview.

Getting Started

Dependencies used:

  • Riverpod - Manage the reactive state of the app
  • GoRouter - navigation
  • uuid - Generated Unique identifier for the data
  • dots_indicator - Dots indicator used together with PageView
  • numberpicker - A Scrollable NumberPicker
  • Hive - Save the state in a NoSQL Database
  • material_design_icons_flutter - Material Design icons
  • json_annotation, json_serializable used together with Hive in order to generate fromJson and toJson
  • build_runner - run generators

As pointed above this project uses Riverpod as state manamgenet solution, the reason I decided to go with this package was:

  1. It's a more recommended for those using Riverpord
  2. It's implementation its cleaner and simpler.
  3. As requested in the task the application should have 2 screens one to create and edit the workout and one to list the workouts created.
  • For the workout screen because it will have TextField widgets the best approach is to use TextEditingController with those TextFields and we need to be able to manage those controllers. The ideal solution is to use ChangeNotifier as it accepts multiple parameters be used in the same Provider.

  • Now for the workouts screen where we list the workouts created I decided to use a StateNotifier, when having a list of Data that you want to manage it's best to use StateNotifier. StateNotifier compared to ChangeNotifier accepts only one single state and that's what we need in order to manage a list of workouts.

For the navigation I use the GoRouter as it provides simpler implementaiton of Declerative Navigator 2.0.

The project structure is split like this:

  1. screens - Screen widget that would be the root of the navigation route.
  • IntroScreen - The introduction screen in case you don't have User Profile yet.
  • WorkoutsScreen - The screen where we list the workouts added.
  • WorkoutScreen - The screen where we add new workout, edit or remove an existing workout
  • SettingsScreen - The screen where we show the User Profile and allow the user to delete the profile.
  • ExerciseScreen - The screen where the user can select a exercise for the workout.
  1. pages - Although Screens and Pages basically mean the same thing, and most developers don't differentiate them, for this project the pages represent the page for the PageView widget, so you can say that a Screen can have multiple Pages.
  • IntroPage - The page where I show some introduction info.
  • GenderPage - The page where we allow the user to select the gender during the intial process.
  • AgePage - The page where we allow the user to select the birth date.
  • HeightPage - The page to select the Height in cm.
  • WeightPage - The page to select the Weight in kg.
  • MetricPage - a child of Height & Weight Page.
  • NamePage - The page to type the user name.
  1. models - This represents the Data structure for the app
  • Profile - The model data used to create the User Profile based on the data inputed in the Introduction step.
  • Intro - The model data used to create the introduction info data.
  • Workout - The model data for the workout itself.
  • Exercise - The model data used for the exercise selected for the workout.
  • WorkoutSet - The model data used for the sets data inputed for the workout.
  • WorkoutSetField - The model data used for the TextEditingControllers that manage the sets data when creating or editing a workout.
  • ProfileData and WorkoutsData - it's used to keep the Profile and Workouts data and know whether the data was locally loaded yet or not
  1. manages - This holds all the providers created using Riverpod in order to manage the state, or as I liked to call them managers.
  • SetupManager - Manages the introduction setup data.
  • ProfileManager - Manages the data created during the introduction setup process.
  • EditWorkoutManager - Manages the data manipulated in the WorkoutScreen
  • WorkoutsManager - Manages the list of workouts data created using the EditWorkoutManager and get listed at WorkoutsScreen
  • Router - Manages the GoRouter data and assist's in deciding the initial route based on the data available that was being stored using Hive.
  1. adapters - This holds all the adapters used by Hive in order to create an object from json and json from object when storing and retreving the box data.
  • ProfileAdapter - Convert fromJson/toJson when storing and retrieving Profile Data.
  • WorkoutAdapter - Convert fromJson/toJson when storing and retrieving Workout Data.
  1. converters - This holds all the converters used by Hive in order to convert the passed or retrieved data.
  • Color converter - Convert the color of the workout from Color to int and visa versa.
  1. utils - it holds various utilities like const hardcoded data for the colors, exercises and intro data and a general function to show a confirm dialog.

  2. widgets - It holds all the widges used at different pages and screens.

  • AppScaffold - General Scaffold used for the nested Navigator.
  • ExerciseWidget - Used to render the exercise in the ExerciseScreen.
  • GenderWidget - Used to render a single geneder item in the GenderPage.
  • ProfileField - Used to render the profile data at SettingsScreen.
  • WorkoutSetWidget - Used to render the workout sets at WorkoutScreen.
  • WorkoutWidget - Used to list the actual workout in the WorkoutsScreen.

When running the application for the first time you will be greeted with the IntroScreen which shows a brief information about the application, this screen uses PageView dogether with a dots indicator bellow it in order to create intro like screen that's swipable. The screen also has a Skip, a Next and a Done button which are shown according to the page the user is at the moment.

After clicking the Done button, you will be again greated with a IntroScreen, but this time it shows the initial profile setup process. The user can select the standards question asked for this type of applications: Gender, Age, Height, Weight and a Name at this Screen. The Gender Page uses GridView to render the list of Gender selection. At the AgePage user can select the birth date using the CupertinoDatePicker. At the Height and Weight Page user can use the DecimalNumberPicker in order to select the height and weight, and on the NamePage it can input the name, if the user doesn't select a gender or inputs a name the user is presented a Snackbar explaining why he can't move forward and how to fix that.

After compliting the profile process the user is shown the WorkoutsScreen where it's empty and a single Add button with the message 'Add your First Workout!' message on the top. Uppon clicking the Add button the WorkoutScreen page is shown. Here the user can select the name for the workout, the exercise, add and remove sets, reps and weight for the workout, add a rest between sets using the CupertinoTimePicker, and even select a color and leave a notes. In case the workout is an existing one the user sees a Remove red button at the very bottom, which uppon clicking it will show a confirm dialog asking to confirm the choice.

When selecting an Exercise the user is presented with a separate ExerciseScreen that lists the available exercises in a GridView layout. As pointed above although not requested in the documention, I added a common data shown for this type of application and those are:

  • Ability to add and remove sets for the workout.
  • Rest time between sets.
  • Color selection to make the workout more visually present to the user.
  • Notes.

Also I've included validation by taking when creating and editing a workout, where depending on the missing or invalid data the user will be presented with the correct message. To achieve this I used Dart's Enums to create error types and assign specific messages for each.

Uppon saving the first Workout the user no longer sees 'Add your First Workout!' message, instead it sees the WorkoutWidget which nicely renders the workout data saved. The widget show the name and exercise of the workout along with the exercise icon on the very left. Bellow that it shows the lists of sets. If you swipe right on the card above the sets it will show a delete button thank's to the Slidable widget, and as you can see only that portion is sliding the sets portion bellow that stays.

On the bottom of the WorkoutsScreen you can see the BottomNavigationBar with 2 items, Workouts and Settings and a Floating action button that takes you to the WorkoutScreen to add a new workout. Clicking Settings will show the SettingsPage which shows the Profile data with a Remove Profile red button which will show a confirm dialog alerting you that all of the data will be removed if you click ok. We also preserve the navigation state here so that when you click back button while you are at SettingsPage it will take you back to WorkoutsPage instead of closing the application. And again the SettingsScreen its an extra implementation which I decided to use in order to demonstrate Nested Navigation using BottomNavigationBar

Lastly all this data is stored in a NoSQL Database using the Hive Package.

Running

  1. Install packages flutter pub get

  2. Run the Generators flutter pub run build_runner build

  3. Run the application.

Testing

For this task I did 3 test cases one for each type of test.

  1. Unit Test - test/add_workout_test.dart

Here I'm testing the EditWorkoutManager and WorkoutsManager by creaing a workout and adding that same workout to the WorkoutsManager. I achieve this by using Riverpod's Container which gives me access to the Providers in a Dart only environment.

  1. Widget Test - test/workout_widget_test.dart

Here I'm testing a single widget, that is the WorkoutWidget by creating a mock data and testing whether the element is visually correct, like for example testing whether the Container of the WorkoutWidget is correctly colored and has the correct border radius.

  1. Integration Test - integration_test/add_workout_test.dart

Here I'm testing a complete flow of the app by running it on a real device or emulator/simulator and testing the initial profile creation step and creating and rendering the first workout.

You might also like...

Book app - Book app UI with dark mode enabled, also this app created using the Flutter 2.5 skeleton template

Book app - Book app UI with dark mode enabled, also this app created using the Flutter 2.5 skeleton template

BOOK APP Book app UI with dark mode enabled, also this app created using the Flu

Nov 9, 2022

A Flutter app to show how to implement in-app purchase using the in-app-purchase package

Flutter in-app purchase A Flutter project to show to implement in-app purchase using the in_app_purchase package Simple UI but it's okay 🥲 😉 WhatsAp

Jul 26, 2022

This is a MVP our app's. The app get the song's list on firebase and display then you can be listen App features.

This is a MVP our app's. The app get the song's list on firebase and display then you can be listen App features.

music_app Requirements: flutter version 3.0.3 Dart 2.17.5 Firebase CLI 11.1.0 flutter sdk: = 2.15.1 3.0.0 flutter dependentcies: http: 0.13.4 mvvm:

Aug 2, 2022

🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

🆙🚀  Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in (with notice bar progress), supports full upgrade, hot update and incremental upgrade

Dec 30, 2022

This is a Flutter app which shows how to use the PageView Class in your Flutter App

page_view_class A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Oct 25, 2021

Sibyl App written with Dart/Flutter. (My first experience in writing a real android app in flutter).

sibyl_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if thi

Feb 17, 2022

WooCommerce App template that uses Flutter. Integrated to work with WooCommerce stores, connect and create an IOS and Android app from Flutter for IOS and Android

WooCommerce App template that uses Flutter. Integrated to work with WooCommerce stores, connect and create an IOS and Android app from Flutter for IOS and Android

WooCommerce App: Label StoreMax Label StoreMax - v5.3.1 Official WooSignal WooCommerce App About Label StoreMax Label StoreMax is an App Template for

Jan 9, 2023

Recipes app in flutter using API to get data. Amazing Recipes app UI in Flutter using dart with simple widgets.

Recipes app in flutter using API to get data. Amazing Recipes app UI in Flutter using dart with simple widgets.

Food Recipe App In Flutter Using API'S Recipe App in Flutter Subscribe Our YouTube Channel. Visit Website Demo OutPut Images ## 🔗 Links Getting Start

Dec 26, 2022
Owner
Angjelko Miloshevski
Angjelko Miloshevski
Travia - A Vacation Planner For Flutter

Travia - A Vacation Planner Team name : AutoBots ?? Team members Tushar Mali - t

2sh 18 Oct 11, 2022
Workout Tracker App built using Flutter and Dart. The app is available on PlayStore

Workout Tracker App built using Flutter and Dart. The app is available on PlayStore

SahilShah 2 Jun 21, 2022
A Flutter Workout app UI design

workout_app A workout Flutter application UI Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Ibrahim Usman 31 Oct 2, 2022
Flutter fitness/workout app for wger

Mobile app for wger Workout Manager wger is a free, open source flutter application that manages and tracks/logs your exercises and personal workouts,

wger Project 174 Jan 8, 2023
A cross-platform Flutter home workout app that respects your privacy. THIS IS A GITLAB MIRROR, file issues and contribute there.

Feeel Feeel is an open-source workout app for doing simple at-home exercises. This is a rewrite of the original app in Flutter, to make development ea

null 27 Dec 26, 2022
Knuffiworkout - Workout app written using Flutter and Firebase

Knuffiworkout A workout app for Android written in Flutter and Firebase. Download on the Play store Getting Started Set up Flutter with the editor of

null 51 Oct 30, 2022
Flutter-Week-Plans - Make Flutter Weekly plans with workout plans acc. to your choice.

Getting Started Flutter-Plans in a Workout Gym App with weekly added favourite plans. Images and Gif are taken randomly from Internet and are not arra

Yashu Agrawal 0 Jan 3, 2022
Courses-app-flutter - Flutter App - Courses App UI

Courses App A new Flutter project. Design: https://dribbble.com/shots/16149674-Course-learning-app-ui-ux/attachments/8004958?mode=media Getting Starte

Juan Daniel Rios Ramirez 0 Jan 2, 2022
Taxi App Client App - Taxi Rouge App With Flutter

taxi_rouge_app A new Flutter application. Getting Started This project is a star

Bouchida Youssef 3 Jun 11, 2022