Flutter Shopping App With Provider and Hive

Flutter Shopping App With Provider and Hive

    This is a Flutter Shopping app with Provider and Hive local storage for android and iOS. We will build a beautiful online store app for iOS and Android. It covers beautiful animation and scrolling. And at the end in part 2 we work with backend.

    This tutorial covers awesome animation ui design with local storage. By the end of this tutorial you will master, how to use provider and hive.

    Provider would be for state management and Hive would be local storage.


    For routing we have used flutter native navigation. We have extensively used the following

    1. Navigator.of()
    2. Navigator.push()


    Providers Since this is a online shopping store app, we will use ChangeNotifierProvider with three classes to maintain our app state. These three classes would be wrapped in MultiProvider. So you will master how to add, remove and save data using ChangeNotifierProvider.

    Since we have many providers, we used MultiProviders to inject them at the root of our widget tree.


    Since this tutorial focuses on local storage using Hive, we have used Hive for the following features

    1. add items cart
    2. remove items from cart
    3. favourite items add in cart
    4. remove favourite items from cart

    Get the complete code and assets from here (complete front end )

    Get the complete code with restful api and stripe payment (complete restful api)

    Restful api code features

    custom login


    search product

    place order


    Part 1 starter code to follow along

    Part 2 assets to follow along

    Installation guide

    Opening json files in postman


    # FavouritesNotifier

    Some of the fans were not able to follow with FavouritesNotifier with Provider. The code was missing the tutorial. Let's take a look at the code.

    import 'package:flutter/material.dart';
    class FavoritesNotifier extends ChangeNotifier {
      List<dynamic> _ids = [];
      List<dynamic> _favorites = [];
      List<dynamic> get ids => _ids;
      set ids(List<dynamic> newIds) {
        _ids = newIds;
       List<dynamic> get favorites => _favorites;
      set favorites(List<dynamic> newFav) {
        _favorites = newFav;

    # Postman API data posting

    You might have this issue in part 2 for data posting. To solve this do the below

    Okay, so basically you need to go to the back and open the product schema, get all the keys from the product schema and those keys determines how many key, how many values does you need in post and then you can post. You can just add the information and then make a post.


    Recommended posts

    Recent posts