Daily Wellness

Flutter App to track users nutrition intake and health goals

My teammate and I wanted to create an application similar to Apps like MyFitnessPal using Flutter. Using this new tool, we were to design and develop an app for users to customize goals, and search/retrieve produce information using a barcode scanner. If the user adds this food, the application will add it to their personal calorie count along with information such as protein, carbs, and fats. Their home page will display the users current nutrition stats, the produce already inputted, and the option to input more.

The Problem

My teammate and I brainstormed the absolute needs of the application along with the wants/desired. By categorizing the pages and their function, we stayed on track to present our application at the end of the course. Below is the proposal which also includes our tools:

Category: Wellness

Feature list (need to have):

  • Calorie counting

  • Accounts so that users can track personal data and set goals

  • Tracking daily calorie intake

  • Barcode reading

  • Simple macros overview page

  • Bottom nav bar to navigate app

Feature list (nice to have):

  • Tracking calorie intake over longer period of time

  • Meal nutrition overview page

  • Steps tracking, calories burned

  • Setting carb, protein, fat goal

  • *A page displaying a chosen items macros and calories

Page list:

  • Main page: Macros overview pie chart (fat carbs and protein intake) and option to add food, daily goal status.

  • Search Page (from the main page): Search bar, option to scan barcode, uses an API to grab nutrition facts. Lists history of previous added foods.

  • Recipe page: Search recipes option, list of previous recipes, search controls (number of recipes to return, category of food recipes to search for)


The Solution

My Role

 Developer & Designer

  • Ben Shapiro (Back-end focused)

Team

  • IDEs/tools: VSCode: Flutter framework, Android Studio, Postman (for API testing)

  • Native feature(s): Camera

  • Web resources: FatSecret API

  • Flutter Pie Chart

  • Flutter Shared Preferences

  • DietaGram API

Software Used

Wireframes / Figma Prototype

I used Figma to organize the content and features we would be implementing. After some research on different wellness apps, certain layouts like the pie chart for displaying the user’s nutrition data seemed best along with the color blue.

There was some difficulty with the implementation of the barcode and fetching the data from the API but eventually the final product allows the user to add produce via barcode and saves the users data when exited the application along with their profile.

Developing

When the app is launched, users are greeted with an empty, customizable chart. They can add food to any meal section, which directs them to the Search Page. Here, users can search for items or scan a barcode using the icon next to the search bar (though the barcode feature is currently not functional). When a food item, like the KitKat in the demo, is selected, users can view its nutritional information and add it to their meal.

Once a food item is added, it populates the chosen meal section and updates the pie chart accordingly.

Additionally, the Profile Page saves user data, even after the page is refreshed, helping users track their nutrition and stay on course with their health goals.