💰📱 Minimal Ecommerce App • Flutter Tutorial

yo what up welcome back to another quick flut tutorial in this one I'm going to show you how to cat up this minimal e-commerce app so the user can browse through the products and add them to the cart and of course you can also remove an item from the cart and we want to eventually end it with the pay button so just to have a bit of a quick overview before we start coding like I said we're going to start off with this intro screen just to greet the user and then we're going to go to the shop page where the user can browse for the products and they can add products to the cart and also remove the products from the cart and we can go between these two pages and once the user is happy then they can click the pay button so that we can get paid so I've opened up a brand new flut project and you should just get this demo homepage now I'm going to delete everything below the main function just to code this up from scratch so in my material app let's start off with the intro page and for all the pages I'm just going to create a separate folder called Pages just to keep our code nice and organized and so let's come back to our main. do file and import this page that we just created sweet so we should just have a blank scaffold and this is where we'll begin now first thing is for the background color I just want to have a kind of like a gray color but instead of fixing this color manually here what I'm going to do is I'm going to create a new folder called themes and I'm going to create a file called light mode and I'm just going to put all the colors here just to keep it consistent and organized so what I'm going to do here is for the background color so I wanted to get the shade of 300 and the main ones I want to specify here are the primary the secondary and also the inverse primary so essentially I just have different Shades of Gray for my app you can choose whatever colors you want but I'm just going to go with these colors here which I think look pretty good so if I come back to my intro page like I said instead of just specifying this gray color what I'm going to say is theme. of context go to the color scheme and then we can access all of those different ones that we created so we can say background cool this way if we ever need to change color later on we can just come to this theme file and just change it up to whatever we want sweet now for the actual UI of this page for the intro page I'm just going to have a big column here and let's just create a quick plan so at the top I want kind of like a logo and then a title a subtitle and then let's have a button to enter into the shop so for the logo you can put in whatever your logo is but I'm just going to start off with a icon maybe like a shopping bag icon for now and let's make it a bit bigger and then the color so again if you want to access those colors just go theme.of context color scheme and I'm going to go with inverse primary so that's just the dark color sweet and then let's have a size box just to create some space and then for the title I'm just going to call it minimal shop and then the subtitle you can have a kind of like a slogan so I'm just going to say premium quality products and in terms of the design it's a good idea to make the top one a bit bigger and Bolder and the bottom one a bit more lighter cool now it's time for the button and instead of just creating the button here I'm just going to I'm probably going to want to reuse this this button later on in the app so I'm going to create this in a separate folder called components and I'm going to create a file here called my button so this button I want it to be taable so let's have a gesture detector and so on tap you can see it requires this function I'm just going to grab this one and I'm just going to require on the top when I create this button and so for the look of this button let's have a container with a with a child which I'm actually also going to require at the top so what we did here is if I come back to my intro page and I try to get the my button you can see there it is Auto Import so just hit enter and let's start filling this out so for the ontap for now let's execute nothing and the child let's give it like an icon sweet and you can see there it is so let's come back to our but. DOT file and decorate this up let's give it a color let's give some padding and the corners are so sharp so let's just curve those corners and let's just space this out a bit okay sweet it's looking good now if I click on this I want to go to my shop page which we haven't created yet so let's just create that in our Pages folder and when it comes to navigation I created a separate tutorial just about navigations but it's a good idea to have some routes and what I mean is we can list out the different pages that we have so for example we have the intro page and we got the shop page now and so if we just specify these routes then when I click on this button and I want to navigate we can say push named and we can just go to that route name and so you can see if I click on the button then we come to the shop page sweet now let's start decorating the shop page now the app bar looks quite funky now I want to make it very minimal so for the background color I'm actually going to go transparent it's got a bit of a shadow there now let's say elevation zero and the foreground let's give it a dark color and then now we have to start filling out the drawer so if you just say drawer and you save it without specifying anything further you can see it's got that blank menu drawer here and so I want to start filling this out and so same thing with the button with the drawer I want to create it as a separate component just to keep our code nice and modular so let's give it a background color and let's have a big column with a bit of a plan so at the top it's usually a good idea to have a drawer header which is kind of like the space for the logo and I'm going to have three list tiles so I want a shop tile a cart tile and another one just to exit the shop so let's start filling this out so for the drawer header I'm just going to use the same icon that I did at the intro page but like I said you can bring in your own logo or image here whatever you want and then let's just space this out and then usually you create this as a list tile and again I'm just going to create this as a custom list tile just to make it look nice and if you think about what varies between these list tiles is I want the text I want the icon and I also want the ontap so if you come back to our drawer now you can say my list tile order import and then start filling this out so the first one I just want to say shop and I think for the shop I think a home like the house icon is appropriate and currently for the ontap let's just execute nothing just to see how this looks sweet there it is now I think we could use a bit of padding on the left hand side nice and so let's just create more of these list tiles and change up the text and the light and the icon now for the last tile like the exit Shop I actually want that on the very bottom so one little trick you can do is group everything else in another column so that in this overall column you essentially have two items in there and then we can space between and it will push the other thing to the Bottom now that's too close to the edge though so I'm just going to put another padding here just to space from the bottom and that's looking pretty good so now let's handle these ontap functions so for the shop we are already on the shop page so if the user clicks on this then let's just pop this drawer and if we click on the card page then now we want to navigate to the card page so for this we still do want to pop the draw and then we want to go to the car page now we actually haven't created the cop page so let's just do that real quick and specify the route and sweet we can now go to the Cod page so now let's start filling out this page so I'm going to have a similar appar as I did to the previous page now for the exit shop title we want to go to just the intro page just to go back to the very first screen and looks like we have a bit of a typer slash sweet now our app is looking pretty good so now that we got this template down we want to now have the products and the shop so for this I'm going to create another folder called models and let's create our first product so this is going to be a template of what a product should be so every product we need a name I need a price I want a description and we're going to also have an image later on as well now let's create a model for the shop and so in a shop we want to firstly have a list of products for sale we want to have another list for the users cart and let's have a couple of Getters and then the main important functions here are the adding item to the car and also removing an item from the car those are the two main functionalities so let's start off with having the list of products for sale and I'm just going to call it shop Let's have our first product here and we can fill it out so I'm just going to keep it quite generic so I'm just going to say product one price is $99.99 some item description and the image path now for the image path I'm actually just going to comment that out for now and we'll do that at the end just to keep it simple so I'm just going to copy this and create four products and then for the users cart it's just going to be an empty cart at the beginning and we want to have a couple of Getters which just means if anywhere around the code we want to get the shop then we can just return what the shop is and same as the cart great which brings us to the main important functions which is the adding to the cart so as a parameter I'm going to need to know what the product I'm about to add okay and simply we can just add it to the cart same thing for removing just I just want to know which item I'm about to remove and just remove it from the cart cool now for us to display this on our app we're going to need to create a nice little UI component called Product tile and so as a parameter as long as we're given a product then let's create a nice product tile UI for this so just starting off with a column I want a I want the product image at the top the product name the description the price and also maybe a button to add it to the C so like I said the image part I'm going to show you how to do just a bit later on so just to keep it nice and simple I'm just going to put in an icon maybe the favorite icon which is like a heart and the text let's get the product name the product description and the product price which is actually a double like it's a number so we're going to have to convert it to a string with two decimal places sweet now I'm going to bring in a package called provider which is a very popular simple State Management solution so if you open up your terminal let's say flut p add provider and just import this package I've made a separate tutorial on how to use provider so check that out if you need but I can show you here real quick how we can use it so essentially if you go to the shop we want to extend this to the change Notifier and any changes we make like when we add to the car and we remove from the car we want to notify the listeners and what that means is we just want to update the UI for the components that are listening to these changes so we just need to a quick setup here real quick which is the main function we have to wrap our app in a change Notifier provider for the shop and return our app cool so what did we just do now if I come back to my shop page we can access the products in our shop so we can say context. watch the shop and you can now see all of those methods that we had before so we can just get the shop and now in the body of this page let's create a quick list view. Builder and what we're going to do is we're going to get each individual product from the shop and just return it as a product tile UI we have our list of products going through each index which we should actually specify the item count we want to have just the length of the products and we're going to go through the index of each product and return it using our product tile that we created cool so let's just save this and rerun just to see what this looks like and there it is cool now it doesn't look that pretty but we can decorate this up now so if I come to my product tile I think we could use some decoration here like give it the primary color and some margins and also padding for the inside children now I did the margin as 10 inside so if I come to my actual list I'm going to have a padding of 15 which makes it 25 all around so you can see everything is spaced out really nicely now you know I really hate sharp Corners so let's curve these Corners there we go and also I actually want this scroll direction to be horizontal nice and it's currently filling up the entire space so I'm just going to wrap this in a size box just to fix the height of 550 and the product tile itself I'm going to specify a width of maybe 300 yeah I want a card that looks like this and so this icon this favorite hot icon is where we want to actually put the image later on so I'm just going to set it up nicely for that I'm going to wrap this in a container and just add some decoration with the secondary color and padding so I want this to be a Square now one little thing you can do is you can say the width double do Infinity which just means fill up the entire width and then I'm going to wrap this in an aspect ratio widget and I want the ratio to be one meaning it's a square okay it's looking pretty good now let's just have another sized box and everything's aligned to the center so if you look at this cross AIS alignment I want it to be at the start and let's change up these text widgets so the product title should be bigger and Bolder and the description should be much more lighter that's looking good and for the price I want that to be at the very bottom so kind of like what we did earlier in the drawer I want to collect everything above it and put it in its own column so that we can say main access alignment space between and what that's going to do is just push that last widget to the bottom and the reason why this step is very important is because you probably want to have more text in the description right like we want some more space there just in case we are going to type some more in the item description sweet and then we want to have a button so I'm going to wrap this in a row and beside the price I'm going to have a button so let's just have a add button and just decorate it up slightly and so if I click this button I want to have a add to cut method and just before we do add it to the cart let's just show a dialogue box just just to ask the user if they want to actually add it to the cardart like let's get confirmation so add this item to your card question mark and let's have a couple of actions so we want two buttons here one for cancelling and one for yes so if we cancel it then we just want to pop the box if it's a yes then we want to pop the box but we also finally want to actually add it to the cart and so you can go to the context. read in the shop and there's our method add to cart sweet so if I restart this and I click the plus plus button then you can see there's our box do you want to add this to your cart let's say yes and if I go to my C page it's still empty because we didn't fill it out so now let's fill it out so we're going to have a big column and we want to have a cart list for the majority of this page and then let's have a pay button at the at the bottom so let's start by getting access to that card and create a list view Builder so it's going to be similar to what we did on the shop page we're going to get the individual items in the C and just return it as a list tile so we'll give it the name we'll give it the price and also a trailing icon for us to remove this from the card now this showing dialogue to confirm if we if the user actually wants to remove it is going to be quite similar so I'm just going to copy that earlier dialogue that we created and just change up these to remove and we need to know what product we're removing so let's actually require that as a parameter as well sweet and whoops we forgot to specify the item count which is just however long the cart is sweet okay let's try this so if I add this to the cart and I go to the cart page you can see there is the item and we can also click this minus button to ask the user if they want to remove this sweet that's looking really really good okay now one thing I want to do is you can see the majority of this column is the cart list now at the bottom we want to have a pay button so let's use our button so in my button we want to say pay now and let's just create a method here real quick saying user press the pay button and so what I'm going to do is let's just require the context just so that we can show another dialogue box and I just want to say user wants to pay connect this app to your payment backend awesome now another kind of UI thing that is useful and good idea for you to do is if the card is empty instead of showing a blank page let's write a little note so what I mean is if the cart is empty question mark then let's just return a text widget saying your cart is empty in the middle so there it is so if I just save this and I rerun it I can add items to the cart and there it is and if I pay now you can see that that button works and if I remove an item from the cart then it tells me that the cart is empty looking pretty good now just for convenience I think it's a good idea to put a cart button on the top app bar so that we can always access it so in the app bar and the actions let's create a quick button here for the card there it is so of course we can access the cart in the drawer but we can now also access it right from the app bar which is Handy sweet which brings us to the images so I've actually already prepared some images so I've got some Square images here like the glass the hoodie the shoes and the watch so you obviously don't need to use these exact images you can choose whatever images you want and the products that you're selling so let's say you have some images in a folder called assets and then go to your project and you just want to drag that into your project and then we want to come back to our code and we have to tell it in the pope. yo that we are bringing in some assets so if you scroll down you can comment this little bit out and specify where the assets folder is sweet so save it and close that and if you come to my product model remember we commented this out so let's now try to have an image right so when we create our products we have to give it an image path and so just for the first product in the assets what is it called so assets SL let's say glasses. PNG make sure to write the exact file name and I'm just going to do the same thing for the other ones sweet now if I come to my product tile this is the UI to display it and right now we are displaying just this favorite heart icon so I'm just going to remove that and let's say image. asset and then we can just say the product. image path and that should be good to go so save it now it might be a good idea especially when you're bring in assets like this it might be a good idea to just kill your app and just rebuild it and if you rebuild it then you should get no issues and looks like we have some nice images there for the products so there's a very minimal functional e-commerce app so I'm just going to leave it out there for this video we made some good progress and implemented the basic functionality that you need in a very minimal e-commerce app so now once you decide the products or services that your app is offering you can then connect this to your your preferred payment solution which I'll also make some videos on you know maybe like how to accept you know Apple pay Google pay stripe these sort of things so so I'll make some tutorials on those as well and if you have any questions about the code or anything that we did in this video just comment below and I'll try to come around and help but good job if you made it this far thanks for watching and I'll catch you guys in the next one [Music] peace

Channel: Mitch Koko

Views: 30,347

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication, firebase

Id: rYdP2LnBGsA

Length: 29min 48sec (1788 seconds)

Published: Mon Nov 06 2023