Flutter UI Food Delivery App Tutorial | App from Scratch Part 1

what's up everyone welcome back to my four-star school youtube channel in today's lesson we are going to make these food deliver apps first i'm going to give you a quick demo what we're going to build after you finish this tutorial and this is the home page of these food deliver apps and we have a category list for example this recommended popular noodles and pizza when i click these recommended i'm going to show a list of dishes right and when i click this popular there are different kind of dishes showed up it actually works unlike the video i made before and also the same as those indicators are on the bottom left corner when i click this popular the second indicator uh we're going to have uh this amber color so when i click these noodles the the third one will be like a highlight right yeah and this is for our home page and for our detailed food page when i click this soba soup i'm going to navigate to this detail of food page okay and it can be scroll right we can click these go back button to go back to the previous page and we can choose different dishes [Music] also we can check different categories this is tomato chicken the reason uh there is no item in these noodles because i just written an empty list so like not going to show anything same as this pizza okay that's all for this demo and if you are new to my channel feel free to reach out to my channel page there you will be find a dire programming language tutorial flutter tutorial as well as these a flatter ui from scratch tutorial also don't forget to subscribe to my channel some out my content and open a notification so you won't miss our latest flutter tutorial okay without further ado let's get started first we're going to create a flutter project so let's open our terminal and cd to our project workspace in there we're using this uh flutter create command to create a food a delivery app and hit enter just wait few seconds you'll be successful okay i think it's success then we can open our visual studio code here we select these uh open we click this open folder so find our food deliver apps and hit this open and we're going to do some project setup so first i'll create a ss folder and i'm going to [Music] drop these images we're going to use in this project and open this pub species yaml file in line 48 going to uncomment this line uh replace it to access images right images and hit save and we're going to wait for a few seconds okay i think we just said then we can uh go back to this matt dalton and so i think first going to create some folder so the first one is our screen folder in the models folder also the constant folder and the command wedges folder and in this screen we're going to create two folder first is our home and the second one is for detail and we're going to create a home doctor under this home folder and it should be a stay less the widget and i just call it a home page and remove the constructor for now and import the library i replace this container to scaffold this should be the body attribute and this would be a center widget all right in the center if you have a child attribute we're going to replace just a very simple text indicate this is our homepage right and hit save and back to our main.dar and we're going to delete everything under this line 30 let's delete everything and replace this uh my home page to a home page we create just now and i think we could remove these sim data and change this flatter demo to deliver apps okay and hit save and we can hit this run button so make sure you have uh open your android emulator which will show in here indicate we already open our pixel 4 emulator then i can hit this run button so for the first time it will take a little bit longer and we just need to wait for this app in a few minutes you'll be able to see this home page show on our emulator and there's one more thing we need to do we're going to hide these status bar and also these show debug banner so let's find this material app so we have an attribute which is called a debug banner show debug check banner going to set to force and also we're going to hide the status bar so it should be inside this build method we can access to this system chrome system [Music] chrome i think it's called system ui overlay style and we can pass a style and here i'm going to use a system and ui overlay style and in there i can find this stay test part color i can set to transparent and let's say okay i think we remove these uh status bar and also the uh debug banner so we can start from this point okay let's open our design file so in here i'm going to divide these home page into a several section so first is this custom app bar and then is this a restaurant information and then is these category dishes okay so first let's define our primary color and it should be this color and that's back to these constants and i'm going to create a file i just call it color star and here i declare our primary color and our background color same as here the background color is this little bit gray right because this car this dish is color should be a white color so let's go for our app color so let's save and close it back to the design file and in here i go i consider to use a stat for widget for our home page because in this time i'm going to keep track of the select the index and i'm going to show a different item in here right so i'm going to change our sale as the widget here still as the widget to a stable widget so here i can we can remove everything because we don't have anything inside this home page so we can use create a step or widget instead i'm going to call it home page and remove the constructor import library we could still replace this with a scaffold and we have a body attribute and here we can still place our center widget uh with these uh home page right and hit save yeah the page still stay the same because we didn't change any layout for it so let's create another folder i just call it widget and we're going to play some custom widget for this uh home page so first i'm going to declare symbol variable for our home page so the first point is this select index so by default it should be 0 which means the first item gets selected so and another one is i'm going to use a like a page view for those item i'm going to use a page view so when i click different categories it will show different pages and for this entire body i'm going to [Music] use a column widget so let's make it colon and we have a children attribute inside this column and i'm going to set this across the alignment to start because you'll notice you're align in the star right so i'm going to set this cross alignment to start and then give this a custom add bar all right so i'm going to implement this one also we need to set uh the background color for our scaffold from our colors dar we define it before so let's create this custom app bar um let's check these uh design file and you'll notice uh these custom app are going to show uh in the detail page as well so i'm going to make it a common widget so i will create a custom apple under this widget folder which is under this left folder it's now inside this home folder i'm going to create a file i just call it a custom tape part doctor and it should be a stateless widget in our koi custom file and import library so first i'm going to uh declare some attribute so first is this icon right icon is different and also when i click uh the icon inside this detail page it will be a navigate back to our home page so i'm going to declare a function attribute which is i can trigger our callback so first it should be icon data data is our left icon and also the icon data for our right icon and then is our function uh it's a nounable function called back of course uh this one don't have uh any like a callback but this button have so i'm going to make it number and let's increa uh implement it is a constructor so it should be the start left and this dot right icon and also for these a callback going to make it a name con and parameter should be this left corvette okay so and then for this field method uh first we're going to give these uh fba a padding right so let's give some padding uh i'm going to use edge insert star only so i gonna give the top top padding should be i use this medium query to get the height of the status bar the context dot padding top and also the left should be 25 and right should be 25 as well and it is for our padding for the child i'm going to use a row widget it should be our first row and the second row we're going to use a space between uh to alignment those items which will be a road budget everybody's children attribute and also we're going to set this main axis alignment to space between okay and for our first uh child should be uh i icon but it's inside the container because we're going to give it a like a circle shape so we're going to use this decoration we use box decoration for its shape should be a box shape dot circle and also color just white color and for it is child should be just icon we're using left icon right and also you notice we initiate some a padding for our container so let's say some padding for our container we're going to use edge insert top from left to right can be 16 8 8 8 okay and this for our uh first icon and for our second one uh probably the same and it's another container and have the padding as well using these edges i'll use this 8 and also we have a decoration i think probably going to be the same so i just copy and it should be a right icon for our second one all right and also we're going to use a gesture detector widget to wrap our left icon of course when i click this button in this detail page you are able to go back to our home page so i'm going to wrap our first widget with another gesture detector character and we have this on tab attribute so i'm going to first uh let's check this left callback first i'm going to check this callback it's not equal to now uh if it now equals now i'm going to call this left callback it should be enough otherwise uh just i return now so i think that's all for these custom ad bar and we can save it and we're going to use in here so let's import the library okay i think i make some mistake here so let's back to this custom app bar here should be just using this all and set to a let's save okay now it's centered and also we could refer to it so just extra another messer i just call it build field icon all right and we can just pass our uh parameter i just call it icon data icon so it should be a widget it doesn't matter so here i just use icon here right and for this one i could place our left icon and also place our right icon okay and let's say basically basically it will stay the same but we refactor it so you don't need to like copy your code so we can write a clinical in this case okay that's for our uh custom apple in our home page i think you could use it when we actually implement our detail page okay and let's back to our home dollar and next i'm going to implement this one which is the information about the restaurant for the restaurant we're going to first create our restaurant model so let's under create a file under this model the dirt i just call it risk to wrong and it should be a class just call it risk to run all right for the attribute so i think we have the name the wait time and the distance this should be a label and icon and the description and also the score and the most important part which these uh i just i want to call it a manual which uh which is a list of different dishes so let's implement it so first is the nan and wait time distance and label logo and description you can also score and a map of a string should be a key and value should be a list of food and i'm going to create these food uh class and it should be a manual right food just means those items okay [Music] then going to create constructor uh restaurant should be the stock name please wait time they start distance this label and this logo and install description this score in this manual okay let's save and then we're going to create these food model so i'm going to create another file uh koi food doctor so inside is food loader now we're going to create our food model so which include our image uh this food name the wait time and also the score the calorie in the price and the quantity in gradient right and also about okay so let's create glass i just call it food and contain the image url and also the description and then [Music] and wait kind of score quantity and also a list of map which is a string and also another string that contains a ingredient so above all and boolean which is the height light the reason i have this boolean because you'll see if we set to true this one will have a yellow color okay and let's implement i think i'll implement this constructor and first one is our image and we stop this question let's start then this wait time and they start score and it's the car and they start price they start quantity they start ingredients above the highlight so for the highlight i'm going to use the name parameter so by default you'll have a force okay let's say and we can we can import see okay then we can import these food inside this restaurant so okay and save and let's back to design file i'm going to create a static method to generate a list of food which show in our uh these uh recommended and popular so let's back to this food and i'm going to write two status method so the first one will generate a recommended food i will which will shown here and another static method uh is this generate a popular food which will show in here all right so for those two i just make it empty list so it didn't show anything and for our food you see we have this image and an and the description and the label and the price and quantity and also the ingredient right we have an ingredient then and the image is basically for the food so because the first one we're going to highlight it is labeled so we set this highlight to true and we can save it that's for our food so we're going to arrive aesthetic method for our restaurant as well and for the restaurant since we only have one restaurant here so it's really simple so we just return a single restaurant always it is nan wait time a dis distance label description and also uh those two left foot list so this one will generate a list of recommended food and this one will generate a list of popular food as you'll see in here okay so let's save we're going to close those two model and back to our uh home doctor and we can start from this point let's create another file and i'm going to call it a restaurant info now let's create restaurant in for r uh it should be a stateless widget i will destroy rest to run info and we can remove the constructor for now and import the library so for it is container so first just place very very simple text just call it restaurant info and save it for in here under this custom app bar we're going to import our restaurant info restaurant info okay and let's save you're able to see the text show on our screen here and we could customize a little bit so first we're going to get our restaurant object so i just call it restaurant and you from our static method okay we need to import library we could use this generate restaurant mixer and we get this restaurant object and for this container i'm going to set margin top edge incest only for top i'm going to give it 40 and also we have a padding we use that symmetric so using horizontal [Music] to 25 right for it is a child in this case i'm going to use a column widget and inside our column widget we have a row widget right so this will be our column widget first column and second column and we have a first row and second row okay so i will place this text widget which we with our column widget and we have this trial attribute and we have a first row okay so in this first row it should be a space between right so i'm going to set it is my axis alignment to space between okay and we have for these uh children in children we have a left colon and right colon so for the left colon should be two texts so but we also need to say this grocery access alignment should be a start so change it is scrolls alignment code close alignment oh sorry it's your insides colon cross axis alignment to start before it is children we have first text which is a restaurant name and we have another site box i'll give it high 10 and also another text i should be uh well c should be a wait time in distance and also the label yeah so i think it should another rope all right so for it is child for its uh text it should be a restaurant uh wait time another text is a restaurant distance also a restaurant label okay and we can save it for now and we could customize it a little bit so for our restaurant name i'm going to change this style change the style by using text style and i'm going to increase his font size to 24 and also change the phone weight to bold and let's save okay now it looks uh much similar so for this uh distance i'm going to wrap uh this text widget with our container because i'm going to keep it around corner rounded corner so wrap it with a container and give it padding using this edge instead or set to 5 and also we have a decoration using this box decoration going to change its color using gray dot release opacity set to 0.4 and also the border radius are going to use polar radius circular order radius circular going to set to 5 and also going to style this text by using text style change it is color to white okay let's save okay now it's much similar and then for these restaurant distance so first going to give it some space so we're using the size box give it weight set to 10 and also style this distance text using the text style going to change the font size to 16 and also phone way to uh phone weight both and color change to uh grade with capacity opacity 0.4 as well let's save okay now it's similar so we could do send for these label just copy this line and paste it here [Music] okay that's safe and also we need to have a slice box okay i think very very good for our first row so let's create our second row and this is our first row which is the coden so we're going to make our logo under this colon so i'm going to use this clip rack widget so i'm going to say it is border radius i'm going to use click all right correct um folder layers dot circular going to set to 50 and also for this child i'm going to use image access and we have a restaurant i think should be our logo i'm going to give it away 80 okay let's say now you'll be able to see this icon okay it's pretty good huh for our first colon and then we're going to create the second column so that's back to here so this is our first accordant okay scrolling down scroll down okay after this row so first i think i need to give this some space so i use size box i set to just five is enough and then we're going to make another row okay so because you know this is our first row and this should be our second row and we're going to use this space between again also we have this uh children attribute so first should be our text uh description text okay restaurant description okay and also we have c also we're going to style it and do it in text style i'll change font size to 60 okay let's say for now you're able to see our description text here and also i think okay and then for our icon so under these uh text i'm going to create another row widget and using this children attribute so first is our icon icon star out hide going to change its color to a primary color and then it's the text widget so text widget just see uh it's a restaurant score and restaurant dot score okay [Music] restaurant restaurant score and i think we need to style it so using text style i'm going to [Music] uh change it his font size up to 18 and also font way to fall okay let's say okay so i think this uh star how light yeah this one is i want and also give a little bit space size box width to 50 and save okay now it's a very similar like this prototype okay so i think we finish this a restaurant info so next i'm going to implement this uh food list and then i'm going to implement this food item and as well as this uh food list view so let's back to our uh whole data and i'm going to create another a file i just call it food let's start right and it should be a stateless widget called list which is uh here so first going to import the library and declare some attribute i'm going to use so first is the select index it will be passed from it is parent and also [Music] function which is the callback function then i'm going to [Music] implement this constructor should be selected and also this callback and then since we need to use the information store in the restaurant and we could also i think okay we could uh pass as well uh restaurant okay at least restaurant and then we go back to so here i just can uh list okay i'm going to use it in our home so under this restaurant info and i'm going to return food list so first the select item uh index going to pass and then it should be a set stay method stay okay [Music] stay true here and going to first you will receive a index going to change to index okay see oh in this front here okay so i'm going to pass this sesame measure and then it's a restaurant so restaurant will be get on here so it's a final restaurant rest room going to equal restaurant and for library dot january restaurant so then i pass this restaurant to our food list okay and let's save this is for our whole daughter and then we go back to our food list and here so we can get a category [Music] [Music] to list okay and then let's see i should be a container with a height so because i'm going to use a list of you so i must give a height for the container and also give some padding for this container by using this edge incest also metric and vertical set to 30 and replace this with our list view don't separate it and for uh these are going also i need to change it is scroll direction uh using this axis uh horizontal and also we have a padding using this as inset symmetric horizontal change to uh 25 by four it is item builder i'm going to return a container also first you will receive contacts and index so we're going to return a gesture detector because we are going to implement it is on tab attribute all right so only on tab i'm going to call this callback which you will pass here call back and also we have but we need to pass the index and also we have this child i'm going to use a container so we can change this decoration box decoration because this one we have a rounded boner so using this uh box decoration going to say this border radius using border radius dot circular i'm going to set to 20 and also the color first we're going to check the selected equal to index if equal i'm going to return the primary color otherwise just colors y okay for this container we also are going to get some padding we're going to use this edge insert symmetric for horizontal of a vertical set to 10 horizontal set to 15 okay and next is this uh separate raider builder and it should be just size box with it to 20 in this item count of the category dot lens but for this container we also have a child i should be just a text which i'm going to use a text widget it should be a category index and going to style it so using text style it a border so change it from weight to both okay i know it's a lot so let's save and you're going to see this one right similar i like this prototype okay so when i click going to change right because we're passing this as this callback which you change it is a select index so we can change it okay that's for these foot based right and next we're going to implement food item and then implement this entire page view back to our home.r since we're going to use a page view so i'm going to create a page controller because page controller okay and so i'm going to use this page controller first for this put this when i click those button i also trigger this page view to jump to other page so i think i'm going to pass the function here as well so after this day i'm going to use this page controller dot jump to page of course we have this index right so we're going to jump to the index as well so let's save and i'm going to create another widget after this full list so which is expanded widget we have a trial and it's a food list view we're going to create so this uh food this view will receive select and also the method i'll change the index so after here i receive an index and we're going to use this set state change it is index and after this method i think i'm going to pass page controller as well because i'm going to use a page view in this foot list okay i think those three is enough okay let's say and i'm going to create this for this view let's create a food list view and it should be a stay less the widget and i can call it put list view and import library i going to define some attribute so the first one is the index and the second one is the function callback function to change the index callback and the third one is the page controller because i'm going to change the page and also last one should be our restaurant restaurant okay so i think we need pass one more attribute which is the restaurant okay after this page controller i'm going to pass this as well okay so let's implement this constructor please dot select and they start a callback page controller and also they stop restaurant and this should be just a text widget okay and to list the view okay let's save okay we're going to import library okay let's save i going to see our text shown here okay we can start from this point so first we're going to find um this category list so we're going to use this restaurant um clear category it should be small letter category restaurant menu key to list okay i for this container i going to get with a padding for horizontal uh symmetric or toronto set to 25 and then and for this trial i'm going to use a page view it should be a page view inside this page view going to pass the controller which is our page controller and also on this page change we're going to receive and that index i'm going to call this callback trigger this callback and pass the index as well and for it is children we have a category right category you can access to because this category actually is a list and so see it's a list so for it is manual we have a list of food all right so the key will be the string so it's it's like our category and we can access to because it is a map we can access to it is list of food so first we're using this category map going to return so next view separator okay in this uh separator i'm going to for it is icon builder sorry for its item builder and i actually receive a context index as well and i'm going to return a gesture detector so when i click are going to back to this detail page but we can leave it to our next video so here i just written a food item it should be a food item so the full item will receive a food okay let's create our food item so for this one we're going to receive a food item so we could pass our food and how we're going to access our food we're going to use this restaurant menu which is a map right we can use um category category which is our key you can use this selected in an index so this one is our food it's a little bit complex so this one we can access to our food okay so we're going to create stainless steel widget and cool food item all right so first i'm going to create a food i'm going to implement this food constructor using this food and import library okay for here as well so here just a text widget so we could access to the food we can just bring it his name okay so and we import library here okay so we finish this item builder and then we're going to for this separator it's very simple just using uh the size box right so size box set high to uh 50 and item count and we're going to use the restaurant menu and we can access to category selected this is our key and we could use this key to access to our a list of um food but it should be a nullable uh lens all right in this way we could access to our desktop foo so this one is iterator so we're going to convert to a list okay and we're going to remove these square bracket so let's save okay you see we have this food shown here right popular only have two and we don't have any food in these noodles okay so i think this part is a little bit complex because we're using a map a map inside thing is this inside a map so this part should be a very uh confused but i highly recommend you to watch it many times so you can know what i'm doing here okay so inside this list view i'm going to remove its padding using this set to zero okay now it's good so next i'm going to implement this output item okay let's back to a food item so in this and we're going to set high for the container and change it to 110 and also we give some border radius so we're using this box decoration change the color to white and also all the radiators going to use a border radius circular set to 20 and then for it is trial i'm going to consider to use a road widget right and this is our first row this one is our second row and the second row can be another column widget so first i'm going to change this to row of a child so first row will be our container and we have a padding i'm going to use this edge in says or and five is enough and set wet to [Music] uh 110 and height 110 as well and we have a tryout we're going to use image.ss because we have this food object we can use food image url right and also we have these feet going to use a box feet we can use feet high and big weight because we have the sand high and width right and we can save all right now you're able to see we have our uh food image shown here and then we're going to implement our second row so i'm going to how to say i use expanded project for this child and first is not a container because i'm going to change uh it is padding so i using add incest or only and top to 20 and that to 10 5 to 10 as well and for this trial just a column widget all right and inside this column widget we have another row this is our column widget and we have another row and for our column widget we're going to set this course alignment to start and fold this uh children we have another row and this row we have a max alignment should be a space between and here right so okay and we have a children attribute so first just a food name should be a text budget we have food named right and we can style it and also we have icon i can just use icons dot arrow uh forward ios and outlined it and get this size change to 50 okay let's save and we need to style the text so let's change using things text style using this text style change font size to 26 okay 16 sorry and change the phone way to vote and height to 1.5 okay let's save okay now it's much better so let's implement our second colon okay so after this one i'm going to give it a little bit space using this side box change height to five and if we mean our uh okay i think should be our text it's a food description description okay also need to style it using our text style okay for this going to first we need to check uh food is highlight so put this highlight the face highlight i'm going to use a primary color otherwise just uh grade color this opacity set to 0.8 also change height to 1.5 okay save okay i think this space should be up to okay okay now it's pretty good so for our last colon should be another row okay using this children first one is our text just for this dollar sign we also need to style it using a text style so we're going to change it his font size to 10 and also from weight to bolt okay dot bolt this is for our uh first text copy and for our second text should be a food price right food price and i think it should be much bigger okay let's save okay now it's better i think we finish this part and when i click you see it actually can change this page because we're using the patch view those uh manual can be changed and so next i'm going to implement this uh indicator so we're going to change as well so here i'm going to use a library which is called smooth page indicator and let's install it copy this dependence and find our pub cbc yaml file under this kubernetes icon hit save so we can import and find our home.file on the top we're going to import this small page indicator and then we can use it right so we're going to customize it okay so i'm going to find this one under this expanded so first i'm going to create another container i'll give it high sexy and also for this pending i'm going to use edge incest symmetric uh horizontal to 25 okay and for this child i'm going to use a small page indicator right so i'm going to customize it for it is controller i'm going to pass our page control and then we have this count right we're going to use uh restaurant menu bands and for this effect we're going to use a customized bow effect so for this customizable effect and i'm going to first implement this dot decoration for the dog decoration we could use uh dog decoration uh inside this stock region we have a wet 2 8 and height set to a as well then we change it its color so using colors dot three with opacity set to 0.5 then we change it is border radius to use folder releases dot circular change to a okay that's for the dot and we can change this active as well for the active i'm going to use a dark decoration as well but for this one i'm going to make him a little bigger for height and wet and also color change to background active uh so for this folder uh sorry the reason i change this to background color cause inside this this one it's not a white uh it's very similar like our background so i used our background color and then we have up all the readers and to set to 10 as well okay and we have the order this one we can set to our our primary color right we have color we're going to use our primary color and we have a padding setup and also wet settle too as well okay so let's save now you're able to see we have this one right when i change going to change as well okay and there's one more thing i think so i'm going to write it on top click so so i think it's inside of this one so we have this on dot click because currently i click this one it don't have any effect right so i'm going to implement this method we receive index going to use our page controller jump to page plus this index okay let's save now we're able to change the page okay pretty nice huh i think we finished this page this is the view yeah pretty good so i think the last one is this floating action button yeah that one will be very easy so let's find our scaffold it's here okay we could have this floating action button okay we're going to create another floating action button and this on press which is required but we left it empty for now and also the background color so going to change to our primary color and elevation uh probably too easy enough and also the child so we're going to use material icon it should be icons shopping back outlined okay and also for it is color i'm going to use a black color i also change it to size 30 okay let's say okay now it's pretty similar here okay i think that's all for this home page i hope you follow this tutorial and learn how to make these complex ui for this detail page i'm going to put it in our second part of the video so please subscribe to my channel sum up my content because it really took me a lot of time and effort to make those tutorials for the beginners okay thanks for watching i will see you in next video

Channel: Fullstack School

Views: 7,708

Keywords: flutter food delivery app, flutter ui, flutter tutorial, flutter ui design, flutter for beginners, flutter app, flutter ui tutorial, flutter tutorial for beginners, app development, flutter ui speed code, flutter tutorial 2021, flutter ui challenge, Flutter ui tutorial for beginners, Flutter app tutorial, flutter food app, flutter ordering app, flutter food delivery app ui, food delivery app flutter tutorial, online food delivery app flutter

Id: CBiXxOQSK5o

Length: 75min 52sec (4552 seconds)

Published: Wed Sep 22 2021

Reddit Comments

[u/Sirwan5]

Great! well done