Skip to content
A realization of Dribbble shot by Georgy Romanov:
Dart Objective-C Java
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Health App 🏃‍

A very simple health app based on this beautiful design by Georgy Romanov on Dribbble. Created with the purpose of learning UI design in Flutter.

Health App design

Getting Started

  1. The very first thing to do is—you guessed it—clone this repository 😃.
  2. Switch to the initial commit by running this command while inside the cloned directory: git reset --hard c82503509abbbec9fdb1950715181164be1ffbc6.
  3. Open the project in Visual Studio Code or Android Studio.
  4. Hopefully, all Dart dependencies will automatically be fetched by your IDE. If not, do a manual pub get.
  5. Use the commit history as your step-by-step guide to implementing the above design in your own Flutter app. Read it in chronological order, starting from the oldest (ignore the initial commit, of course).

📬 If stuck, you may drop me an email at

Your Goal

This is how your app should look like after you've followed all steps:

Screenshot of Flutter-based Health App

Bonus Challenges

Once you are done with your goal, try completing the following additional challenges to earn extra brownie points.

  • Replace the font Signika with Gilroy, the one used in the original design.

  • Convert HyderationScreen into a stateful widget to keep track of cups of water consumed. Then display NumberTile widgets based on the cups count.

  • Add custom animations using AnimationController, Animation and other related classes. Let your creativity flow.

  • MEGA BONUS: Display data from your device's underlying fitness tracking system (HealthKit on iOS and GoogleFit on Android). Hint: make use of a Flutter package such as FitKit.

Feel free to share your creation by opening an issue here.


Anurag Bhandari

You can’t perform that action at this time.