Flutter Shopping Basket Architecture with Provider
Hello everyone! Basket more important many applications because it depends on more logic so we write how to manage basket states.
We’ll see how to create complex shopping architecture so that more feel provider power this here.
What is shopping architecture?
I mean that more simple architecture so this architecture has very complex to apply. I think the best simple process:
- User buy any item (so need update tab bar budget or app bar counter)
- The basket has minimum value (user complete own order when exceeds basket minimum value)
That's very easy so you add many functions to your own business ( favourite product, like, fast buy)
For example, this gif good example for I wants to tell. I wrote a shopping sample to use cuberto design (flutter web-mobile, nodejs with real-time socket io)
You can access the full article at this repo and blog.
Okay, we understand how can create basic architecture and what we need for this.
Technical Analysis
We need to notify the basket state what change in the basket. Provider that powerful solution on time because that package very easy does notification in between pages.
Provider work like cloud so that notify changes who to listen page.
I planning every item count to show in the app bar and in tab bar badge values so that we see how much buy an item.
I will set a minimum basket goal to complete shopping so need the listen to basket item total price because the complete button show this state.
Coding Architecture
We know what to do for this app. I planing write three pages with an app bar and bottom bar budget. These pages:
- Main features: Home page, Checkout Page and Item Detail Page
- Sub features(increment badge like.): AppBar & TabBar red notify icon.
- Cloud Layer: This layer has a user and he’s basket values because the application listens to user information so if want the application use this, any pages whatever observer the changes or change states.
Checkout page list to user products at the basket and this page has a rule. This rule: user complete your shopping when basket total mount higher than the minimum value.
Home and Detail page basically shows the product and main goal that it creates user own basket.
Coding Time
Firstly let's create a cloud so provider layer. I’ll keep the user state in the provider model after we’ll write the UI layer. The most important provider layer so we write the main features in this.
User Provider
I want to listen to what changes in user states so that I will draw a new widget with user state. My reach goal, increment, increase product and take all item.
That looks good what it means that for you:
- I will keep basket items in map value. (key: product, value: product count it’s a very easy and useful method but also you can prefer other methods like a list item.)
- Okay, we do increment, add or remove product but we can’t forget this operation need backend operation so I added user service instance for product operations.
I defined a user provider like this:
ChangeNotifierProvider(create: (context) => User(context))You can take directly user service instance in user provider so that you did dependency injection and access service first-hand.
Well! Let write core features at the user layer:
These functions manage product state and notify new state to who should listen. These functions between important point service layer in here so we will add the item to service.
It has many extra functions because I chose map type so some method needs to easy use in the pages.
I was using my own services so i didn't write delete and other services because of just has insert operation this here.
Service Layer
I prefer dio package on my requests(i wrote my own network library named vexana). It using a local project(nodejs api) that it will call to this API.
That has a service connection and the user will use this layer for product items.
If you want to use a local service on the project, a real device or emulator need a different endpoint due to the operating system.
Okay, core features completed that turn features so page design.
Page Design
We prepare to draw two pages, the app bar and the tab bar. These widgets using user provider. It's design and business code added into the features folder after separating its own code structure.
I prefered usually this plugin so it generates a basic MVVM structure for your project.
Product Page has a few widgets because I did product operation in the core widget that provides a clean design on the main page.
Yeah, it's cool. We know what to do in this view. I need to show user basket items total value in-app the bar. Time to now, use provider model in build chip widget. That show like this.
Is it look very easy? Yes, you right. It widget listen to the user model with provider extension so if the user adds any product to the basket, this widget draws a new value. Nobody needs a new code or structure when to need.
Product view model call to service when to initialize page so we getting all product items at services.
I want other my wish item kind count. (like banana, apple etc)We have a user provider model so that I can take user-product kind count after the show this count in the tab bar notify icon.
That show notifies count in circle avatar widget just above the app bar icon. Provider package provides a new state to use every widget on time. Whatever you use sometimes in the tab bar, sometimes complex page it doesn't matter for the provider.
We need a basket page for the checkout process. It completes user shopping. These pages have a more important rule:
- The complete button is shown when the user basket amount passed the minimum basket value.
After this rule is a success, the user can go to payment operation our own process.
The list widget listens to the user basket with a watch extension. The minimum button enabled to basket total value. And actually, we know that the provider model got item everywhere, every time how to need a form.
And finally, I like some functions that solve the core widget.
Shop card has to remove an item, add item etc. So it notifies a new state when to listen user provider model. That so easy like this card.
Lastly, we more talk about provider structure but I didn't show how to use it. If want to listen to changes, you can define ChangeNotifier but you need normally usage(like service) define only Provider instance.
void main() => runApp(MultiProvider(
providers:[
Provider<UserService>(create: (context) => UserService()),
ChangeNotifierProvider<User>(create: (context) => User(context)),
],
child: MyApp()
));That’s everything done ☘️
We know how to use about provider package for our own business. Provider help what you want shared structure. Of course, the provider has not just this case, it has more provide options for you(proxy provider, future provider etc.).
Thanks for reading.
Good luck with your projects.
