Cross-Platform Mobile Apps with Flutter

Adding and Removing Products

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
Cross-Platform Mobile Apps with Flutter

Check out a free preview of the full Cross-Platform Mobile Apps with Flutter course

The "Adding and Removing Products" Lesson is part of the full, Cross-Platform Mobile Apps with Flutter course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano completes the order page by adding the ability to add and remove items. Since removing the items requires the user interface to be updated, the OrderPage widget must be a Stateful widget and the cartRemove method should be called in a setState method.


Transcript from the "Adding and Removing Products" Lesson

>> Okay, so we are really close to have our app, up and running. So the premise that we have is that if we add elements and we go to the order we see nothing. So it's not being added because we have a bag, the bag has to do with it one other.

Okay, so we are actually adding to the cartAddproduct, but we are not receiving the product as an argument. And the bag is actually adding a product is not there. So, we need to receive from the menu item, the product we can call it B if you want or added product, so we don't have, we don't mess up with the variable names.

And now if I add a black Americano and a cappuccino and I go to order, voila, we have the card. What happens if I try to delete this, we added the code to delete. So if I press delete. Nothing happens. But anyway, do you see that there is some kind of a glow effect when you click, we will receive that automatically.

One effect when you click on a button, there is an animation going on there. So let me show you this. I go to offers. I go back to order. Again, I'm going to delete a cappuccino, I'm going to refer back to order. So if deleting the data from the data manager.

But it's not updating the UI, why? How can we solve the problem? State, so if we go and see our page, our order page is actually a stateless widget. So nothing that happens within that widget. The whole page will be updated because it's an a stateless widget. So first we need to update or convert this into an stateful widget.

If I try this now, we still have the same issue because the current remove call is the one that can trigger a change. Must be executed within a set statement because if not, it won't trigger a change. Does that makes sense? So if I add the black Americano and the cappuccino and then go to order, now It works.

so if your widget is a stateless, it will never change you need to change that to a stateful and changes that you do inside that will trigger updates must be done within a set state call. Does it make sense? So something that we can do here also, just to finish this is in the order page.

We can put an image here. So, because yeah, we don't have a message saying that, we can have a container, for example, wrap this with a container. And then we can actually say something like if, can we do an if here, let's say. So if data manager, by the way data is data manager here, now that we are in a stateful component the data manager is in the widget.

We have two classes when we are doing a stateful from the state to access the properties of the widget, we need to access with widget. So if widget, and then we have data manager, okay. Blah, blah, blah blah. We can also do is before the return. That's probably going to be easier.

So, when I'm going to ask if the length of the card is zero, so if it's zero, maybe I want to return a text saying your order is empty. And if not, I'm going to return that maybe I don't need the container actually, so I can remove the unnecessary container.

So like, so I need to return this text. And then this is a constant text. And here it's complaining because there is already an empty property in arrays. So instead of asking for length equal to zero, you can just say is empty. Like so, we are missing a semicolon, And let's see what else do we need to adjust here.

Okay, so I balance my parentheses and braces. And now we are back here. Order, okay? It looks fine. And if I delete this, it says your order is empty. We can attach, adding, center wherever we want over the text that says your order empty, okay? So, two more things quick things, what about the numbers it says 1.5 doesn't look like perfect.

So if we wanna add two decimals here, in the order item, this case in the menu page, we go to the product item. And when we were showing the price here we can call two string as fixed. So doubles. They have a method, two string as fixed, where we can actually say how many decimal we want.

And also in the order page, we can add in the last view if we want the total because we have already calculated the total in the car.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now