Code Monkey home page Code Monkey logo

khayyam-ahmed / meals Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 3.28 MB

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.

Kotlin 0.15% Swift 2.20% Objective-C 0.05% Dart 44.33% CMake 22.30% C++ 27.10% C 1.70% HTML 2.18%
academind-course flutter-examples maximilian-schwarzmuller

meals's Introduction

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

  • 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

meals's People

Contributors

khayyam-ahmed avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.