This Flutter project is a beautiful UI implementation based on the design by Ruben Vaalt, available on Dribbble. You can find the original design here.
-
git clone :
https://github.com/Kunjshingala/BMI-Calculator.git
In this project, we not only replicated the stunning design by Ruben Vaalt but also added our own custom widgets to enhance the user experience. This README will guide you through the key features of this project, as well as the Flutter concepts and techniques employed to achieve them.
-
Flutter Themes for Branding :
We demonstrate how to use Flutter themes to create a coherent branding for your app. You'll learn how to customize fonts, colors, and other theme attributes to match your design style. -
Multi-Page Apps using Flutter Routes and Navigator :
Learn how to create multi-page apps in Flutter by utilizing routes and the Navigator. We'll guide you through the process of navigating between different screens while maintaining a smooth user experience. -
Extract and Refactor Flutter Widgets :
Discover how to extract and refactor Flutter widgets with ease. We'll show you how to efficiently organize your code by breaking it down into reusable components. -
Passing Functions as Parameters and Fields :
We'll cover the concept of passing functions as parameters and fields. This allows you to create dynamic and interactive widgets by passing functions as callbacks to handle user interactions. -
GestureDetector Widget :
The GestureDetector widget is a powerful tool for detecting various touch gestures, not just taps. We'll show you how to use it to enhance user interactions and create a more engaging user interface. -
Custom Color Palettes :
Learn how to customize your app's color palette using hex codes. We'll explain how to define and use custom colors to achieve the design style you desire. -
Customized Flutter Widgets :
Discover how to customize built-in Flutter widgets to match a specific design style. We'll guide you through the process of making widgets look and behave the way you want. -
Dart Enums and Ternary Operator :
Understand the usage of Dart enums and the ternary operator. We'll explain when and how to use them in your Flutter app for better code organization and logic. -
Composition vs. Inheritance :
Explore the Flutter way of creating custom UI by understanding the difference between composition and inheritance. We'll show you how to build complex UI components by composing simpler widgets. -
Const and Final in Dart :
Learn the distinctions between const and final in Dart and when to use each. This knowledge is essential for optimizing your code and improving performance.
-
Clone this repository to your local machine. Open the project in your preferred Flutter development environment. Run the app on an emulator or physical device. Feel free to explore the code and learn from the implementation of the features mentioned above.
-
Project Structure The project is organized into various folders and files, each serving a specific purpose. Here's a brief overview of the project structure:
lib/ : Contains the main application code.
lib/screens/ : Contains the different screens of the BMI Calculator app.
lib/widgets/ : Contains custom widgets used throughout the app.
lib/constants.dart : Defines constants used in the app.
lib/routes.dart : Contains route configurations for the app.
This Flutter project not only brings the beautiful BMI Calculator design by Ruben Vaalt to life but also provides valuable insights into Flutter development. Explore the code, experiment with customizations, and expand your Flutter skills as you build upon this foundation. Enjoy building amazing apps with Flutter!
Happy coding! 🚀