Display stream from cart with StreamBuilder in flutter

Question

I am trying to build a E-commerce app and having difficulties with the cart feature. The code below is the what I wrote for all the cart features in the app. It's working fine with all operations but I don't know how to use this dart and show them in the app. I want to show the data using StreamBuilder.

class Item {
final String brand;
final String category;
final int curtime;
final String description;
final String image;
final String name;
final int price;
final int quantity;

Item(
    {this.brand,
    this.category,
    this.curtime,
    this.description,
    this.image,
    this.name,
    this.price,
    this.quantity});
}

class CartItemsBloc {
final cartStreamController = StreamController.broadcast();
double total = 0.0;
Stream get getStream => cartStreamController.stream;

Map<String, Item> items = {};  

void addToCart(String brand, String category, int curtime, String description,
    String image, String name, int price, it) {
  if (items.containsKey(curtime.toString())) {
    items.update(
      curtime.toString(),
      (old) => Item(
          brand: old.brand,
          category: old.category,
          curtime: old.curtime,
          description: old.description,
          image: old.image,
          name: old.name,
          price: old.price,
          quantity: old.quantity + 1),
    );
  } else {
    items.putIfAbsent(
        curtime.toString(),
        () => Item(
              brand: brand,
              category: category,
              curtime: curtime,
              description: description,
              image: image,
              name: name,
              price: price,
              quantity: 1,
            ));
  }

  cartStreamController.sink.add(items.values.toList());
  allItems['cart items'].add(it);
  for (var entry in items.entries) {
    print(entry.key);
    print(entry.value.quantity);
  }
  print(items.values.toList());
}
double calculate() {
  var total = 0.0;
  items.forEach((key, cart) => total += cart.price * cart.quantity);
  return total;
}

void dispose() {
  cartStreamController.close();
}
}

final bloc = CartItemsBloc();

I want to show items map using StreamBuilder. Can Somebody please help.

Answer 1

You can do something like this:

StreamBuilder(
  stream: bloc.getStream,
  initialValue: [] //when nothing is pushed to the stream yes, I assume an empty list
  builder:(context, snapshot){
    if (!snapshot.hasData){
      return Center(child:CircularProgressIndicator());
    }else{
      //your results builder
      //You can find what you pushed in the stream in snapshot.data
    }
  }
)

You can find more information and example in the StreamBuilder documentation.

Note that I've just made a consideration on snapshot.hasData to keep it simple, but you can find comprehensive information such as the connectionState in the AsyncSnapshot documentation.