MEALS APP

A guided project to learn differnt widgets, state management, animations and and overall app architecture in flutter. Following udemy course Flutter & Dart - The Complete Guide by Maximillian Schwarzmüller. The original project source code can be found here.

Introduction:
MEALS is a versatile Flutter app powered by RiverPod for state management. It enables users to explore, manage, and filter meals, including dietary preferences like vegan, vegetarian, and gluten-free. The app offers a user-friendly experience with a bottom tab bar and a side drawer for filter access. It's fully responsive on Android and iOS.

Disclaimer:

• This project was for learning purposes.
• It is not a replica of Maximillian's actuall project, which you can find here

Table of Contents

• Features
• Project Structure
• Dependencies
• Screenshots
• Getting Started

Features

• State Management: The app uses RiverPod for state management. The app state is managed using providers, and the UI is updated using Consumer widgets.

  // Provider
  final favoriteMealsProvider = ChangeNotifierProvider((ref) => FavoriteMeals());

  // Consumer
  Consumer(
      builder: (context, watch, child) {
          final favoriteMeals = watch(favoriteMealsProvider);
          return IconButton(
              onPressed: () {
                  favoriteMeals.toggleFavorite(mealId);
              },
              icon: Icon(
                  favoriteMeals.isFavorite(mealId)
                      ? Icons.star
                      : Icons.star_border,
              ),
          );
      },
  );

• Animations: The app uses animations for screen transitions, and for the favorite button.

  // Screen transition animation
  Navigator.of(context).push(
      PageRouteBuilder(
          transitionDuration: Duration(milliseconds: 500),
          pageBuilder: (context, animation, _) {
              return FadeTransition(
                  opacity: animation,
                  child: CategoriesScreen(),
              );
          },
      ),
  );

  // Favorite button animation
  AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
          return IconButton(
              onPressed: () {
                  _toggleFavorite(mealId);
              },
              icon: Icon(
                  _isFavorite ? Icons.star : Icons.star_border,
              ),
              color: Theme.of(context).accentColor.withOpacity(_controller.value),
          );
      },
  );

Project Structure

The project structure is organized as follows:

meals
  lib:
    data:
      dummy_data.dart
    models:
      category.dart
      meal.dart
    providers:
      favorite_meals.dart
    screens:
      categories_screen.dart
      category_meals_screen.dart
      meal_detail_screen.dart
      tabs_screen.dart
      filters_screen.dart
    widgets:
      category_item.dart
      main_drawer.dart
      meal_item.dart
    main.dart
  pubspec.yaml
  README.md

Dependencies

The project relies on the following dependencies:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  google_fonts: ^5.1.0
  transparent_image: ^2.0.1
  flutter_riverpod: ^2.4.0

Getting Started

To get started with this project, follow these steps:

1. Clone the project to your local machine.

   git clone https://github.com/khayyam-ahmed/meals.git

2. Install all of the project dependencies

   flutter pub get

3. Run the app on your device or emulator:

   flutter run

Now you're ready to go. 🥳🥳🥳

Feel free to customize the app further according to your needs.

Happy coding!

Screenshots

<style> * { box-sizing: border-box; } .column { float: left; width: 33.33%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: ""; clear: both; display: table; } </style>

Categories Screen

Main_Drawer

Filters Screen

Meals Screen

Meal Details Screen

Favorites Screen

Credits

• Maximillian Schwarzmüller