ObservableList

Question

I am developing a restaurant delivery app and I am having problems when adding the same product on the list but with different values, it overwrite the value from the old ones.

I have a Store called BaseStore that has a "Bag" object as an Observable.

abstract class _BaseStore with Store {

  @observable
  Bag bag = Bag(
      products: ObservableList<Product>()
  );

  @action
  addProduct(Product product){
  bag,products.add(products);
 }

}

I am registering BaseStore as Singleton using get_it package: https://pub.dev/packages/get_it

GetIt.I.registerSingleton<BaseStore>(BaseStore());

The Bag class has an ObservableList of Product object.

class Bag {
    ObservableList<Product> products;
}

The Product class has more variables but I'll only show this two for the example:

class Product {
     String name;
     List<Option> options;

}

class Option {
    String optionSelected;
   List<ItemOption>

}

class ItemOption {
    String name;

}

I'm trying to add two products, both has the same values, the only difference is the String "optionSelected" from the "Option" class that on the example below I created two Products and they have diferent "optionSelected" values (Diet and other Normal).

Product product1 = Product(
            name: "Coke",
            options: [
              Option(optionSelected: "Diet")
            ]
        );

 Product product2 = Product(
            name: "Coke",
            options: [
              Option(optionSelected: "Normal")
            ]
        );

I call the action from the singleton and print the values.

GetIt.instance<BaseStore>().addProduct(product1);
GetIt.instance<BaseStore>().addProduct(product2);


    bag.products.forEach((product){

      product.options.forEach((option)=> print(option.optionSelected));

    });

it prints:

Normal
Normal

When I add a second product with all same values, except one value from inner list (Option's optionSelected) it changes the all products values from the list according to the last added.

Example when adding different product, some different values, the issue doesn't happen: https://i.imgur.com/ULzdPRM.mp4

When adding the same product but with different optionSelected and quantity: https://i.imgur.com/vlgKkq5.mp4

I forgot to mention so I added now, I'm using get_it lib to use BaseStore as singleton. I am not sure if I can reproduce the error, actually I know nothing about sandbox. — djalmafreestyler, Apr 23 '20 at 10:31

score 0 · Accepted Answer · answered Apr 23 '20 at 21:29

A friend, @bwolf, help me solve the problem, I had to use copyWith to generate a new instance of object for every Product I selected, also used copyWith for the Option class too.

Product copyWith({
    String id,
    String restaurantId,
    String image,
    String name,
    String desc,
    int price,
    int quantity,
    String category,
    List<Option> options,
  }) =>
      Product(
        id: id ?? this.id,
        restaurantId: restaurantId ?? this.restaurantId,
        image: image ?? this.image,
        name: name ?? this.name,
        desc: desc ?? this.desc,
        price: price ?? this.price,
        quantity: quantity ?? this.quantity,
        category: category ?? this.category,
        options: options ?? this.options,
      );



Option copyWith({
    String id,
    String title,
    List<ItemOption> items,
    String optionSelected,
  }) =>
      Option(
        id: id ?? this.id,
        title: title ?? this.title,
        items: items ?? this.items,
        optionSelected: optionSelected ?? this.optionSelected,
      );

When passing the product to the screen:

products[index].copyWith()

On the Product constructor.

 Product({this.id, this.restaurantId, this.image, this.name, this.desc,
    this.price, this.category,List<Option> options, this.quantity = 1}){

    if(options != null && options.isNotEmpty){
      this.options = options.map((e) => e.copyWith()).toList();
    }

  }

1 Answers1