Add to Cart with Flutter GetX — Most Easiest Way

Hi folks, as in my previous article we discussed about flutter add to cart, with provider, in that we learned state management with provider by applying it in add to cart functionality where we change our states from different state full widgets. If you missed my previous article and you are excited to learn provider with MVVM architecture here is link:

Add to Cart with Flutter Provider — An Easy Way

In this article we cover GetX state management tool and applying same logic as we did in previous article (Add to cart), we also follow MVVM architecture so if you don’t know about MVVM architecture don’t worry you will learn in this article.

So what we will cover in this:

1. State management with GetX
2. MVVM with GetX
3. Add to cart logic
4. Some useful stuff with GetX

Lets dive into it.

What we will achieve: We create a simple add to cart functionality, for this we have one screen where we show our products and from there user can add products to his cart. A cart screen where user can see all items in cart and able to delete them. A counter appears on AppBar which represent the number of products in cart; note that this counter widget is another state full widget. As this is key ingredient in making performant app (any thing that change state, put it in state full widget in widgets directory and call it where you want it).

What is State Management: This is where state management came in, we need to call data from another place and change it from another place, the context of both place are not same and to see changes we need to call set state method. But setState() method of some state full widget cannot be call from other state full widget. So many of us try to fight with framework in order to achieve our goal. But Flutter Developer Advocates warned us at google io`19.I share the link of that conference you can learn it from them as I did.

So if you get some understanding of state management theory now here is our simple cart app:

To achieve this, first structure our directories to make it looks good, if you have your own way that is cool as well, but I used to do like this.

Model: In Model directory we have model classes.

View: In View directory we have to sub directories, one for screens another for custom widgets.

View Model: In View Model directory we have our business logic so that it is easy to manage it from there only, rather than putting it in all places of our code and end-up with closing the project or resigning the job😅.

Now lets look for this scenario what we have in our directories:

Model

👆 We have name of product and image link both in string format. For showing some products we have list of products with name and image, basically it is a list of objects (also referred as Map in dart).

Now create some UI, I used simple List View Builder with scroll direction horizontal for Product catalogue and make another widget for list item, also in AppBar I put a leading icon, title and then in top right corner of AppBar I put cart icon and above it a counter widget for cart item count (by the help of stack widget); let me show that to you:

View/Screen/catalogueScreen.dart

👆 This is a product Catalogue Screen, Don’t worry to look at this much code I will explain block by block, starting from line 9 of above code snippet I use MediaQuery for achieving responsiveness of app, and then Scaffold for basic structure, after scaffold we have AppBar in which actions are for to put some thing in top right corner of your app as I put cart icon and do some UI stuff then wrap that all in InkWell, by this when user click on cart icon, app will navigate to Cart Screen where all of your cart items will be shown and yes I used Get.to() method for navigation you will learn about this in the end of this article.

How it looks: 👇

This thing need to be explain in detail:

👆 Positioned widget is here for positioning the widget in stack, but the main thing here is GetBuilder, GetBuilder is a part of GetX package. It observe the change of state that we initialize in view model(the one that we typecast in GetBuilder using angular braces) and value property work as a reference variable by which you can call states from the view model. Let me show you add to cart view model so that will make it easy to understand:

So as you see first we extends our simple class to GetxController by this we make our class a view model and the “lst” is a state of type List(generic list) in view model and we handle our business logic here by having two methods of add and del(delete), in them we add item in product list and delete them. The update() is work as a changeNotifier that let the app knows that this state has changed so every time we add or delete any item in list it update the whole app about this change.

This is the core concept of MVVM to separate business logic from views, and we have achieved it here by using GetX. You can use the same concept in your business case just remember that one screen has one view model and do follow the concept of single class with single responsibility.

Now lets call those add and delete method that we create in our view model.

From line 42 to 48 of above code you can see the GetBuilder<AddToCartVM> this belongs to GetX package and as I explained above that it has value proerty by which we can call the methods and properties we define in the view model.

As in line 47 in onTap method we call our add method of view model and pass required arguments by this view model update the list.

If you find it difficult to understand code here and want to get the complete project to make your understanding better, here is my git repository:

saif. iu / addtocartt

So that is all about GetX state management and making MVVM with GetX, also GetX has lot of stuff and different ways to do the task you can explore it by yourself, I found this approach as an easiest way if you find more easier one let me know in comment section and we will work on next article together😊.

Some Important Stuff in GetX

As I mentioned above that I used Get.to() method for navigation let me explain it here, it is from GetX package and it is magical. As you see it dose not have any context in it, so its mean now you can get rid of context while navigating through screens. This will help you in handling background notification (closed app notification) navigation. If you want me to write article on Firebase Push Notification with Background Notification Navigation handling let me know in comment section.

Revision

1. Create a class named it as something refer to view model (abcVM, xyzViewModel etc.
2. Extend that class with GetxContoller
3. Define your states in it and use update() keyword where you want to send update to your app about change of state.
4. Wrap your widget with GetBuilder<youViewModelClass> and typecast it with your view model (IMP** try to wrap only the widget that need to update not the whole tree as it is not considered as a good practice and affect the performance of you app).
5. After wrapping widget you get value property in it and you can us it as a reference variable of you view model.

And that is all about this article, I try to give better understanding in simple words try hard to use common words and texting language also made enough gist to show code of each part which I explained in this article. Hope it will help you 🙂

If you find it helpful then clap my article and also feel free to suggest something and correct me where you feel it needed in comment section.

Feel free to contact me:

M Asaif Asif - Junior Consultant - Systems Limited | LinkedIn