📱 Coffee Shop • Flutter Tutorial

hey what's up welcome back to another quick flutter tutorial where we create functional apps from scratch in this one I'm going to show you how to code this coffee app that I made where the user can browse through different copies for sale and add them to the cart which of course the user can also remove items from their cart and finally leading us to this payment button and as we do this let's try to make the UI design to be minimal and a clean aesthetic which is sort of my style so let me show you how to make this by jumping into the code so I've opened up a brand new flutter project so you should just get this flutter demo counter app now the first thing I'm going to do is to prepare some images you might need so I've got these four coffees that I just got on the internet you can go to any icon website I recommend maybe flat icons.com but once you've got those images let's go to your project and go to the library and we're going to drag the images in here cool so let's come back to our code and go to your Pub spec yamu because we have to tell it that we're going to import some assets okay so we have it in library slash images and let's save it and close this file so what I'm going to do is I'm going to create this completely from scratch so let's delete everything below the main function and I'm going to create this from scratch so for the material app and the home let's start with our home page and I'm going to create a new folder called Pages just to keep our code nice and organized cool so for the home page let's just make sure to import it in our main.dot file and for the background color so let's make it gray 300 now by the way one good practice to do is to make a const file for constants so I'm going to make the background color variable here so that it kind of reflects in the entire app okay so if I come back to my home page let's just say background color so if I need to make any changes to this background color I can just do that in this const file sweet now the first thing I'm going to do is let's just start off with a bottom navigation bar we can use the default flutter bottom navbar but I'm going to import the Google one because I think this one looks pretty modern now I made a separate tutorial for the Google navbar so check that out if you need but I can show you real quick how to do it so if you look at the scaffold this bottom navigation bar is what we want to fill out now just to keep our code nice and clean let's do this in a separate folder called components okay so let's create a state list widget call it my bottom navbar okay and then if you start typing G nav you can see there it is so press tab to Auto Import and we have to fill out these tabs okay which is a children of Google buttons okay so the first one I'm just going to make it a home icon and the text let's say is the shop and let's create one more button kind of like a shopping bag for the car so if I come back to my home page we can start to fill this out now and if you save this you can see there it is in the bottom cool so let's decorate this up so for the color I want to make the unselected color a bit more gray and when there's only two options here I like to just make the access alignment to be centered okay and so from here you can really decorate it up to your preference but if you like my aesthetic you can just copy what we do here so so I'm going to include a border so the tab border and let's just make this white so you can see that there's a little border there so yeah I think this looks pretty good now let's just wrap this in a container and maybe we could just give it some spacing okay that's looking pretty good awesome now that was just the decoration part of it the functionality part of the bottom navbar is this on Tab change so you can see if I tap on each of these we need to have a method so let's require this when we create it and just pass through the method here so the value it will tell us about the index on the bottom nav bar so if you come back to the home page right you can see it's got a red squiggle because we have to specify this on Tab change and the P0 so this is just the index integer okay so if I tap the bottom nav bar let's navigate to a different screen okay so let's create this method up top so first of all let's create an integer to know what the selected index is so right now let's just say it's 0 which is the shop and then let's create our method here so with a given index let's update our selected index cool and then let's display the appropriate pages okay so it's going to have two pages the shop page and the cart page now we haven't created these yet so let's do that now so what I'm going to do is just to create a stateful widget and let's just put in in the center just a text widget just so that we can see if this is working or not cool so come back to the home page and then import these bad boys in the body of the scaffold you can now give it the pages with the selected index so if you look at our app we can now you can see if I click around it reflects the appropriate pages awesome awesome so what that means is now it's time to create our shop so I'm going to create a new folder called models and models is basically the sort of data structure and the kind of object-oriented programming that we're going to do so what I mean is let's first of all create a coffee right how are we going to represent a coffee so we need a few things I need to know the coffee's name price and also the image do the constructors for these and I'm going to need to create one more model which is the shop let's create this class here and I'm just going to comment a sort of plan so at the beginning we need to know the coffees that are for sale have a method to get the coffee list and we also need another list for the user cart and also an ability to get the user card maybe we'll put the Getters on the bottom side cool and the main two important functionalities are adding item to the cart and also removing from the cart okay so let's start to fill this out so starting with the coffee so I'm going to create a big list here a big list of coffees and let's call it shop and we have four different copies that I'm gonna make here so let's say black coffee latte espresso and an iced coffee this is just the example I'm going to use with the images that I chose so let's create our coffees here okay so there's our long black and let's just copy these and change up the values so make sure that in the images the naming is exactly the way the string is awesome and now let's go to the user card so this will also be another list of coffees but this one is just going to be an empty list at the beginning because it'll be empty cool now in the different parts of our project we want to be able to get these lists so let's create a little getter method okay so if we get the coffee shop just return the coffee shop and same thing for the user card cool so now that we set up the shop we have to fill out these last two methods which is adding the item to the cart so let's create this method now if I'm going to add an item to the cot I'm going to need to know which coffee was added so I'm going to include that as a parameter and then we can just add it to the list of cuts similarly to the remove we need to know what coffee it is and then just remove it from the cot that's how easy it is cool cool cool okay we're making some good progress okay so what I'm going to do now is let's come back to the shop page and let's try to display all of the uh coffees in the shop right so I'm gonna replace this with a big column and let's have a bit of a heading here how would you like your coffee now it looks like it's scrunched up at the top and we can't really see it so let's wrap this entire thing in a widget called safe area which just helps us avoid the notch kind of area so yep let's do that and also add some padding cool so this is our heading and then we've just got a little bit of space the main thing here is the list of coffees so because we are in a column let's just use an expanded widget to fill up the rest of the space in the column and we're going to return a list View so we're going to get the individual coffees and then return the tile for each coffee now I just realized for us to access our coffee shop we're going to need a sort of simple State Management solution dealing with different screens and stuff like that so I'm going to use a provider package which is probably the most simple State Management that there is so just import this one and I've used provider in my previous few apps like the grocery app and sneaker shop and stuff like that so so if you don't know how to use it I can just show you real quick to set it up so firstly in the coffee shop we need to extend it to the change Notifier and in the main.dot file we're going to wrap this entire app and then change Notifier provider and for the create we need to give it the coffee shop okay and the Builder will just give our material app sweet so this change Notifier basically what it does is if there's any changes to our app like for example the user ads items to the cart and removes them we want to reflect the state of the app right so anytime that any changes happened we need to notify the listener so the only two things we need to notify are the adding item to the card and removing item to the cart so that's the only sort of UI State changes that is going to be made cool and then what we can do is we can wrap all of this in a consumer widget so that we can consume this data okay so make sure to give it the coffee shop and if you have a look at this value this value is how we access everything so if I try to get the individual coffee now you can see if I say value Dot and now we have access to all of those methods that we created in our in our coffee shop right so first of all getting the individual coffee let's get the coffee shop and just go through each index cool and then let's just return a basic list tile just so that we can see this working and just return the coffee name cool and the very last thing is the item count so let's get the coffee shop length and just print that mini cool and there it is there's our shop so now that we've got that we can now spend some time to sort of decorate this okay now I could make this coffee tile fill it up here but I want to make my code clean so let's create a new component called copy tile and just with a given coffee let's create a kind of more prettier tile so in the title let's have the name subtitle let's have the price and the leading let's have the image Okay so let's return our coffee tile now and if you give it the coffee then you can see everything's reflected it's looking good now coming back to this coffee tile container I want to make this sort of more colored and I think we're going to need some margins here maybe just on the bottom though cool and Corners are looking very sharp let's board our radius this guy and maybe we could use some padding as well everything's looking kind of squashed so on the top and bottom side let's put 25 and maybe horizontal let's put 10. let's actually fill out this trailing and give it an icon so this one is going to be let's just put an add button so that the user can add it to their cart right so you can see this unpressed function let's copy it and make sure to require it and coming back to our coffee tile you can see now it's got a red squiggle because we have to fill out this unpressed right so if I press this plus button then I want to add it to the cot so avoid add to cart now I'm going to need to know which coffee I'm going to add so let's give it the coffee and then now we just need to use a provider to access those coffee shop methods right so you can see here add item to coffee and just give it the coffee sweet so yeah you can see that plus button now and when we add it to the cart I want it to be reflected in the card page right so let's come back to our car page and let's fill this guy out now cool so kind of similar to the shop page so overall column and let's just have a little heading at the top cool and then below that let's have an expanded list and we're going to return a similar tile now I could create a new cut tile but what I'm going to do instead is I'm going to reuse my coffee tile because it's going to be very similar now the only difference is the fact that I want to change the plus sign to a delete sign so you see this add icon we kind of hard coded this in so instead let's just also vary up the icon okay so what this means is if you come back to the home page or the shop page rather the coffee tile now you have to fill out the icon okay so I'm gonna of course for this one I should give it what we had before and now we can just reuse this coffee tile okay so let's get the individual coffees which again we need that value so let's wrap this in the consumer cool and now we can get each coffee from the value and go into the user card now we can return the coffee tile so let's give it the coffee and unpressed if I press this then I want to delete so let's call it remove from cart and this icon is a delete icon oh which reminds me actually the previous one should actually be a plus yeah I could add icon cool so now let's have a remove cart item okay let's just call that provider method okay everything's looking good except for the fact that we have an error because I didn't specify the item count okay let's see if this works so here's my list of coffees and if I add it then you can see we have a long black and now we can remove it from the cot cool so I can add multiple coffees and I can remove them now one thing just from using this app currently is as a user I feel like we should have some feedback to know if the user successfully added the coffee to the cart okay so what I mean is like when we add the coffee to the cart yeah for sure it got added but let's also let the user know that it's been done successfully okay so let's just show a quick dialogue okay and just give them a nice little message here so let's try this again so click plus and there's our little dialogue and yeah so it gives us as a user a lot of feedback and feels like you know everything's working well under the hood cool everything's looking so good so what we can do now is just maybe create a little pay button at the bottom So Below this list of cart items let's just create a pay button and if I press this button then we need to pay so let's create that method up here and in this pay now method this is where you should fill out your payment services here so that's going to depend on your app and your business now let's give this pay button a bit of a brown color oh looks like our text should be white then cool and then border radius let's make it more circular oh yeah the decoration should be above the child and we can wrap this in a gesture detector and on the on top we can now fill out and do the pay now method so like I said this pay now method is where you can kind of integrate your payment services whether it's stripe or you know whatever it is so we started from scratch and we made some pretty damn good progress so far now I developed this app much further by adding like a nice intro splash screen and also just kind of cleaned up a lot of different parts of the code I added a drawer as well and I also added this sort of quantity screen where you can select the size and the number of coffees you want and so yeah there's a lot of things to fill out from this point on and if you're interested in the further developed coffee app then you can get it from my gum Road below but hopefully this tutorial was helpful and you learned something if you have any questions just let me know below I'll try to come around and help you out but thanks for watching and I'll catch you guys in the next one peace foreign [Music]

Channel: Mitch Koko

Views: 46,741

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

Id: RPvhoghXn54

Length: 20min 11sec (1211 seconds)

Published: Tue Mar 28 2023