Skip to content

Home

A simple nutrition app that allows you to track your daily calorie intake and fitness activities.

MVP

The MVP of the app is a calorie tracker with some basic fitness tracking. The users can enter their daily calorie intake and the app shows the remaining calories to reach their goal. The users can also enter their weight and the app shows them how their weight has changed over time, to keep track of their progress. To track their fitness, the users can enter some basic fitness activies, like running, cycling, or swimming.

Calorie Intake

The users can enter their calorie intake for each meal. The app shows them how many calories they have left to reach their daily goal. It also shows them how many calories they have already consumed. To make it easier for the users to enter their calorie intake, the app is connected to a food database. They can search for food and add it to their meal. The application then automatically calculates the calories of the food and incorporates them into the users calorie intake.

Calorie Needs

The user is asked some questions during the onboarding process to calculate their calorie needs. The app then calculates the calorie needs based on the answers.

Fitness Tracking

As an MVP function, the fitness tracking is limited to some basic activities. The users can enter their fitness activities, like running, cycling, or swimming. This feature should be extended in the subsequent iterations.

Weight Tracking

The app also allows the users to track their weight. They can enter their weight and the app shows them how their weight has changed over time. The users can also enter their weight goal and the app shows them their progress towards their goal.

Delighter

  • There should be multiple different wars to calculate the calorie needs during the onboarding. There are different formulas to calculate the calorie needs, with different accuracy. The user should be able to choose between them.
  • The app should explain the different formulas and their accuracy.
  • To make it easier, the user can provide different levels of information, like their age, height, weight, and activity level. The app then calculates the calorie needs based on the provided information. The user can also provide more information, like their body fat percentage, to get a more accurate result.

Figma

Link to Figma

Screenshots

Onboarding

OB01 OB02 OB03 OB04 OB05

Nutrition

Nutrition FastTracking Shimmer Search

Activity

Activity

Progress

Progress01 Progress02

Settings

Settings

Libraries

For the implementation of the app, we used the following libraries:

  • shared_preferences: ^2.2.2
  • introduction_screen: ^3.1.12
  • outline_gradient_button: ^2.0.1+1
  • sqflite: ^2.3.0
  • sqflite_common_ffi_web: ^0.4.0
  • path: ^1.8.3
  • syncfusion_flutter_charts: ^23.2.4
  • flutter_native_splash: ^2.3.6
  • shimmer: ^3.0.0

introduction_screen

To simplify the implementation of the onboarding process, we used the introduction_screen library. It provides a widget that can be used to create an onboarding process with multiple screens.

sqflite, sqflite_common_ffi_web, path

To store the nutrition and activity data, we used the sqflite library. It provides a simple way to store data in a database. We also used the sqflite_common_ffi_web library to use the database in the web version of the app. The path library is used to get the path to the database.

shared_preferences

We used the shared_preferences library to store the user's data, like their weight, in the local storage. This way, the data is still available when the user closes the app.

flutter_native_splash

To create a splash screen for the app, we used the flutter_native_splash library. This way, we can show a splash screen while the app is loading.

shimmer

To show a loading animation while content is loading, we used the shimmer library. This way, the user knows that the app is still loading and doesn't think that the app is frozen. We used this for the FoodSearchScreen.

Shimmer

syncfusion_flutter_charts

To display the progress of the user, we used the syncfusion_flutter_charts library. It provides a simple way to create charts. We used it for the ProgressScreen to display the user's weight, the activities they have done, and the calories they have consumed. We also used it for the NutritionScreen to display the remaining calories.