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.
- The very first thing to do is—you guessed it—clone this repository 😃.
- Switch to the initial commit by running this command while inside the cloned directory:
git reset --hard c82503509abbbec9fdb1950715181164be1ffbc6. - Open the project in Visual Studio Code or Android Studio.
- Hopefully, all Dart dependencies will automatically be fetched by your IDE. If not, do a manual pub get.
- 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 [email protected].
This is how your app should look like after you've followed all steps:
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
HyderationScreeninto 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,Animationand 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
🌐anuragbhandari.com