Build a multi-vendor food delivery app with NO CODE using #flutterflow --- #1

welcome to no code 100 we are going to learn how to build a full delivery app without writing any code at all or knowing how to code using flutterflow.io so here's the first look at the app and how it works so when you load the app you take it to this page and after that few seconds you'll be taken over to this onboarding floor you can actually see different options and then you can click on get started on next and um what will happen here is that we'll be taking over to the access location or I think it's login or sign up page you can log in or choose to sign up and once you sign up you can take it to this page where you can access your location using Google's um play speaker it's something that you can do on flutter flow and once you access the location you take it to the home page okay now this is a live example of how the one page actually works once you load it up and we're actually connected to Firebase right now which is a real database that we're storing different restaurants and some dummy data all right so for example I can click on any category here maybe the broker category and I can check for restaurants around me and the food items that are categorized as Burgers right I can also save through other options here okay next is that you can also search you can search for a particular restaurant so you say Burgers whatever you want and then you get those options here okay so this is how it works now the next thing that we can also do is that we also have an others option here where we can see our past orders canceled orders and everything I just made another forming to go and I can't I didn't pay for it so that's why showing as canceled here so now for for to actually pay a restaurant you can pick any version of our choice maybe this one here and we already have an item in our cart we can click on the card and we have an item obviously what 16 000 we can increase it a bit and then we can click on please order now for some reason on flutter flows run mode to test while I'm testing the app I can there's the launch URL option is not working but once I click here it's supposed to take me to the payment option to pay so you can see it on your screen how it looks like maybe from a recording on my phone but yeah so this entire flow of the app now if there's any question you have you can ask below but let's go into the next phase of this video so the idea here is that I built this entire application using a figma design now I was on my Tick Tock one day and I saw a figma design and I really liked and I said okay I'm going to use this figma design to build out my application this is the figma design here now for me I feel it's a testament that flutter flow even with no code you can build your own custom designs you can you know you can build really beautiful designs with flutter flow based on whatever design or template that you have now figma basically just like flutter flow if I click on my flutter flow dashboard right let's see if I click on my flutter flow dashboard you notice that on the on the on the right side of the screen sorry that is a bit squished but I'm just I'm trying to show you something on the left right so it's a bit script but if I click on any element right now you don't see that on the right side of the screen I can see different options to be able to control that element right for example now if I click on 60 for this font size 16 it will be it will increase okay or that's not what we need right now okay so that's it now on figma if you go to figma you can also click on different elements and then you see the elements the properties by the right side of the screen now I did not Design This myself but normally when I want to build an application that and I want the application to really look good and feel good right I'll normally work with the professional UI designer and they will build that on figma and I'll now use figma as like my guide so I'll click on different elements like this and check how it looks or how they were able to do it and always as a guide to build my own application which I'm going to show you today don't worry you're going to be able to build amazing apps after this this video now from figma also I use figma as like a guide to help me tell me how the app was going to behave how the app was going to function right that's something that many people don't understand sometimes when you want to build an app you go blind even if you say you know everything you want you still don't know everything you want and I talked to people that want to build apps almost every single day so I know this thing some people tell me I want to build an app like this that's not just it you need to really plan it down either you're going to use user flows maybe you draw a diagram on a paper or you use figma for example now figma since I didn't build this on myself I'm just using it as in okay the user wants the the design that wants to be that when they click on this button they go to this page things like that so that's what I'm now using now from the figma design here I noticed that there were certain features that the I that I needed to build up for this application because I was in figment the figment designs as my as my guide basically and if you want to access certificate design I put the link down below right now this figment designs I got it from a free platform just in case maybe you have a question about that so I just checked for free um figma designs so basically you check freefigma templates.com you have access to a lot of beautiful figma templates you can use to practice your flutter flow you know app design skills right that's really really cool now let me go back to this template here now the template is really really cool I love the template now while looking at it there were some things I changed there are some things I didn't add for example when I look at this design I saw this ingredient section I didn't really think it was necessary no in my just my own thoughts basically you know if I'm doing it for somebody professionally I might really talk to the person I really understand what the person really wants but I don't think this was necessary so I removed it as you can see on the screen you see how my app works and looks okay so after looking at the entire design and studying it for some time I understood that the things I needed to add for just this simple you know MVP in build was a user registration and profile management system as you can see you can register and then you can also edit your profile here and things like that then you also need that in um a research a restaurant search and menu section right or you could search for your for your favorite foods and things like that which is here I also viewed that an ordering system so the way it works is that you can click on a restaurant or something or you can click on a food particular food item when you click on device and you can add to cart I think for the food section you can also add to cut maybe you want a particular food item maybe if you click from here right and then once you go to add to cart you go to the edit um this is the add to cart section when you've added to cut then you can place an order right and things like that but here's an example of where some things are not really cleaned in the design if you click on edit it's not clear where this edits for delivery address to go to either it goes over to maybe this there's a page down here where you have my addresses and things like that which is it it's cool but for me in the in a UI ux perspective I am explaining perspective there UI ux is how your app should look and feel to me is is how you how your users should feel when you interact your app and what you need to know is that certain things should be easy for your apps for your users should not make your users have to jump to so many pages when they can do it on one single page right and um in that note I did not since in this design there was no clear option as that when you click on edit something will happen so what I did let me show you something so in the app this is the cut section okay and in the cut section let's just do like a quick view preview you click on that I icon you can preview the app it's it's a quicker it's a quick way to to preview Your Design so you can see as you can see this is where I did mine so if you click on edit a simple and bottom sheet to open up with all the addresses showing and then you can now click on manage address or something I have to do that particular design myself and there's a lot of that in this application where I had to do some certain designs by myself just thinking that okay this doesn't make sense you know because it was not clear the design is not because when you're working with templates sometimes they they don't really cover all the bases just build something quick and they are gone but it's still good a good um Foundation to work with now when you place another the next thing you go is to this um profile the payment section but I didn't use this section I use the simple pay stack link now one thing you need to understand is that you can if you want to accept payments you have most times you have to connect to external providers like stripe PayPal or for in Nigeria for example pay stack right these are platforms that help you connect or add payments to your application you have to use what you call an API to add those um features to your app and it's simple to actually install it in feta flow we'll talk about that shortly now we have um and Latina with real-time order tracking now I'm not really going to talk about this real-time other tracking I was able to incorporate it you can see a video on the screen of it in action but my issue with it now is that after he was able to incorporate it I had an issue with my my expenses you know I think within a three day period only after only since like five or six times my expense on on Google went up to almost 200 so I don't recommend you do that that's just my own experience and how where did I get the feature to actually incorporate into my app I actually got it from flockaflow's blog flutaflow has a Blog yeah I don't know I think I have it here so let me see um I think they have it let me okay I actually have it around here um okay yeah actually has a Blog all right so let's see the blog here live tracking in Google using Maps so I just use the blog now when you when you first go on to the the the the the um blog it will tell you that oh you need background knowledge in um in in actual in flutter you need to know how to code basically for you to actually use this this um section but I I agree and I disagree also because you if you've been using fertility for some time you should be able to know how to maybe walk around it a bit now for me when I first use this this um this blog I did not code at all that was like around last year but this year I still decided to just use it into my app but this was the first time I really tested it out for some time to see how well it worked and it just ramped up my Google spend now I'll explain that shortly so that's why I won't recommend you use it but it's a feature I added to the app I just disabled it for a bit of time so I could really track what was happening but this is a this is a simple um training from flutter flow now to be the an app like uber basically and in flutter flow you have a feature to add custom code into your app so if you go to flutter flow here you can actually come over to this section here which is a custom code section and you can actually add custom code now every let me say one two three um three four five six seven now all these seven sections of customers custom functions right they are very simple it's just it's a way to actually maybe um calculate something or it's very simple now I'm gonna explain that in another video what custom functions all this is about this is a way a place where you can customize your app if you want to customize it right and maybe you want to accessing code and all this code here for custom function I didn't write it myself a iot for me I use chargerbt a lot like this now I recommend you also use it a lot when you're learning things like this so ask questions and and and so on and so forth but let me just you know bring down the screen a bit let me increase the screen a bit okay yeah so I recommend you use charge ubt a lot to ask you questions right that's all I will recommend so bear with me right now why I interrupt this video tell you about my flutter flow Training Academy if you want to build apps with no code you want to build amazing powerful apps iOS Android web where you want to learn within a month how to do all of these things check out my course I started flutter flow less than a year ago when I don't know anything about I say any code I didn't have any experience whatsoever I had to teach myself without much materials available and all my experiences so far I'm going to give it to you the same training process I use the same language I'm going to give it to you very easy because many times when you see some videos they are using some languages that you don't understand this visually if they are communicative developers but I am here to communicate to you the local developer and it's going to help you out a lot I'm going to provide one-on-one um distinct support to help you can ask me questions you can jump on a call with me it's amazing if you're interested check my link down below you see my WhatsApp number just message me that is that simple anyways I used AI to generate almost all my code and even in flutter flow codec section where you can click on it and then you can use open AI to generate your custom um custom function code you cannot and open your what custom functions are this is custom widgets and custom actions okay um now the second thing I will say here is that so yeah some things I was playing around I was playing around but this is the code here for what I did this is called the root view live and I got it from flutter flows guide and I just copied and pasted and now changed some name I changed some names but I kept some things relatively the same so I just copied and pasted that's what I did now if you are just a beginner you might not want to do this it is not necessary for me I'll say it's not necessary but I did it but I had to disable it because I saw a ramp up in my Google spend now you need to understand that flutter flow is it it um it builds flutter apps and flutter apps in general flutter as a language or as a framework is a platform built by Google it's an open source platform built by Coco right so flutter flow takes advantage of a lot of Google tools to make your apps faster better things like that and so that's something we can talk about in a different video but you need to understand that um for maps Max functionality to track maybe live tracking and those kind of functionality which I'll do in another video when I optimize this and when I make it work I will do an Uber clone video right but um those kind of features it's but provided by Google so flutterflowers I think they have some guides on how you can enable your Google API because it's an API you have to API is a way for you to connect to another external platform and you know talk to them or connect with it things like that so basically um there's a section in flutter flow settings section where you have Google Maps you can click on it if you click on it you will see you three options web mobile and iOS or you can actually connect those apis from there and there's a there's a guide on it so once you need to make sure you pay attention to is flutter flows guides let me exit some of these sections here guide and basically if you go to flutter flow documentation you can come and have access to this section here where you can click on search and you can say something like maps for example now you can click on it and study more about it it gives you different guides into most of flutter flows features which is amazing okay so you see how it works you can enable it on Google but you need to know that it's a paid feature so I don't know why you ramped up my Google ads my Google spend I will not turn you the live credit from Google it still took a lot of it and it was a dummy account I think what I I found it early enough to disable it okay so that's for that the next thing I had to work on was um delivery address management so in the design it was quite simple to see I just used this same element to build it out even if you see this preview you see the same thing but just as like a bottom sheet and the bottom sheet is something that you know like this basically this way bottom sheet is called okay now the next thing here is ongoing orders and basis and others history so I had another History Section that will show others that are ongoing maybe as delivery writer is coming or something you know you can see the ongoing orders here and then history you can look at others that have been completed or something in the past right okay so the next thing is social sharing which I'll talk on a bit not really much but I'll just talk about it a bit right so we're going to be building just 10 screens from our design here so we don't take too much time now there's about 40 screens here but one thing you quickly understand in design is that design is I will not say repetitive but it is harmonious there's always going to be Harmony in design and Harmony means that different things you can as you can see here they look like buttons colors you know it's it it's done that way specifically so that the app can be beautiful design doesn't have to be complicated and that's something you need to know you can do your own research about it but this is when you see that somebody is actually a good designer so what I'm saying I'm only doing 10 pages out of 40 pages that by the time I show you how I build some of these 10 pages I picked some of the most tricky pages that might be for you as a beginner so when I built some of these 10 pages you'll be able to use the same knowledge I use to build some of these pages to build other pages that are here too and just replicate the process right so we are going to go on to the onboarding page and on flutter flow you make sure that you sign in and create a filter flow account right so once you sign up and create a filter flow account you'll be directed to so I think I might log out here and I have to log out or you know go over to a new page so once you've reach down and you could create your filter account you'll be greeted with a dashboard like this not with this different projects right but you build a dashboard like this and that dashboard you can click on create new okay and then you can create a new project right so we're going to create a new project right let's see um we'll call this project just test best right so now we're going to call is just click on um create blank now I'm going to see all these steps on flutter flow you can skip all of them right now some of the things that you need to note that are very important for you to note is that you have something down here in a second to the last which is called the design system and it can get over when you start with it if you're starting just to learn and play around don't focus on this year but if you have something to build a a an app you want to launch to the market right now the first thing you need to do is you need to come and set your colors right so you notice that in this app here there are a lot of different kind of colors that you can see here you can see a lot of different colors now basically um maybe if you don't know how to set your colors flutter flow already gives you um access to okay this is your primary color secondly color ball I feel that while this is really really cool my own opinion is that it can be quite bulky or hard so you know work with this same system unless you're already a designer so for me it's always hard for me to work with this I always let my designers pick all the colors and tell me what to add right or one cool thing in Philadelphia is that number one you can import colors from coolers if you don't know what colors is is a platform that can allow you to check out different colors how they match together you can search it online you can also extract a color from an image which is really really cool so basically I can take a screenshot of this color right now right I can take a screenshot of the color and then float I can put in the photo flow so let me give an example so um I can just take a screenshot of this button for example and then I can take that um you know button so sorry I might have to just come here extract from image I can take that button so I think I'll look for screenshots okay it's running now so it's saved okay so as you can see I can I have all the colors showing here but when you go to extract and continue you will still need to tell the colors where to be and where to behave and even though you have all these um all these colors yeah you can still create your own custom add color and create your own custom colors and everything for both dark mode and light mode right that's that's really cool now for me I normally turn off sometime I turn off dark mode because I I in the in that design I didn't have both dark mode and light moon in that design now the next thing for me I feel that you can go to me which are GPT and ask it for like a color palette or something but for me I don't really want to go offline off track but this might sound weird but if I was going to be um setting my own color system I might try and go to bubble.io to actually set up a a cold color system now probably was my first no code platform I started with so for me it's just brings back a lot of memories and I remember that if you go to the style section they give you a better maybe like a better guide for like a no code developer or somebody who has doesn't have any design experience and basically if you go to element Styles I believe or style variables is something here so basically something like primary color so primary color color for primary buttons actions or hover treatment applicable elements primary contracts color of text for icons or primary button so basically they give you the different colors and so if you create a new color variable you can create your own description here and I think those descriptions are really really important for your flow of your design so like I said it's good it's better to be able to describe them I think that's something that butterflies should be able to add that's just my own I think I like I like bubble for that but other than that I you know I think you know it's just my own personal reference so you can go there you can use our friends to build your own and if you don't want to use for that flu so you can just be adding your own color and then you can name it you can use your own names for it based on what you have from from bubble and it can help you out in your a lot because sometimes this feels overwhelming for me the typography and icons you can actually come over here and you can set your different typographies and things like that and if this also feels overwhelming sometimes but it's necessary okay then you have what you call team widget this is one that's very powerful and team widget is a way for you to create now you need to understand that if you're a beginner which amp you know I want to just tell you how it works like how flutter flow Works in a very very busy Queen right I have much more like longer classes with students and you can check it out like I said before but basically everything you see on your screen is a widget it works based on flutter principles that even if you're writing code you'll still work with it but everything you see on your screen is a widget it's an individual component now think of yourself as a human being as a human being you have your hands you have your eyes you have your nose and all of these things come together to make a you to make you as beautiful as you are right same thing with apps when you look at an app you look at the entire beauty of the app how the app looks but you don't remember that that app when somebody was reading it they had to put a text here they had to put space here they had to put a button here and all of those things are individual widgets individual components that you have to put together to make your app beautiful now that is it everything in your application is a widget simple and short so now in flutter flow if you want to create a new widget you see that the different type of widget is there's icon button containers and when I first started I thought that oh all these widgets they might not be enough for me to actually build an amazing app but it's a lie you can build different kind of app styles with this widget and I'll show you in this video okay so in this team widget section you can come here and you can make up how your different widget Styles should look and behave and this is really cool because you can just use that when you create your design here anywhere you want to design that same or use the same feature that same um style you can just easily copy from this style you've created here so for example now let's just create some simple style so you can see how you can use it in your own design you can make your app building faster but firstly I'll click on a button let's create a button so we just say um primary button primary button okay create okay so now we have our button here so um what I'm going to do first is that I would click on this text now when you click on this section here you can tell your the widgets like which sections you want to ignore when you're copying the style of the video You're creating so you need to start by creating right now now I don't want the text to be copied so you can click and turn that off it's a new feature from printerfly the other things you can turn off to but the text is a major one okay so we can go to our figma Design This is the first time we're going to see how we can actually copy a design from figma so we'll start with the button first so you see this button I basically imported this design here let me delete it so see this button let's look at it now um this button the color is this is the color here so one thing I might do right now is that um I would go to the primary um I'll go to the primary color section these colors and then I'm going to add um this color as the primary color okay now next I'm going to do here as you can see it has already affected this color here which is really because you see how everything is interconnected right then I am going to remove this text I I forgot to save that now the next thing is the font size so let's see the font size let me click on this font so you can see you can click different elements and the font size is 14 bold right so click on we'll say something like um the font size should be 14 right and then it should be bold so click on both okay okay so next thing is that we need the width so the width should be we'll say infinite so the info which will be infinite so it should be quite big then the height or should be like 62 okay so 62. all right that's it now now that I've done that we can click on Save and the other things you can still edit there but this is just this is really cool now any single time you want to edit even if you use this button in 1000 areas in your app if you got someone I did this one here everywhere will change it is amazing freaking amazing guys now um let's see for text um I might not really need to do text so much but let's just start building out the app so come over here and we'll start with a blank page right so let's start with a blank page now you need to understand that everything is a widget like I said I'm going to give you a simple Preamble now we have to type a widgets we have layout elements majorly and base elements now layout elements are widgets that can hold remember you can replay this video if you don't understand but they can hold more than one element inside they can hold a lot of elements and they are basically their goal is to tell those elements how to behave and typically the elements that will be inside of layout elements are base elements here and there are other type of elements but majorly based elements now layout elements are elements they don't really have much visual appeal to them they're only there most times to give instruction to other widgets how to behave this way align this way things like that they tell them how to behave where to behave or where to be placed on the page do you understand that we could manually call them parents elements and the base elements you call them child elements right now uh for example if you can see the discharge element here none of them can hold another widget inside of them they are just there for like which some kind of visual iteration for example an image things like that right so now let me I remember I'm speeding up here layout elements are going to majorly use some things like column rows containers right columns are layout elements that can tell other elements inside of them how to be from top to bottom right you know from top to bottom so right now if we look at our app right now we see that python we have a bunch of elements here we have this element here we have two three then we have four and five we have like five elements are behaving from top to bottom right you know and we want to align them so basically what I would do here is that um to get this kind of feature where when you are scrolling you know you can see different elements here or different information on your screen you use what you call a page view now a page view is no surprise a parent widget right so let's check for it here um so a page view is not surprise the parent widget right so I'm going to work with that first now one thing you need to understand here is that every single video you see on your page in further flows guide right in their documentation you can actually search for it and you can study on it you can go to the search page and check for the name and then you can see more information about it right so the page view is also there so that's that's like a helpful tip for you but for now I'm just going to show you how I built it myself so just you can follow along so I'm going to put two other columns inside of the page this is my own process all right so cancel I'll put them inside of this the main parent column so now anytime you put on that widget of a widget you go to the widget train and you can see their structure right so this one is now I'll name it main so this one this this widget now this column has become the parent of these two columns here okay now if you look at our page here we see that this all these elements here we are not meant to scroll on the page you just meant to be static there so to build that kind of feature function I'm going to click on these two columns here and click on expansion it's going to make it expand like this as you can see expansion right then I'm going to click on this main column here and I'll click on this cross access element so as you can see when you click on any widget on the right side you can edit the components of the widget right you can tell those we get how to control the children widgets right so I'm telling you to expand so these are these two areas is where you know this entire area so you can control how do we get to behave so as you can see they have spread out all right now I'm going to tell this particular element up here to take up a space of maybe eight okay and then um this section here is going to take up a space of two basically so this as you can see I'm sure you can see some structure already coming up now the next thing I'm going to do here is that I'm going to put the page view inside of it inside of this first section here right now you can see that button already showing now next I'm going to do here is that I am going to make the button so you can see you can use this sliders to control the button so this is top and bottom right vertical that stop to from top to bottom then this section here you can control how it should be to the middle okay so I think it should be on a zero I can just type on zero here when to come to the middle so next thing is that we come to figma you can click on these buttons here and you can see the button is 10 okay so the dot width I'm sorry the dots which should be 10 okay expansion factor I think it should be a zero all right now um I think this is good so you can do any other thing you want to do I'm just trying to rush through this design here so uh let's see if I've gotten you right so so far so good now the next thing is that I'll delete this section here okay now we have two buttons that are meant to be here okay now for me what I would normally do is that I like putting rows right and rules are yellow parents widgets that can help you format or control widgets from left to right how they pay if I'm not right but sometimes I like using it to align individual widgets now you just see how I'm going to do it basically so I'll click on the row right and I'll tell the row to the the main axis alignment to bring everything to the middle now this main ax alignment is basically the main function of that property right so for roads is left to right as you can see for columns is if you click on a color so if I click on a column it's from top to bottom main axis right so click on this row I'm going to put a button inside of it okay right I click I put the button let me delete this now this button here so what I'm not going to do is I'm going to click on now I want you need to know about design is that spacing is very important right so if I click on option you can see that the spacing so option or alt if you're on Mac option is the key to click on if you are on on Windows is out and click on option on alt you see that you can see the the measurement of spacing and spacing is very important in any app you build so you can see the measurement of space in here is 24 from left to right right so I'll click on 24. so how these are this row here I'm going to go to padding padding is how you can add apply spacing to your designs go to click24 here click 24 here and Bam now I can click on this button here and I can go to Team style which is what we said before go to primary button and so okay um I'm having an issue with that so what I'll do let me go back to that team style widget just follow me then I'm going to edit it again you know it's not meant to be infinite having an issue with that so we just say um I'm trying to think right um I'm not seeing an option to expand it so let me let what I'm just going to do I'll show you something I'll explain shortly but I'll just click on expansion instead so I don't know I wasn't able to use that one I must see that option to create expansion or something like there which is an issue maybe butterflow will fix it later click on 62 we have a button so I remember that this font size was 14 and then this one was bold okay all right now next I'm going to do now is that I'm just going to click on um so expansion is to expand the widget right click on this row click M duplicates now what I'll do next is that I always like if I'm going to what I'm going to do now is that for this particular button if you notice this design here that this skip doesn't have any color right so I'll just give you a tip number one I'm just going to clear the color make it invisible all right number one the next I'm going to do here is that um when you make something invisible like that you see that some Shadow is showing always go to look for elevation right on that way and click on zero as you can see it has disappeared next thing I'm going to do here is that the text color is this is the color I can copy the color here then it's 16 and regular right so so color click this then paste the color here all right then I'm sorry not the color of the the color of the text sorry um go over here this is the text color let me just paste it here and we say 16. okay and then um Regular so regular will just be normal okay good then I'll click on skip because let's address right skip great so it's coming out nicely now one thing you need to know is that I think the the font is different the font is called send and that font I think is a Google font if I remember the Google font actually so you can actually I think let me see if you click on font family you can check for send or you can set it in your app design right you can set it in the design system look for typography and set it there so you can see it's coming out nicely so what I'll do is I'll go to that typography here uh and um set our primary fund family to send okay send right and then secondly from family I was ready to send to okay in the in the design send is a is the easy point that was used so um now what that we're done with that the next thing we're going to do here is that we will need to now create this design here so what I'll do is that I'm going to add a column to this section here okay and that column now I'm going to make that column bring everything to the middle all right now that's the main alignment right now so next thing I'm going to do here is that I'm going to add two rows all right let me just let me okay two rows okay now this row is going to come from the middle also and this other way is going to come from the middle also so this section here um if you see look at this design I'm not going to use any picture for this particular design I'm just going to use exactly what they did you know you for me I had to choose a particular picture to put there just from my own app as you can see on screen but for this design here I'm just going to click on a container drag the container to the screen all right and then let's click on this size is 240 that's the width height is 292. so just do that same thing here so this container here the width is going to be 240 had to be 292 okay right then you notice that this sections are not they are not sharp they are curved so that's why you call border videos over here you can see this is the corner videos it's called so it's 12 so you can click on this container you can click on but that video say I say 12. so you can study about all these widgets in the flutter flow guide right so just to make sure that it looks the same I'm just going to click here and copy the color from here okay paste the color over here and yeah are done now next I'm going to do is that this row is what will hold our text so I'm going to click here and measure so it's 63 that's the distance so I'm going to say padding should be 63. okay all right good now I want to do is I'm going to add the text inside here okay now that text we're going to measure it here so we have the size 24 an extra bold all right so we're going to click on this text and make sure the size is 24. and then um extra bold all right so I'll come over here and I will just copy this text here right and then I'll come over here and I'll paste the text over here all right great now the next thing is we will duplicate this section here command D or Ctrl D depending on your laptop or system right then we'll click here let's measure so options or alts can measure 18 all right so we change this pattern to 18. now this text here we are going to have to measure so you see that the text let me see so let's see so the text here is 16 right and regular Okay so we are going to go for a font size of 16 all right and then um Regular will be normal all right then we can paste what we copied okay I don't know what that is so let's face well we just copied from here oh no what just happened so come over here and then let's paste the right thing let me delete all of that nonsense then for the size of the text I'm going to make the alignment come to the middle then voila we're done all right so now that we're done with this particular section you know we can just copy the same section across other areas too it's very simple so all we just need to do is that for the other um the page always comes with default of two other pages so I'm just going to delete the other pictures that yeah you can make as many page views as you want you know you can look at the manual for more information but for now I'm going to copy this column that I designed here and then I'll go to the other you know page views this one here and I'm just going to paste the same thing you know so guys right now you can see you can actually screw sorry it's not going to be working that well here and let me just do a preview and you should see how the scrolling animation would look okay um in your app you can scroll okay now what we want is that I think when you click on um this button you see next next next then last one the last page goes to get started right as we saw now I noticed that let me tell you one way in which you can actually create that feature okay now that feature the way you can create it is that let me click on this now you can study for you to learn more about this all right now this is not a class an in-depth class like that I'm just telling you how I did it right okay but what you need to study is something called conditional um conditional logic okay he's on flutter flows documentation now I also have it in my course I talk I teach about this in depth like really in-depth for a local developable you need to understand conditional logically what you need to understand is this feature here called if then else now if then else the conditional logic that says that if this is true or false things like that then it gives a particular value for your app to work with maybe text or something right that's basically the function here and it's it's it's more Computing than that but that's a simple way to explain it right so basically what we want here is that we want a value the value we want is that if um we are on the first page of this section or on the first three pages it's showing next if on the last page this is the last final page it should get started now the way we could normally theoretically do this with flutter flow is that when you come to the text section which is showing button here all you do is that you click on anywhere you see these options here this Orange um logos or sorry icons it means that you can manipulate that value from a Dynamic Property what does that mean it means that that value can be manipulated based on you know for example now just like we want to manipulate the text here we want to be to be that whenever and it can be different for different users phones if the user is a number two they are next if the device number three is next here is it number one is next but if they are number four that means it can change based on you know a dynamic it's based on it can change it can be dynamic you know do you understand if if we just write next alone it means that that's a static value it can never change or it wants to be that you can change based on different true or false statements right between the true or false statement is is it true that on the fourth fourth page if it is true get go to get started so what we need to do here is that to want to make it work we can click on you can see text we can manipulate text here the button text you can click there and you see you open your variables tree or your I call it like a a your variables map you can there's a lot of things you can do here and like I said I have more training on this photographs a lot of training on this in case you don't understand what's happening but a simple one we need is called widget State and we just State many times is to look at the particular widget on our page what is their what is happening with them right now is there any change to that widget we can manipulate things on our page based on that function right now the widget we're looking for is the page view and on widgets they have page view comment in this and this index means the number of page is it on number one or number two number three on number four now remember that and when it comes to counting in in coding right we start counting most times from zero not number one so basically we have three pages here what we have here is zero one zero zero one and then two so it's not one two three you understand so if that's not the way you are going to do it here so what we what we'll do here we will just click on page view index we need to go to you can see that um you can see that conditional value if then else we click on it right so you can see that we have spaces here so if this is true then write this value or else write this value so it's very simple so theoretically what we can do here is that we can say something like um single condition right so if what is the truth so if widget States page view current index all right so confirm if it is equal to we can now say something like specific so you can say specific value of one variable that means a dynamic value if it is equal to let's say two two is the last page if it's equal to two confirm then what we'll say is we'll say get expected it is equal to one we say sorry it is if it's else else means any other thing that means if it's not equal to 2 that means it's equal to something else maybe one two or the other ones right so we just say and then we just say next okay now this would work but the issue is that when I tested out this option it wasn't loading in real time it was it wasn't working the way I wanted to be it wasn't working as you just as you scroll you can test it out this function you can you can you can easily just click on this feature here and say download app you can test out what I just did now you see that it's not going to work the way you want it to work it's not going to be real time so the way I fixed it was that let me just show you where I did it now some of this and that advanced thing you learn is called State Management and is in in flutter flow you can create sorry in flutter flow you can create what you call local States and it's a play it's a way to store information in for a temporary time in the device memory it cannot it can also be more than it can be it can be long be long lasting so you must not be temporary but it's a way to store information for a short period of time and it can allow you to perform different actions and I use it a lot you're going to say a lot when you learn about it so you can study about it in the flutter flow guide like normal you understand you can also get classes or check online for more information but right now what we want to start in for a temporary time so we have two different type of of local state you have components you have page State you have app States now for depending on the kind of apps of of States you want to work with it the only difference is that different parts of your app I don't have access to that information if you are working with Upstate which is you save here App State you can save information at all your entire app can have access to if you're working with page statement which I'm building now you just click on click on just click out or click on you you scroll up click on the page itself in the widget tree and then you can see different options you can work with on the page now in the last one is called State Management where you can create local page dates that name is only this particular page can have access to the information so what I want to save here is that you might say something like um something text button text this is why I did my own button text okay so I'm going to remove this B from here all right button text is going to be a string okay the default value just put a dash there nothing necessary or you can just put maybe next next year and farm now the next idea was that on page load let's click on actions you can create an action on page load when without anybody having access to it like I said if you're a beginner you don't understand some things you know you can ask questions too please then you can create add an action you can create a new action in photo flow you can see something like periodic action so periodic action is an action that that happens in the background right at certain intervals so what we can do here is that you know um every one second you can check for something everyone's second every you can make it higher or for me I made it for me I think I made it every one second right I mean every one second so you can click on ADD action or not even action basically I think deletes um let me what I'll do now is that I'm going to go to that option I wrote here okay and I'm going to click on this condition I just wrote copy copy variable so I'm going to go to my um to the tree okay so to my action tree and um let me add that condition okay so so you can add conditional action so actions that only happen if something is true or false okay sorry um paste confirm so if the page view is equal to two all right what will happen is that we can now update that local page of that so you you will see what I'm talking about right now so we can update updates page dates all right now update page State what does that mean that page State I've just created button text we can update it that it will show if it is equal to two if it is true set value to say get started okay but if it is um copy action if it is false or item is not equal to two times equals something else you can say something like next all right like I said you can always ask questions you can message me down below in case you need more help on understanding but it is what I did and I was able to have that real-time function you can test it out it works next thing I need to do is I'll just click on this button section here and um I'm going to you know like delete all of these things here and I can say that this text here it should um it should show it should come from the page date but in text awesome now so anytime I like button Tech is manipulated to show here in real time so this skip value here we have to make sure that it doesn't show and flutter Plus for every widget you have something called conditional visibility or you can make a widget disappear based on true or false statements right so when I click on conditional visibility right now and I click on this on set section I can set the conditional visibility and how does it work so I can say that single condition all right now I can say something like if the page States button text all right is equal to next specific value is equal to next you can say you can manipulate this new app so if it's equal to next that's when it should show only when it's equal to negative so you see if it's not equal to next it won't show voila we're done so the next page we're going to build is going to be the login or sign up page so because this particular design is quite is different this is is different right something might not might not be used to so let's see let me show how I actually did it myself right so what I'm going to do here is I'm just going to create a new and I'm only going to do one because when you do that one you can just copy for the other Pages too and just replicate so um I'm going to click on add a new page okay that page is going to be um login let me delete this so now the way I did I built it out was that I started with I deleted there's there was I made the page blank I started with what you call it stack which is which is the parent widget that can allow you to put to stack two elements on top of each other and you can study more about the inverter flow documentation right but um first thing I did was I clicked I dragged a con a con a container and I drag it to the very top okay or or um I think it's even better to do this or drag a column inside and that column will make it spread out inside of that stack then I'm going to drag a container all right and that container I'm going to drag it down to so I'll click on height so let me remove this thing in case it's distracting you I'll click on percentage and I'll make the height 50 that way I build it all right now the next thing I did was that if you check this design here even though it looks a bit weird if you don't know how to do this kind of design what you do is that um I think the page had the color I'm right how they color so this is the color here I clicked on the page itself I got the color this is the color here you can copy the color I can go to flutter flow and I can paste the color in the few color section here so I can paste the color over here use color one done now the next thing I want to do here is that I want to add um another container right that container will come from you know from maybe from this section here or something right but basically that container is going to be inside of this let me see um I'm coming let me just delete let me use this calling first I'll click on this column I'll add a container there all right but I can I should be able to drag it because it's not working so what I'll do here let me use it from this stack don't mind me sorry container drag this container down all right so you see because I'm using the stack I can drag widgets anywhere I want to right I can drag it down okay so you can use this horizontal placement so this one is to the left and right this one I want is the vertical one sorry top to bottom good gotten into the down to this down section now so the next thing I want to do here is that I'm going to make the width 100 right you know you can do it however you want then the height let's make the height let's see um let's make it like 70 of the page okay so make it like 70 of the page 70 percent of the page I think this should be all right okay um it might maybe maybe 75 okay so this is okay now this container here if you notice there's a curve so click on this container here you see that there's a call of the call I can't even see the call but I think I I just found my own I think I made the you go to bother with yours I think I made the cup like maybe 18 or something maybe 25 sorry I think this is better all right now this container here I can add a you see because it's a parent to the any parent who had any widget that you see this ad this ad sign this plus sign it means the appearance we get they can accept some widgets inside that no now there are different type of pairing we get some of them can accept only one some can accept more than one plenty so there are different types you just need to make assessments or you do your own study right for now for this column for this container here you can accept only one so I can add a column here because I see that all the elements are inside here are from top to bottom login and then this one here okay so all I need to do here is that I'll click on this login and I'll measure from here to here is 118 okay so I'll click here and um I'm going to add two or one row first okay and I'm going to click from here and I think it's 118. all right good and I'll click on the row and make it come from the middle then I'm going to add a text inside of it then I'll click here and the text is 30 bold all right so I'll click on um 30 font has to be 30. and then the font rate is going to be bold all right next I'm going to do here is that the the color is white so I'm just going to copy the color code all right and I'm going to paste it in the text color section okay so now that we're done with that we can just write login here log sorry login all right now I can also duplicate and add another text but for now I'm going to add it because you can you from here you can easily know what to do I want you to do it yourself too you can tap on plus add another row or something and do whatever you need to do there so focus on this other container here so next thing I'm going to do here is that um we need some some sections like this right so this is going to be a column obviously because we can see things from top to bottom right so just to design it quickly I'm going to add a a column here all right then that column we're going to add some things inside okay so first I'm going to add a row right now the reason why I'm adding rows is that I can see that you know I want to align things like this there's the way I want to align it so it depends on your own design you might not want to put away you can just put maybe text and then the the the impulse text separately now this widgets for allowing somewhere user to type something inside is called the text input and I'll show you shortly but first let's look at this space so I'll click on optional alt you see that the space 24 so what I will do here is that this entire column here I'm going to put a padding of 24 24 all right now um next I'm going to do here is that I'm going to measure the distance from here to here which is 24 also okay so I'm going to put on the column a pattern of 24. and bottom pattern of 24 too okay now this column here we see that element inside is just from top to bottom so we still need a a column inside so I'm going to add a column inside of it all right add a column now that column is going to have all the elements that we need right oh wait am I just what am I doing instead is that now one cool thing about photoflex that you can you can right click or double click on any element and then you can change it sometimes not all of them but you can change like I want to change this one to you to a column first and I'll now have two rows inside or whatever I need okay so I'm just going to add maybe two rows all right this is just the way I like doing my own you can do your own however you like I like structuring it this way so once I do that I can put a text inside this one all right then I can put a um a text input so if you scroll down to what you call form Elements which are other kind of elements I didn't talk about but they are still like these elements so they still but it has all the only thing about them is that you can take in information with them right so uh what I'll just do here is that this form element here this text field I'm going to remove the padding from the left and the right side all right now the next thing here is that you notice that if there's a distance from this text input here to the text up here which is eight pixels right so I'm going to click on this row here and the distance I'm going to put up here is going to be Eights all right now we can click on this text here and click here and then see the the the measurements is 13 and regular all right so I just click here and it's 13. and regular which is normal already I think the color is just different so we just copy the color code black text and we'll come over the floater flow and then we will paste the color all right fair enough so you can write um email here all right now for this text field to make it exactly what we saw in that design what I'm going to do first that I'm going to remove um this underline I'm seeing here and I'm going to remove it I'm going to say none I don't want any kind of property around it then I'm going to remove this auto focus I don't really like the autofocus and you can search you can hover over this thing to see what the autofocus is all about or you can play around with your design and look at what what it does or how it changes your app right now the thing I'm going to do right now is let's see I'm going to click on field all right and I'll choose a field color so field means that the color of the text input will be the entire color will be filled up with the color right so I'll copy this color from here all right and I'm going to paste it into this field color section okay so I'll paste it here 's color boom so I don't know I don't think this is the right color though it doesn't look like it's I think this is the right color here so made a mistake um command C or Ctrl C come over to the field color section and I will paste that color here use color done now you can use better videos to now achieve like to achieve maybe like um like a curves around the edges like we've been doing so far so I think border videos is around here it should be around here I think the way I fixed it was that I wrapped so if you double tap on this thing you can see an option here you know you can wrap a widget with maybe something like a um so what I'll do here is that you can I think you can wrap a widget with a container right so a container will help me give styling to it I use containers a lot for a lot of different kind of styling options right so I'll click Arab is in the container and then what I'll do is that I can now put a border video so first thing I'm going to do is I'm going to clip go to the container and click clip content clip content is a way to make any element inside of a container Bend to the width of the container like however the container shape it is that element inside will follow that container shape it's a way to deal with some stubborn elements right so once I do that now what I can do that this border videos I can maybe put something like maybe eight you know just playing around and you can see there's like some kind of curve already you can you can still customize it however you like right now you can change the label text and other things like that as much as you want but for now I'm just going to duplicate and you can duplicate and get whatever kind of design you want or right so maybe for now you can in your own space you can follow the entire spacing requirement you can click here you know and then use auto option to measure the space right in your own time and you can also use a room to put two texts here and change the color and then put your butt in here and then put your text here and things like that right but now we'll come into something that's very very interesting in flutter flow and that's the ability to be able to add um you know uh your own elements custom maybe picture elements or custom assets right per se so what I'll do to show you an example of how that works I'm going to export from figma that's why I like figma a lot so you can still use different kind of designs I'm going to export from figma this Facebook logo design why so what to do that I'll click on export here click on preview and right now I can see that this Facebook logo thing is here right so I'm not saying right now in this video I'm not saying this text or like I want so I'm going to go to this right side so the left side and I'll click on group so I can wrap everything I need so you can see everything is here click on export and I've exported the design here okay so what I'll now do is simple I'm just going to come to flutter flow this is the asset section media media assets and I can click on upload media and I can upload what I just downloaded yes I'll go to downloads and I can upload what I just downloaded here which is this section here open so once it's loading it should when it's done now you check it out so but you get that I wanted this to upload is this design that we have here is notice that there's a background design here and that's something I want to work with for my own app so to get it into my app right let's see let's try and you know highlight it BG assets so let's see it here so this is the design here so we'll export it to okay so now now that I've exported it what I'm going to do is that now this um this icon here means that the asset has not been used in your project so it's when you use it it's not going to show so I'm just going to click upload to and upload that um asset right and once I upload it it's going to be uploaded here but good now once you need to notice that all your assets you have a unique name if there is not going to work all of them should have a unique name is very very important please I didn't know that when I first started okay so now the cool thing about assets here is that once you're done with them you can do this so I can go to my original tree and I always use containers to render or show Assets in my in my app I can click on contain and I can go to and background image all right and I can go to assets right and then I can choose the asset I always uploaded which is this one here as you can see design has come out all right next thing I can also do is that you know I can also add something like uh maybe like a row you know if I wanted to add or create the same design that we have here you understand if I wanted to create this in design I have here I'll put a row then I can put like maybe a container inside I'm actually show you how we can do design yourself all right put the container inside I will click on this row here and I will bring everything to the middle all right and then I'll click on this container and I can make it a circle you understand then I can also go back to this design here click on this circle and then the size of the circle is 62 all right so I'll go here to diameter and I'll click on 62 as the sizing all right then maybe for just for this example I'm showing you I just put 23 here all right click on this container and I will go to background image right and I'll go to assets or okay then I will click on this asset I just uploaded here now you can change how the asset should fit the image in case it doesn't fit the way you expect to fit you can always play around with all these options here all right but um let's just see something I will it's also good to clear the color most times always clear the color but I didn't clear the color for this one because it wasn't necessary it was part of the design all right good so this is an example of what you can how you can do that this design here so on your own you can play around with it and get this the same design all right now the next page I would like to explore with you let me you know Zoom I think here so next which I would like to explore with you is going to be the location access page all right now um for the location access let's see I'm coming um this is the page here now it's the same thing as what we designed sorry keep on kicking my camera Now location access is the same thing as what we designed here so I'm just going to copy what we designed here right but I want to show you one particular thing on what I did in my own design right so what I'll do here is that I'm just going to create a new page called location access right so okay Sean access sorry all right great so what I'm going to do here is that I used and this is a trick you can use in your apps from time to time you can use a a page view in some of your pages right and I won't talk too much about it maybe you can ask questions in your comment section but it's a trick you can use now um for this location access page we have two two sections here first when you click on access location you go to a second page where you um okay oh oh it's not the same it's not even here I I think I invented that page myself so if you check the screen right now you see how mine works when you click on it you now see your location is now shown the location will show and then your current location that was picked will now show right and the reason why I did it like that was that there's one particular widget you can use to access people's location in photography it's called a place speaker right so I will suggest that you go to flutter flows guide and type Place picker please Pika all right great so if you click on play speaker widgets you'll see all the information about it and basically if you click on it you can allow it to access and allow somebody to click and type their location and you know using Google functionality you can access their location the name of the location everything about the location right so it's really really cool and for an app like this I want to track people's you know where they are and things like that so you might want to use it all right so before I work with that let me just copy all these elements first I'll control C or command C go back to the login section I'm going to sorry location access section I'm going to remove this section here and paste this all right so I'm going to delete some of this um you know options then in this page view I will move I'll say allow swipe scrolling will be no that's why I did my own right and there's a reason for that just trust me you'll see shortly then I'll delete that and then for this page view I'm going to on click show indicator all right probably make this one to be a circle or something just so you can understand what's happening and then I will add a um a row basically an ad like a so let me make everything come to the middle all right and then I'm going to add a place speaker inside sorry I think it's here Place speaker I should be here or something please pick up all right so here's an example it comes like this automatically you can control the name of it and things like that right but the issue with play speaker is that once you click on select location and you add a add a location to it it does not it does not um do any other thing because right now yes you can test that yourself and see what I'm talking about right now I want you to be that when they click on access location and they access the location they go to the next page which is the home page but it doesn't do anything it just collects the information doesn't do any other thing and that's an issue and if you click on the button right now and you go to to action you can't add any action everything is blank so it's only there to just collect information about the location so the what what I did was that I did the same thing as that page I went to local state I I said something like okay lat Lang right and if you study more information about this place speaker you know that last line is basically longitude that Latitude it's how you can get information about a particular location right the Google uses latitude and longitude to access precise coordinates of a location right so I'll use that line and then in the locals page that I can choose lat Lang as my as my option for the information I want to work with right and I'll see confirm right so basically what I did was that now you have to make sure that everything in your app is configured properly with Google and everything you know you have to set everything up further flow give you all the instructions here but basically once you set everything up it will start working right so what what I did basically was that once you add this specifically to your page right um what I'm going to do what I did was that I set up a periodic action all right now one thing let me just give you a simple flutter flow tip right many things with flutter flow are um client side now what does client-side meaning is that for example only when a user clicks on a button or something will an action happen and as you start building you'll notice that there's some actions you want to to happen in your app now you don't want the user to have to click a button you want it to happen automatically and that's just your own experience as you as you start growing and that's why sometimes you might go to the top of the page and you add an action there so that things can happen without the user having to click a button and do certain things right to make your app much more easier and to work with as a user right now as you grow there are things that you might learn about like Cloud functions that's something more advanced we'll talk about later but yeah so this just while we're doing this so when I go to add action here I'll delete this one here right I I mistakenly initialized I'm going to now add a periodic action add action which are the periodic action keep on doing that okay don't mind me so periodic action all right everyone second all we'll do is that add the conditional action all right and then I will say condition is going to be single condition so our same condition is basically when you're checking two different values together right true or false right it comes true or false if you need more information I have a class on this I have courses you can message me down below right okay so what we're going to search is will be page State lat Lang and we're going to search for weather it is set so if it is set okay what will happen here is that if it is set now what I did in my own app was that I didn't have three pages I only had two so I'll delete the third one let me put my myself from the screen so delete so the second one so this one thing about me having to to think about some designs by myself all right so I'm going to delete all of this so in my own design if you saw it on the screen add it add a text that showed that part the location where they were so I'm just going to duplicate right now this text I can make it 20 all right this circle I can make it you know a circle too so this container what I did was I added a Google Maps widget rights Maps I type maps you can drag it to your page all right I don't know why it's not okay sorry I can't do that yeah so you see Google Maps here now you see that Google Maps is still even though it's the same size as the as the container it's still having some sharp edges and that's why I told you about that clip content if I go to clip content now so first you Google my widget to stay within the pounds as you can see now what I did then I clicked on Google Map and I said that the lat long information should come from that place speaker value so if you say page state or you can see that paste it lat long value okay so so we're going to get information about where the user is from the lat Lang that they picked so I'll show you how we're going to do that then this this text here I can also click on the text also all right and I can say that oh the text should come from so let's go to widget state to come from you know Place speaker value all right it should come from the address okay very simple so sorry you might have to put a default view field but I'll just do a dash there done so address is set so this section here will just be like a button Maybe right so the button will just be something like you know you can make it whatever size you want right for me I'll just put something like maybe you know um 300 pixels all right so something like confirm address okay now what will happen here is that now when so let me show you what's going to happen here now um in this other page here you can select the location we do we can't do any other thing with this with this button here so when they select location something will pop up here you can add their location so what's going to happen here is that I'm thinking um I'm trying to remember sorry so what I did was that in the in the this section here so when latlang is set what will happen here is that if it is true that has been set all right to add an action okay that action will be to update all right but um it will be to update sorry paged it all right so we're going to update page take because the the the widget I'm going to use to set their location will be that place speaker right so we'll Now update the last Lang of that um you know the local state that we set and we'll update it with the page state latlang so update sorry we'll update it we just see me I don't mind me uh play speaker value Place Fields last long this is only the option I show in conference intuitive enough to do that all right so next thing we now do is that when I say okay if it's also true after I've updated it what they selected right what an action where they would Now navigate so basically let me say something um page view control page view all right so page view okay so it's automatically go to the next um view now we've disabled swipe scrolling so they can't swipe to the next page only when they have set these things now go to that that page automatically to automatically swipe there and then they can now do any other action so they can now click on you know um this button here and says confirm address and then they can take take them to the home page now there's some other actions I added here I won't talk too much about them here like I said if I if you're a student of mine you can have access full access to the full delivery templates that I built and you can use it to to learn study that entire template a bit you can clone it copy it use it use it in your own app do whatever you need to do if you're a student so that's it so you can actually meet down below if you want access to the template all right great so that's what I did now I'm going to you can I can say that some errors here and it's because I've not configured Google Maps remember I think that you need to go and study the documentation from flutter flow so you can know more information about that so I'm going to delete Google Maps from this project here and then the play speaker because they are not configured Google Maps but that's how I did that design now the next um page I need to show you guys that I've used is the home page and there's a few elements there that I want to show you guys um so so let's work on the home page a bit so if you see this home page right now come over here now in this home page here you have a couple of things that we have on our page and a lot of them were from um for example this section here was from like a an exported file I use it to now render on a container like I've shown you before so you can easily build some of these things right now let's just let me just show you how I did it so basically for me what I'm going to do right now is that I'm going to access my other project and I'll show you some things I don't take too much time already at almost like an hour already in this simple tutorial let me just show you how I did on the other on the other section here all right um so I'm going to come over to this and I think home page all right so as you can see this is I I even I even discarded a lot of those options I removed I removed the cards okay I had to make a lot of options on my own I removed the cards because I checked some food delivery apps and based on the way I built it I built that there is no Central cards it is every single restaurant you that has a cat embedded and I checked some food delivery apps and that's the way it was so you can only select products from Cut to cut right and there's a reason for that there's a huge reason for that which I'm gonna explain later in I know like in the at the end of the video right but I remove the cut and remove this section here it didn't make sense there was no area that this section was directing us to I think this section should only be there if we're having like maybe like an option that will now slide into there was nothing like that so it was it didn't make sense to me so I just removed it from my own design all right the reason I needed was this hair allowed good afternoon and then this search section and stuff like that all right so let's work with that now um this section here if you look at my widget tree basically this is a row all right and um I put all of them inside of all the mindset of it of a container also of a column that has like a padding of 50 and the rest all right then we have a row inside and that row has a column and that column has two different texts now this particular text for me to have you know text here and then an icon here I put it inside of a row two so you guys you can see you can see how I'm developing the app right so that's how I built everything there all right so now this section here it's a which way you call a rich text and a rich text widget is a widget from flutter flow that allows you to achieve two different designs for text in the same text if you look at my which text here you see that if I click on this first element here you see that it is 16 normal then the second element here is um is so let's say is 16 and both so you see two different um you know designs for that text to achieve what we saw there so which text we get how do you access it you just click here and then you go to um Rich text that's the way you do it right now um all categories do the same thing I think I'm just showing you I don't want to have to show you I've already shown you how I've done some of these things you can easily just drag a row and then you can put a text there and everything and play around with it okay so next thing is these sections yeah this um sections right because I chose this particular one as what I'm building but first I had to work with a text this search section right so how did I build out this set section now the same thing same Principle as this login page like as you can see there's a lot of repeated things as I'm not going to have to go back again so I'm just going to go back here and I'll click on this section and copy it all right then I'm going to go back to um the home page now just paste it here you know command V and the cool thing about this I think on this homepage is meant to be white so I'm going to change the entire color to white all right so change it to White now um the column is if you see there's a space space in 24 everywhere so not everywhere do if you notice this particular section doesn't have a space if we look at the design it doesn't have a space and it can it can extend out of the screen so I only made this patient for this top section here right that's why in my own design if you see I have something called top section so like I said if you are a student you can have access to this my designer you need to build your own an ex you know for experience but first section and I'll put the pad in there and stuff right so for me for this particular design just to fulfill your righteousness I'm just going to go to something called um save as templates right save as template so not not even templates basically I think it's easy templates I think it's template yeah um food app home and this is a way for it to maybe copy a particular design from another app on filter free and then paste on that app it's a really really cool way to do all those all those things so let me just delete what I was doing here let me delete all of this and um delete these two what I'm going to do is I'm going to click here and I'm going to click on this section here all right click there I'm waiting for it to load you can have a lot of templates okay so all the templates are loaded so let's search for our food uh we have to name them properly hold you know let's see yeah so this is it here I can just copy and paste everything I just did there right sorry it's sorry it's not it's not magical I'm supposed to drag and drop it don't mind me so yeah so everything else is now here so you can you can see that's how it works now for this section here what I did was that I have a container all right inside a container and now I styled it according to the design I saw here remember you can see all the elements on the screen and another styling it I now put a row inside and that row I now put an icon you know here that icon has some padding to give space then I now put like a text so you this is this section here the reason why I didn't really do much let me delete this action here because it's giving us an error I didn't really do much because let me tell you what I mean I didn't do much normally for a search a place you're meant to search you're meant to put like a text input here because like like we did in the in the login page so they can type in whatever they're searching for but in this design here this is normally type in my decision for it when they click on it it takes them over to this search page here right so it's it's different all right so that's what I did now I think the major thing I'm going to just focus on showing you how I designed it was or is this section here I'll just design this section for other things you can easily just work with um maybe the figma design and what I've taught you already but first um you can also even design this one too it's very very simple it's just like a container you put a border videos of 39 to make it curved you now look at this the height is the width is one 103 pixels height is 60 pixels right you put a a row inside and then you cannot measure their distance inside it's this all is you know 21 or so just work with that so I'll just only design this one here this one I'm going to design so let's design it quickly now in first thing we notice here is that from top to bottom we have a section here we have a text we have a text then we have this section here right so what we'll do now is that so we get that design we need a column from top to to arrange this from top to bottom right next thing is that I'm going to use several rows inside to organize every other thing that's that's where I like building my own right so first things first we notice that this um these sections they also have padding two all right 24 24 and everything so I'll click on this column you can always name them remember you can double click on it and name it main we can call it whatever you want to call it right so you can recognize it so what are all these that that column there I'm going to put a pattern of 24 right 24 and 24 so sorry 24. all right now the row inside I'm going to add that container so this is what I like doing you can do the same way too I recommend you do the same way I put an expansion inside all right and this expansion only work if the container was in a row even though it's going to give you errors all right now once I do that I can go to this section here and I can copy the color that was here or something or you can just put your own maybe your own picture an asset or something right then you can come here over here click on fill color you can paste the color that you have here all right okay and then you can now set the height so the height here is 137 you know we don't need to set the width so height is one three seven one three seven okay then we have some I think the Border videos better videos is going to be it's not even showing here I think you just put out 20 or something but I will just be 20 for the curves all right you know then once you are done with that I'm going to click on this Rule and I'm going to duplicate it control do your command d right then next thing is that we notice that there's a space from here to here remember it says spacing is part of design click on optional alt it is the spacing come over here I'll delete this container here and then click on this row and put the spacing of eight all right then I'll click on the row itself and then I'll add a text inside all right now this text is size 20 and regular I'm not going to copy and paste the same thing that is there just you can do it yourself but size 20 and then regular is normal all right then I'm going to duplicate the same text command D or Ctrl D all right and we have this section called Burger you know Rings wings and and so on and so forth so which is five right so so the spacing is five no instead of eight just copy the same spacing all right then I think the size of the text is 14 regular and then it's the color so I'm just going to copy the color alone 14 regular so this is supposed to be 14. and regular is normal so I'll click on text color and I'll paste the color inside of there right so yeah that's it now now that we're done with that we have a final section which is still from left to right so now because in this our design here you see from left to right we have elements there so we need to use a raw obviously okay so what we'll do here is that we just command d right and once you need to take note of is that all of these elements that I got I got them as I exported them as designs I exported them the same thing I showed you before so you can export all of them and then do whatever you need to do there all right so that same same way I did that same design but make sure that all of them have a different name all right so just put so you can put all of them inside the individual rules you know the way I'll do it is that I would let me delete this you just put you can put all of them instead of a individual rows because each of them have their own definition from left to right so this one like that so each of them can have you know their own space out of the rules right you can put padding inside of each row all right so sorry you can see item one item two item three whatever you want to do right so you can just use the same way to you know we create the same design that you have in the link below right awesome you can already see it's already coming out nicely now the next page I want to talk about a bit is the full details page okay now this footage let me delete everything that we have here the full details page I had to I think I had to design it myself a bit all right I didn't really have I didn't focus on what I saw on this design here I took this design here I chose this design now the way I was able to fix up this design was you know simple when I first I removed everything that was here I started with the the page itself is a widget and it's also a parent widget you can only add one element inside I started with a stack right I put a column inside right and then I also put you know a row all right then at that column I spread it out with cos x alignment then that rule well what you can easily do is that you can just click so you can see you can break things down in your head and make a design out of it so I can click on this section here click on option dot alt and it's 50 from the top so just put a pattern of 50 all right and then we can make the so you can click on the on on this row and you can make it spread out space between now you can put two elements inside and do whatever design you want so what I'll do here just for this case is I'm just going to put two containers right now that container is I'm going to make it a circle all right and I'm going to make it obvious like an obvious color basically I'll just make it like that orange so you can see what is going on now if you come to this design here you see that you can use what you call an icon to render this image so let me click on this section here it's 45 that's the size of this thing so 45 number one number two um you know let me see 24 that's the status that's the space from left to right so I'll click on this row put a padding of 24 24 okay and I'll just duplicate you can see space between what it does it gives them space between obviously right so that is really really cool next thing I'm going to do or focus on is that um they have they both have icons inside so to get that same feature or design all you can do is that you can click on the on the containers number one I like doing it that I'll put a a column first but you can just easily just click on an icon choose an icon like that straight up no no voila but I like I like um choosing a column first I can organize the icon inside of it right so I can click on the column and say come down to the middle so I can control the icon that's just me that's how I like doing my own so I can go to Icon now and then I can choose you can choose whatever I kind of shape of the icon you want so you click on the icon all right to come back to this section and then you can choose the icon that you want or you need all right good the next thing that you need to focus on here is that this this um this there's a column this column in the background first thing I want to I did was that I added a container inside of it so you can see the containers in the background now this container if you click here you see that there's a height which is 407 obviously all right so I think I I did a lot of customization for my own my own was different from their design right but this is how you can follow their own design so we have their height down um I'll copy their color just for now you can choose your own your own picture there all right you know put your own color here okay done now um next thing I'm going to do here is that they'll it'll be like some curves underneath all right so what we'll do is that there's a border radius all right so it's 13. so I just put the whatever videos are steady okay done now the next thing we need to notice that these border videos the top is not meant to be there like when I'm going to have better videos for the top so just delete that unlock and delete you know like that's so that's it so come about our design here and you can just do the same thing when you put text side by side you put then you put under you know border here or another um you know container here so the way you do it basically is that you can click on this stack and then you can choose an a container basically you can drag that container down all right you can get that container down and then you can edit the size of the container you can put a row inside and control and create your own design from there so that's the way you do it so like I said if you want access to my own design that I did you can become a student as a student you have access to all my designs or any app I ever build and showcase on this channel all right now um let's see let's let's I think so we're done with this feature here you even this one to just copy the color and everything and that's what figma can do for you so next thing is edit cards all right um so I did cut edit card edit cards so I think this edit card 2 is quite simple is you follow the same same you follow the same um format right follow the same format now I'm always going to show you a simple range of how I was able to build it now if you come to my own section here you come back to edit card now basically this is an app bar right and another bar basically is like the top section of an app right you can do it you might know it's an app by your own but I use an upper and in that but I put a row that row I put you know two rows I think one rule and any text here and this row has a space between on then I have like I think this section here I think it's a I copied the color so this color is actually white but it's off white it's like you it's like it's not it's not full white you know they made it invisible basically like let me show you so if I click on my widget tree and I click on this section here okay we can look at the container you can see that it's actually white but toned down like I think it's 13 or something you can scroll you can take the color down to make it close to Invisible right so that's how I got that design there and this text here and you know then you can put I think I put a row here put a container here and that this row had a space has a space between also to space out all the elements and that's how I actually did it I just so it's quite simple basically simple if you have any questions any specific question about any kind of feature in the app that you are not able to actually clone to then tell me in the in the comment section down below so okay guys that's it for today I enjoyed the video today and I enjoyed making it so make sure you leave comments down below you can message me on Whatsapp if you need any extra help or you want to join my training academy I would love to have you there now I can't wait to make the next video about the Packy end of this food delivery up and many other things so also leave suggestions in the comments below other videos I should make about no code and photo flow and yeah I would love to do that stay tuned

Channel: Benjamin No Code

Views: 12,277

Keywords:

Id: VnI76yyjiiY

Length: 98min 54sec (5934 seconds)

Published: Thu Jun 01 2023