</tr>
- Custom App Bar: A clean app bar with leading and trailing icon buttons.
- Styled Search Bar: A search input field with a shadow, rounded corners, and prefix/suffix icons.
- Horizontal Category List: A scrollable horizontal list displaying food categories with custom card designs.
- Horizontal Recommendation List: A scrollable horizontal list showcasing recommended diet plans with images, details, and a call-to-action button.
- Custom Widgets: The UI is built using modular and reusable widgets for categories (
CategoryCard) and recommendations (RecommendationDietCard). - Clean Code Architecture: The project is structured with separate directories for models, widgets, and screens.
- Custom Fonts and Icons: Utilizes Google Fonts (
Manrope) and SVG icons for a polished look.
Follow these instructions to get a copy of the project up and running on your local machine for development and testing purposes.
You need to have the Flutter SDK installed on your machine. If you don't have it, you can find the installation guide here: Flutter Official Documentation
-
Clone the repository:
git clone <your-repository-url>
-
Navigate to the project directory:
cd breakfast_app -
Install dependencies: Run the following command to get all the required packages.
flutter pub get
-
Run the application: Connect a device or start an emulator and run the app.
flutter run
- Flutter - The UI toolkit for building the application.
- Dart - The programming language used.
- google_fonts - For using custom fonts from Google Fonts.
- flutter_svg - For rendering SVG files as widgets.
The project is organized into the following main directories:
lib
├── assets/ # Contains all static assets like images and SVGs
├── models/ # Contains the data models (CategoryModel, RecommendationModel)
├── Widgets/ # Contains reusable custom widgets (CategoryCard, RecommendationDietCard)
├── home.dart # The main screen of the application
└── main.dart # The entry point of the application
- Implement functionality for the "View" button on recommendation cards.
- Add state management to handle user interactions and data flow.
- Implement the search and filter functionality.
- Build out the "Popular" section on the home screen.
- Add navigation to other screens from the app bar icons and cards.
