Flutter Shopping App With Provider and Hive

Created At: 2023-04-16 21:22:19 Updated At: 2024-01-30 07:46:25

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

Installation guide

Easy way to test the app if you buy the source code is use the below urls for base url and payment url

apiUrl = "onlineshopprovider-production.up.railway.app"

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 _ids = [];
  List _favorites = [];

  List get ids => _ids;

  set ids(List newIds) {
    _ids = newIds;

   List get favorites => _favorites;

  set favorites(List 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.


Add Reviews