Maintaining same state on different pages in flutter for a particular use case

Question

I know there have been certain questions on state management in flutter, but none of them seemed to solve my use case.

Recently I was building an app based on E-commerce and encountered this real need for state management. I had 2 pages,

1. One is the products page, where I add a product to the cart.
2. Second is the cart page, where I see products added recently to cart.

Users can add the product to the cart and then navigate to the cart. In the cart page, they can also increase or decrease the quantity of the item.

As you can see, initially yellow item was added to the cart with quantity 3, but in the cart page, user pressed the (-) button and reduced the quantity to 1. Now if the user presses the back button, then the state of the yellow product will be still 3 on the products page. Similar situation with the pink product.

Hence I tried to resolve this using normal setState and some global data structures to keep track of the quantity. But as my app grew big, its really hard to maintain the state across the pages. I have read about different state management solutions like redux, BloC pattern, Provider, ... but I am not clear how to use any of them in my use case. Could anyone with experience, break down the rock and help me digest?

Any sample code and explanation about how to solve this would be appreciated!

Hope my problem is clear!

Answer 1

ANUP SAJJAN to achieve this you can use Provider package. See these codes examples according to your case:

import 'package:flutter/material.dart';

import 'models/cartmodel.dart';

class AppState with ChangeNotifier {
  List<CartModel> _cartModel = new List<CartModel>();

  // Cart data list
  List<CartModel> get getCart => _cartModel;

  // Add item to cart
  addToCart(CartModel value) {
    _cartModel.add(value);
    notifyListeners();
  }

  // Remove item to cart
  removeToCart(CartModel value) {
    _cartModel.remove(value);
    notifyListeners();
  }
}

Create an instance in main.dart :

runApp(
  ChangeNotifierProvider<AppState>(
      create: (_) => AppState(),
      child: MyApp(),
    ),
)

You can now control the state:

@override
Widget build(BuildContext context) {
  final appState = Provider.of<AppState>(context);
  ...
  // manipulation
  appState.getCart
  appState.addToCart(value)
  appState.removeToCart(value)
  ...
}

Answer 2

The state is really a vehicle to control state of one screen, not a data storage. You probably shouldn't use State in this case, but rather a database. When a user is composing their cart, you create a cart record either on the user's device SQLite, or in the cloud (Firebase?). This may seem as an overkill at first, but consider that besides having a persistent storage that you can access from anywhere, you also get user behaviour data, ie what they added, how they proceeded, and how many dropped off.

As for the technical side of this, in Flutter it is common to use Providers. For me, the biggest benefit is business logic encapsulation. If you don't, your specific database logic will be all over the presentation layer, and should you want to change something, you will be in trouble:)

Here is a good article regarding providers.