Flutter Payment App | App Development Tutorial for Beginners for iOS and Android from Scratch

[Music] [Music] assalamualaikum everyone hope you are doing good so in this tutorial we'll see how to build a flatter payment app now if you downloaded the starter code from the link below you'll have a project like this and let me take you around the project structure so over here in the images folder uh you will have several images so this would be our background image like this one over here and then we'll have this curve image this one like over here the curve over here and then the lines like this one over here as well as the payment background so there's another background image that would be using later and this one and as well as we have some brand images over here as you can see all right okay so these are the images that would be using in our app and as well as you will have this lib folder and inside loop folder you'll have this main file okay and inside lib folder you have this component folder and within component folder you will have these colors so these are the colors that would be using throughout our app so that's why we need them okay so anyway so these are the basic setup in our app so what i'll do i'll go ahead and close this images we'll use them later all right okay so now next i want to declare another folder over here okay so create a directory and we'll call it pages and within this uh folder we'll write our main app files okay or the main pages of our app so now within it i'll declare another uh file dirt file i'll call it my home page dot dart okay like that that's it okay uh now over here i'll create a stateful class and we'll call my home page okay and we need to import some of the default libraries so let's go ahead and import them and we should be good to go all right okay so now let's take a look at uh this project this image um so let's take a look at this first home page image and it's it's very important that we understand and then it would be much easier for us to do this layout because it's pretty complex over here now over here as you can see that so these are the few images over here as we saw earlier so this is one image this is the curve image and this one is the button image okay or the line image and as well as text so as you can see from this background image or head section that this should be uh positioned we we should use a position widget and that's why we should wrap them around stack widget if you want to use a position widget then you need to have stack widget why we are using position or and stack widget that's because here our text and images they're overlapping onto each other so using normal column layout or lay row layout we can't achieve this so we must use the stack and position widget together okay and at the same time we also want this button to be fixed at the bottom okay so that's why we need stack and position widget and within it we'll have also column widget over here as you can see and within column uh this column would be scrollable actually if we have more items so we'd be able to scroll them okay now in this head section uh definitely head section and because of this one will have position stack widget but at the same time our head section is pretty complex so our head section will have a fixed height uh so that we can position everything at the certain bottom over here so we'll have fixed height like say around 300 and then within this stack we can position at the bottom this one our curve and our button over here okay so without further ado let's get started so now here this is our container in main main file but we want to import this one okay so let's go ahead and do it so here i'll import uh my home page okay like this one okay and just hit this reload button over here and let's see our app but definitely also black because there is nothing there okay all right now uh instead of container over here we want to refer return a scaffold so let's go ahead and do it and the scaffold will have body because we are doing scaffold because we want to have a bar things like that so scaffold works much better so now within it we'll have a container okay and once again if you save it you'll see this default screen white now we want to set up our background color for our app so within scaffold we can set the background color and now the color will be coming from our colors file this one so every time in our app we use certain color we'll be using from this one except the white white color okay so and we'll refer this file from other file using app color dot the color name okay so that's what it would be doing app color dot background color okay so this is the one we want to uh use okay and make sure that this color has been imported okay otherwise you will get error if you if it doesn't get imported you can import it manually okay all right so now let's go ahead and save it okay so our background color change is a little bit gray not that white okay yeah now as we saw earlier that we want to use stack widget okay so that's what it would be doing all right now stack widget we want to use inside this container so that we will have better control on the height of this screen okay because otherwise it will take the complete height of this screen anyway so if if you have stack widget most probably it's better if you wrap it around a container okay all right so our container will have a child over here and over here within it we'll call stack and stack takes definitely children okay so let's go ahead and do it and at the same time over here actually we want to declare a variable and we'll call it h for height so we'll do we'll get the height of our screen okay media query dot off context dot size dot height okay so i'll copy paste this and we'll get the width so with this would be able to get the default height and width of our screen okay and later then later on we can use them all right okay now for now we'll define containers height as h the one is coming from here all right let's make sure save it run it of course no changes and over here you might have an error uh let's see over here this one with okay perfect error is gone all right now the first thing we want to declare our head section over here okay and show the items and pictures and for that one actually we will first declare a function and within function we'll write our actual code okay so we'll call the code function name head section okay all right uh this would get more organized and it's easy to navigate through the project so if you need to change or find a certain file okay now over here we'll declare our body of this function okay yeah and now here within here will return a container okay all right and container should have a size why because this section once again will have its own stack widget okay this one will have its own stack widget so that we will have better control actually we can just do it one but for better control in case you want to change the height in future so if you have your own another stack widget so it will give you better control on this okay anyway so that's why we need to have this stack over here so do stack and and will return children but once again we learned that stack could should have for better control you should define its own height okay and that's why we are doing it so now here we'll be doing uh for head section over here for this one we'll have 310 okay and let's go ahead and define a color let's see what happens for debugging say red all right now let's go ahead and save it and see okay so this is the section we want and over here we'll put our images things like that okay and so now we can go ahead and just remove this we don't need this one all right now within it we'll have our main background okay so we'll call a function over here so main background main uh let's say main background okay all right now let's go ahead and define it over here the body main background okay and once again because this main background should return something as a widget because we want to display an image okay so we need to use return and now here because we are using stack widget so we must return over here position because stack widget only received a positioned widget or animated position widget things like that okay so over here would return position widget okay and uh let's finish it with semicolon all right now over here so our child actual child should come should uh contain our image things like that okay now let's go ahead and first declare a container and within container we'll define our image okay all right so now let's do decoration we'll do box decoration we are doing decoration and box decoration because we can access to image and image properties and it would be able to show the image all right okay so now we'll do image so let's do decoration image okay and image one more time now here we are going to asset image from our local file so that's why we are doing asset image not network image and this is actually for displaying image and this one tells you whether it is network image or local image because we are using local image so that's why we are going to use asset image not network image anyway now here we need to declare our uh first the image path and where it is it is in image folder over here i guess it's images all right and the image we want to refer is this one background image so we do background dot png all right and let's see now we need to come to our file over here pub spec and here we need to make a little bit of change this one so let's remove this uh [Music] pound sign i guess let's call it pound and over here yeah so just to remove everything else just keep images so this path over here should be same as this one all right yeah so now let's go ahead and restart from the beginning okay now it's showing up already okay all right perfect uh so let's come back to our file over here but actually this looks a bit odd right so we need to fix this hide and things like that okay now decoration image has a property which is called fit would do box fit dot would use height so based on height we want to cover it okay all right now it looks better now why i was using this 300 over here once again a container now it should make more sense so let's go ahead and do it 200. it becomes much smaller okay so because of this container you have extra container within this stack okay so you have much control on it that how you want to define your image and image size things like that okay yeah of course you could do even bigger okay but we don't need that okay so based on here this uh pretty much the screen based on this screen okay all right uh anyway so now you can play around with this one you can also do cover okay so it it works pretty much same but i would like to go with the height i said i'd like to go with the cover let's see the contain so it doesn't work that well so cover pretty much fills it everything is covered right okay so now because of this one we have much better control do remember now we have this stack widget and the size of the stack widget is 300 okay you can understand it like this so it's a 300 on the bottom is this one okay so we'll have much better uh control for displaying other images over here okay well now next we want to show our curve image okay let's click it that's asking for some dependencies if it has it will download them automatically okay all right now we want to show this curve image so let's go ahead and declare a function over here curve image curve image container okay now we are done with this now here we'll declare another uh we'll define this one curve image curve image container okay and once again because it's within stack widget so it should return position so we do return position so let's go ahead and first define a container and we should have this uh semicolon over here and within container once again we want to copy this section actually this decoration and copy paste so come over here all right and well what we could do we can just change this one over here so our image name is curve it's in the folder so let's go ahead and save it and see it okay now it's it's way too big right yeah now of course we can define its width and height and things like that over here okay let's go ahead and declare the height over here so we can get the height from here media query dot off context dot size dot height now we can use very small height over here okay now this one right okay so now this height looks okay but anyway it went to the top we can fix that easily because we are using position widget so how do you fix it so let's assign some properties to it the left zero say right zero and the bottom so bottom for now say 10 or let's do zero let's see the result okay it's pretty much over here okay now we can also as you can see there is a slightly white section over here we can take care of that one so instead of zero we can say do minus two okay now it's gone okay now well it looks much better after this minus two now what do you want to do uh let's collapse this first and collapse this one so next we want to show this uh button over here okay so let's go ahead and do it uh once again we'll first declare a function over here we'll call it say button container okay and we're going to declare it over here let's do it button container and once again it should return position with it okay so let's return position widget over here okay and within position widget will you return container okay and we're returning container because we want to have this background color as well as this bit of shadow over here as you can see so we have a bit of shadow so that's why container would help us so all the box decoration over here decoration box decoration and what else we could do we could do box shadow over here all right so box shadow and let's define its blur radius so 15 and offset so we don't want offset for access to one bottom at the bottom so we do offset zero because we don't want x x section and we also we just want y section but at the bottom so that's a one if you do minus one it'll it'll do at the top okay so do one and over here we'll also define our opposite color i mean shadow color we do color this one okay now let's go ahead and save it and see the result well it is there but of course our image is not there why because within decoration we also need to supply our image so let's go ahead and do it so we'll do here uh image decoration image and image as an image and next we'll supply our image path over here so images and the image file name is line i do remember that onlines.png let's make sure it's the correct one lines yes okay now let's go ahead and run it no it's way too big and of course it's not there right okay so how do you do that so of course we can the first thing we could do here uh uh contain its size okay well it's too big so we do height 60 and width 60 all right okay now it went at the top right but we do have our position widget okay so within it because of this one we'll have greater control so here we could put it down at the bottom right so let's do bottom bottom zero now it came came down to this place and we want to set it to right so let's do it right and i'll do it 58 so it's right over there right okay well with the 58 it looks much better now but now there's the sudden change over here of the background color because of this one this is some shadow as we saw earlier okay so how can we change this one now to change this definitely what we could do we could move this up at the top so let's say 10 it went to up but now it's too close over there right so we can also move that curved image a bit up so let's find our curved image card image is there okay so we can also move it up 10 at the same time but now it's creates this uh this background image that shows up right so now what we could do we could also move our background image at the top okay all right so we we can uh move it to the higher position the bottom section okay so you could do bottom 10 but now it's gone that's because we are changing some of the properties but now you need at least two properties here as well as some width and height over there so we do left zero and say now here height we could do 300 do remember the actual height of our head section is 310 so other 10 actually would be keeping from our shadow okay so that's why we just want 300 over here and we can also apply with over here we do media query dot size dot width okay now with this it looks much better now okay now let's come to the bottom again uh our [Music] button container which is uh this one maybe we could move it up a little more again now let's see you see that's totally has gone okay perfect so now we'll see how to create this section over here okay this scrollable list over here all right uh so let's collapse our code and uh let's be organized okay so this is our head section head section has these three functions okay and head section is being called from our container over here and over here we want to create another function which is called i'll call it say list bills so these are the bills list over here and uh let's go ahead and define this function okay yeah less bills okay well once again because uh this is inside our stack object so we need to return a position widget so do position okay all right and over here we'll return a container okay okay let's put semicolon okay great now over here right let's go ahead and run it and see you'll see nothing changes okay now i want to give this container a certain color for debugging purpose so do colors dot red so that we understand what's going on and now the position now position uh itself should be somewhere here so do remember so this container over here this is 310 so you want to put right below there so you want to do top 320 okay i'll save it see the result of course nothing is there because our container doesn't have width and height so for example height 100 for now and with say 300 so that's over here right there okay yeah uh well no let's take a look at this design okay so we want this whole thing to be say for example um so we want this each of them each of them should have a certain height say 100 or 130 and then we also want to have on the left side a little bit margin okay yeah that's what we want to do so now so let's do height 130 and width we don't want width like this we want a more dynamic width okay so we do media query dot of context and whatever the with uh whatever the screen width is we'll get that one using this one and then we do say for example minus 20 okay now let's go ahead and say it uh it looks much better right now okay yeah perfect uh so the next thing we could do we can assign it a bit of uh decoration right so we do box decoration and we do say border radius but now as you can see from the design we only have radius over there right on the uh right top and right bottom okay so that's what we need to do so we do border radius dot only now we'll have control uh for uh top right side okay so we do top right and now over here we do border we do radius it is a circular so we do say 30. now let's save it and see of course because we are doing decoration so we also need to assign the color for it okay so we need to ascend the color inside this so do color say colors dot red for now we just do it red okay perfect and bottom right we do the same radius circular 30 okay perfect but once again this is not the color that we want we want actually a white color so do colors dot white okay yes and as you can see from the design we also have a bit of shadow over here so we want to apply shadow so let's go ahead and do it so within box decoration we'll apply shadow box shadow and it's a list we can actually put a couple of shadows if you want so box shadow and we do color color ox ffd8 db e0 i guess this is the color we want and also do offset uh well we i think we just want the shadow both up and down and now we do blur radius say 20. now let's go ahead and see yeah it's looking much better but what if we also apply spread radius let's go ahead and do it spread radius say 10 so it's more deep now with the spread radius okay so well it's already looking much better now okay now we need to understand this concept over here because this is a pretty complex layout as you can see so first before we before we continue coding let's understand the concept over here well definitely i can see from this image that this is a row section okay so within row this is my first section and this is the second section so we'll have a row and here we'll have empty space so in our row we'll have three sections this one and this one and in the row itself for first section we'll have column layout okay this would be a column layout and then within column actually at the top will once again will have row okay this is this is a row and this is the first section this is the second section and for the second section once again we'll have this column layout okay now the same goes over here so this is a third section of our big row and within it we'll have column layout so this is the first child and or we could do a bit different way actually so this would be a bit annoying so what do we do this is a complete column and over here we'll have white section and this is another row within the big row so this could be another row and we'll have a bit of spatting spacing okay so that's what we want to do perfect so we are getting there so now let's collapse our code and be organized okay so this is our container now what do we have okay so within container we want to declare a child so let's go ahead and do it and child should be another container okay why we are doing container because we can apply a bit of over here at the top top margin or padding and over here the same one over here so left margin and top margin so that's why we need container all right so let's go ahead and do it we do margin const edge only said top 10 and left 10 or maybe left 18 okay now within container so we already have this margin and the top margin now we want to declare a child over here and char should be our row as i said early so this is a big row right okay so let's go ahead and declare children okay now for children once again this is a column okay so we'll do column over here and column takes children we know it and within column this is a row okay all right so let's go ahead and declare a row okay and within the row so we have this uh first image okay now this image as you can see it is a bit of background uh sorry i mean the color as well as this border okay so definitely what you have to do you have to go with the container okay yeah container sorry before we put container we need to declare our children over here so we'll have a container okay now we in the past we have a lot of containers so what we could do over here we can just copy this container it will make our life easy so just put it there okay yeah well now the height is too much right so we need to change this height uh instead of doing say 300 because it's pretty small so we do 60 and the width is also 60 okay and what are we going to do now let's go ahead and save it and see so it's there right there okay so this is the this image of course that's not what we want we want an image of our brand so brand1.png this should be in your image folder so let's save it yes it's right there okay yeah okay now we also want to apply border to it okay so let's do border okay and border we want to apply in all sides okay and border give it with three and color colors.gray yeah now it's too sharp right so we want to have a bit of radius so we do border radius so so border radius dot circular so 5 pixel or maybe 10 would look much better okay so we are happy with this okay so within this big row uh well as i said early so this is also a row right so we are done with this this section so it's already looking better and this is the container showing this one over here so now we want to do this one right okay for this one this is a column layout okay so within the row this is the column layout so this is a row so now let's go ahead and declare a column over here would do children okay well now over here this is very interesting we have this text okay so what do we do with the first text and text name is can jan power okay and let's apply style to it we do text style okay and let's see what we could do here say font size say 6 to 16 and color so app color dot uh [Music] main color okay so this is our apps main color like this color this and this now let's go ahead and see it okay it's there but i think we need a bit of uh space over here so do size box and say with 10 okay perfect all right and i think we also want it a bold so we do font weight so the font weight okay now it's looking much better now we can just copy this one and for now we'll put it over here and this section and we'll call it say id 9 8 things like that and for this one we'll use dot id color like that okay so it does look much better now we can also apply a bit of spacing over here to the size box okay and we're good with 10 okay uh but now we want to put them at the beginning so over here so this is a column layout column layout so this is the cross axis so we want to start from the beginning of the cross axis alignment so start from the beginning okay so it is looking better now let's see so this is already there these two sections and now here we want to put this one okay this section over here so let's go ahead and write this thing well for this one as you see we have this dot over here but the dot should changed according with this line so the longer the line is that the dot should be the same length right as well as if it's smaller so the dot the total length of the dot should be smaller as well the next we'll say how to do this section okay to deal with this thing we need to declare a special class and the class would be in a folder so let's go ahead and declare a folder first we'll call it widget so we'll deal with different kind of widgets or customized widgets we'll save over here now over here we'll declare a file we'll call it text size dot dart okay now here we'll create a stateless object and we'll call it as sized text okay well here there's one important concept that you need to understand the same personal library so the concept is here this is definitely a column layout so what do we want to do that this pla this text could be dynamic it could be too short or too long okay we don't know so first we need to find out the size of the text and based on that size we'll draw these dots okay so as longer text will have longer dots smaller text smaller dots okay but anyway so this should be in a column layout okay so now let's go ahead and declare a column first here okay and the first one is definitely a text so we do text but now do remember this text would be supplied from over here okay so you want to receive them as a parameter okay so we'll declare them at the top we do final string text and we also have a text color so the color this one so different this text could be actually black green blue whatever you want it doesn't matter okay so you do color color okay now these two parameters uh they need to be supplied so they're required we do it here text and this dot color now it will ask you to add this required okay so let's go ahead and add this keyword required now this the value that's supplied from here would be saved in this variable text so we can use it over here okay okay well we have this error sorry i made a mistake so we need to wrap it around the list children list now you put it there the error should be gone and now here we can apply style over here so for this one we can pretty much copy the same style so let's go ahead and put it there okay and for color we need to [Music] apply or actually we can use this color from there okay so this is the color be supplied so you can use that color and font weight actually we could we could keep the same all right so that's about the style itself and we can also do other settings over here say for example maximum lines so we just want one line over here okay and some other settings like soft wrap will do false and overflow text overflow text overflow dot clip so we don't want text to overflow that text should be wrapped or cut things like that okay so now we're done with this so what we could do we could go ahead and over here so there was a column widget so now from here uh we can call it actually call this uh file and the related class okay so the class is sized text this one okay and we can apply supply some parameters over here so as you can see the text and the color so what you could do we could do text say [Music] or to pay on 24th may 18 and color say app color dot green okay so that's what we have so now let's go ahead and run it and see the result uh while it went over there the reason is okay i understand so we made a mistake it's not within the row as you can see it should be in the column layout section okay now let's so it should be right below it okay let's see here we are also missing a comma okay now let's save it yes it's right there but definitely here what you could do we can now here one thing we could do we can put create a space r because this is a column layout so we can put uh a property over here so main access alignment main access alignment main access alignment dot say space between let's see so it posed at the edge right so now over here we can create a bit of sized box okay and we do okay five is good all right okay now okay with this we are good but how about this dot over here okay how about this dot so now we are supplying this text over here before we go ahead and draw the text actually we can grab the text size over here which is size text width okay now here we'll declare a function and the function return type should be size and function would return the variable the value it returns will save in a variable called text size and let's define the declare the function over here okay now this is the function and this function should take our text the one that is being supplied and as well as let's see what else um i think that's it so we can just go ahead with this and now so let's go ahead and actually define the body of this function so we'll define it over here okay so the function it should return it's returned as size so return type is size and the function name is text size i think yes text size and the function takes a parameter which is a string type the actual text we'd be using okay and of course we need to have a return type and for now we're not returning anything okay all right now how to get the text with to get a text with we need to use a special class which is called text painter okay so we do text painter sorry okay now text painter itself take some properties the first one is a text okay well this text and this text should be the same i mean whatever you apply but before you give it to the text property it needs some changes and information to be supplied to flatter using another class which is called text span now we also need to pass this text to text spam class so we do text text okay at the same time we also need to supply style okay the style we want our text should have so for this one we can just copy paste this one over here and let's put it there and i think it's okay so this is the text span so text painter takes text span which itself takes texts itself and the style the style is important because style as you see has a font size if this font size is bigger definitely the text width is bigger right so that's why it's very important all right now text painter takes some of the properties so the other one is the maximum lines in our case we just want one line things like that and also text direction text direction uh direction [Music] ltr from left to right okay yeah now to be able to actually get this um text width we need to access another method of this text painter class to access that directly we can use two dots and then the method is called layout and within layout we need to mention mean height and mean width and max width okay so the mean width is zero minimum could be zero and max so it could be anything or any kind of length so would do infinity okay now within this from here it will return an object that object will have size parameter okay or the size property all right now we need to save it so we need to save it in a variable so we'll declare a variable of type text painter okay so the variable name is text painter okay so it returns an object that object is saved over here and this object will have size property so now here we can actually return text painter dot size okay like that so it's a lot of work here right or actually maybe not it just it takes the text you need to pass the text to text painter and text painter itself pass it to text span class which takes the style style is very important to know the width the actual width okay and then we also need another method which is called layout from this one okay we're accessing it using two dots all right so now once we call it from here the text size should have the size or in our case i would say the width okay yeah so the size is being returned so now it should have this one should have width and height both of them okay so we can access them later anyway so now it has this size thing so we can go ahead and use it so earlier we declared this class as a column because we want to show the text and the dots right there okay so we need a column property so now here as you see so these are many dots so the dots are in a row okay so now here we need a row widget okay perfect okay so within row we'll have a for loop and within for loop we'll run like this into i equal uh into i equals zero and i is less than less than what this text size okay text size dot width by five and i plus plus i'll explain why this is by five okay and after that we can return a container over here container okay and container width should be five and the color should be the color that is being passed remember we have a color over here okay and height say 2. now you can ask what the heck is this 5 over here you understand that the container so each of the dots over here they're a container and the length is five right okay and also has a height of two so what we are doing here do remember this text size has the width so it means say for example the width is returned say for example which is written 100 okay or maybe 50. okay so now so this is total 50 say for example okay now we once we divide it by five so what do we get we get ten right divided by five equal ten so that means that we'll have 10 of these dots so that's why we have this five over here okay and of course the container itself has with a five okay yeah so that's why we are dividing it whatever the width is returned because we want to each of this uh container should have uh with a five okay yeah hopefully it makes sense all right so now we can do we can go ahead and run it let's see so but this is not what we expected well actually it's it's really drawing it there but because the color is always the same color okay so we can keep track of this index over here so we could do i is even if i is even then we use this color otherwise we use a different container and different color okay if it's old then instead of using this color we could do colors.white of course you need to import the library now let's save it perfect okay now it's looking much better so this is the green color then we have this white container over here then the green one okay all right now let's uh create a bit of distance over here so the size sorry size box i would do height five okay so it's already looking much better now okay perfect well next we'll see how to design this section okay well uh to do this section first we need to come to our file over here and within this file okay don't get lost so find your column the first column over here so well uh within the row so this was our first column now we want this section but do remember so this there are two sections here so this should be a row within the row this is the first column and this is the second section okay so this is a row section okay so here we are done with this column so this is the column actually we did now over here we'll define another row okay so let's go ahead and do it we do row okay and then we do children all right okay so within children we have this is as a column so we do column okay and while so we're good now but within the column so this is the first container okay this has to be a container because it is border and things like that okay and background color so definitely we need to define a container so you do container container give it width say 80 and say height say 30. and okay once again i think i forgot the list i'm sorry jordan list okay perfect now it will have decoration box decoration and as you see it will have borders so we'll apply border to it border radius dot circular so we'll do border of 30 okay and of course it is color so you do have color dot let's see select background so this is the color coming from our color file okay and now let's go ahead save it yeah it's there okay all right and well now this is done so we want to show the text in it so the text could be our child okay so we do text and we'll call it select and over here we'll apply style okay do text style and say font size say 16 and what else font color right so we'll have color so we do have color dot select color this one let's go ahead save it and see the result okay it is there but not in the middle so i want to wrap it in the middle so we'll wrap it around center widget so no it is wrapped around center widget okay now let's save it and see the result okay perfect so it's already looking like this but now it's at the end right okay so what can we do with this one [Music] so here this is a row and this row is within this big row right this is the big row so here there is a property we can use so for row this is the main axis alignment so you can use the property main axis alignment main access alignment dot space between so i believe so this should push it to the edge right and that's what it is doing don't worry it looks a bit weird but we'll take care of that one soon okay okay so now we have this column over here okay within column we have this our first container this is the container and uh [Music] now we need to draw this two sections okay yeah but they're just text okay so we could do it now to do the text actually we can just copy paste from here directly and let's collapse it now come over here okay and we can put it all right and over here this time definitely we have uh this dollar sign say for example one two four eight dot zero zero okay like that okay and this time we want to say font size to be 18 and we also want a font weight okay and font weight dot 9 w900 so that's that's what we want to use okay and let's save it and see the result okay it is there we're getting there okay and now for this one we want to change the color we want to do main color okay perfect okay so we have another text down there so let's go ahead and just copy paste all right now here would say due in three days and we don't want so much bold over here maybe we just want 700 and let's save it okay and font size say we do 14 okay perfect okay now as you see over here so there's a space here so we can apply this space so let's see if we can do a white spacing over here to do container now let's save it and see the result so while it's already looking much better though all right but now it goes to the bottom at the end right well now it came down so much to the bottom so we can here use a size box sized box sorry so what do you do we do height say for example 10 uh yeah it's looking better okay so this section is okay uh but of course we don't want the color we don't want the main color we can also change the color we can use uh let's see what color we have what else we have here um i think we can go ahead with id color okay so we do id color yeah perfect okay so now everything is working fine we are in this row okay and this is the other row and the column okay so once again so this this column is this one and this row is this one right but of course as we have row so within the row this is the first column now if you see the design we also need to put this one okay so we can put it right there to do that we can declare a container okay and the container definitely as you understand within height so do with five and say height for now do 35 and we do decoration and box decoration once again all right and border radius okay so we want only the left top and left bottom should have border radius okay so that's why we do motor radius dot only okay so the left top left here radius that's circular say 30 and once again left which is bottom radius that's circular 30 okay and we also need to assign the color so we do color app color dot half oval which is this one over here this is the half oval color so let's go ahead and save it yes perfect so we are already seeing it today okay now well it's too close so i think it's still okay but now here we need to apply a bit of spacing so remember this is in it row so here we could do size twice sorry size box so we could do width all right say five yes now it's looking much better okay well the other thing is that about this we all want to align over here from the beginning within this column so find our columns this is the column sorry this is this is the column okay now within this column we could do over here so this is the cross axis for column to do cross access alignment cross access alignment dot start okay now it's it's looking better okay perfect so that means uh over here this column is this one and this row is this one okay perfect well now we can repeat this uh widget over here to draw more of them okay well now take a look over here so this is the actual widget that's showing us uh this one okay so now we can put this one in a column a few times so let's do column and the children okay all right within list bills and i'll copy it over here and run it and make sure that yes it's running well and now i'll copy them one more time now let's see hmm this is showing up i'll copy it to one more time and it's showing up as well but now we have this bit of uh spacing over here that we can take care now if you come over here here we can apply a margin okay so you could do cons edge insides top say 20. now i'll copy paste this one for each of them and over here the same okay perfect so this is more like the design that we have seen already right so everything is working as expected and we can also verify that this text based on the text line and width this dot changes for example if we come down to this one over here the last container and if we open up the column and over here say we change or to pay next week all right okay so let's run it yes it changed you see the width and text both changes at the same time at the dot and we can also use a color over here okay so we can use a different color so we could do colors.gray and it changes automatically so it means pretty much things are working as we expected but well now here i have hard-coded this container three times but that's not what we want okay we don't want to hard code things like that so we want to based on uh number of items we have then based on that we want to render it because in future we'll see how to read this data from our server okay so this would be a tutorial where the data eventually comes from server right so based on that we want to change things all right okay so now here we'll undo what i've done so far so let's go back to the original state let's undo it okay yes we are good one more time yes so this is our original state of the code okay perfect so what we want to do we want to run here wrap it around a list builder so it would help us to build it automatically okay so let's collapse it now on mac i would do option enter and this is for android studio though i think uh for visual studio you could do on mac option dot for visual studio for android studio on mac option enter and then you'll see this option okay so i select the first one and then here i write list view dot builder this builder actually it takes a function so the function is taken into the property which is called item builder so over here it takes a function with the context but we are not supplying any context whatever the context is available is that one and return okay over here so we want to return this section this one all right make sure that we are good and let's see this position okay yes so over here we want to return return what while it's a bit of ugly situation right now right so that's because of this uh this child property remove it and you should be good to go and now of course our code looks a bit messy so if you're on mac you can do option command l and it will uh rearrange your code beautiful way okay so now it's much better as you can see all right so now come back to this section once again over here and we have mistake and we are returning so we need to have this semicolon now this loop would run infinitely okay so let's go ahead and run now it's gone most probably we need more of them because once you use a list builder within position widget i think it needs this properties like left zero and uh right zero on the bottom zero now let's run it yes it showed up and if you remove this one it this list is infinitely scrollable list okay yeah so another thing you need to remember if you use list builder inside position user you must need to set up all the property just one property doesn't work anyway so i'll put it back so we want to run it only three times but now here's the same problem that happened earlier so we want to assign a margin over here so let's do margin so we do const agencies only top 20. now this margins are okay but here apart from 20 we have a lot of extra margin now this margin is coming from list builder so we need to remove uh well it's not really margin it's a padding less list builder has a padding inside for the beginning item so we need to remove that so once again with the option enter on mac and uh in vs code mac you do option dot and then you'd get this option here widget select this one and here we'll use a new widget we'll call it media query dot remove padding this one and it takes a property it's called remove top we do true and it also takes another property context so just apply context over here and now let's save it yes perfect so that extra padding is gone all right well now with this let's see so we have this top margin so let's try to apply left margin so sorry right margin i'll do another 20 okay perfect so it's working as we expected okay so so far so good so now next part of this item is this one um so this let's create this button okay well we want to create a reusable button okay because uh further further down this app we need to use or create this kind of button again and again so that's what we want to do to do that here within widget we'll create a new file we'll call it large buttons dot dart here we'll create a stateless class we'd call it uh app large button okay yeah well this button for this button to import some of the libraries okay the few things that we must need to know this button is a reusable so we need to provide some additional parameters from where we call it because in different situation it'll have different look and color fill in color so we want to take care of some of these variables and declare them now here we do final color and it would do background color so we'll call the color name background and once again we have this one because this is optional so this button will have a default color next would define the text color as you can see there is a text so the text color is also optional so do text color next would do well the button is clickable so there would be an ontap function so we do on tap function over here and so the function would be supplied or given from where it is called like from here for now okay and we'll also have uh another boolean variable okay and is border so whether the button should have border or not okay and what else let's see i think we're good for now so now we need to use all of this over here within the constructor so we do this dot background sorry this dot background this dot text color this dot on top this dot is border okay well now for his border the default value is false and for background color we can also assign a default color so we do default color app color dot main color so which is this default color okay and what else uh i think we also need the text itself we have the text color but we don't have the text itself so we do string text okay and over here this dot text now the text itself must be uh supplied by the caller function the one calls it okay yeah apart from that i think we are good to go so now over here what is this so this is going to be a button right so button is clickable so that's why we'll use over here we'll return gesture detector dash gesture detector of course it takes on tap function now ontap function is this one the one will be called and what else so it is this child now for child once again we'll use container and over here we'll have decoration box decoration and we'll have border radius border radius dot circular would use a 10 now it's a border radius and button will also have a border in this case this button doesn't have in future we'll see we use other button so that button will have a border okay so we can use the border over here so border dot all we'll we'll use border everywhere and border width set to and color so border color is app color dot main color so the color is this one what else and well so far we're good and we also want to use a text okay so for a container we'll use a child and a child should be text okay and the text is being uh given from here the one will be called and saved here so we can use this text okay yes let's see and we can also use a style we'll do text style and font size say well 50 and what else color so the color is this text color the color function will give us text color i think so far we are good and we can also use font weight here font weight dot bold all right okay so we are good now so let's call this function this class from here okay uh so let's come over here let's look at our file in the main file so we have this head sections which is this one and we have this list bills which is this one so over here we can call another function would say pay button all right and we can actually define it here so pay button okay yeah now of course this button should be returned as a positioned widget okay and uh within this position widget the child so the child should be our actual button the button we have declared over here so we'd call app large buttons this one and now it takes a text you must apply text you'd say pay all bills all right and as we are returning we should have this semicolon so pay buttons let's see pay well button buttons so remove this s all right okay now let's go ahead save it well now it's at the top that's why we not want we want it at the bottom so here what we could do we could do uh over here position widget right so you could do bottom say 10 all right well it's there and let's see what else over here so now this is not that good looking so we need to change the background color so let's see we have this background color which is main color main color our main color so background color should be assigned to box decoration right so color so we do background color oh let's see but now well the text color should be white so here we can do text color colors dot white okay it's looking much better now and also the size itself let's see what else instead of doing bottom 15 10 we could do let's see 20 yeah it looks better what else uh i think we can also in the container we can use within height okay so height 60 and we can also assign width over here so we do media query dot off context dot size dot with now we want to keep some space left and right like over here 30 over here 30 so this will put in the middle okay so minus 60 30 30 minus 60 all right yeah now the text itself is not in the center so what you could do we could do center so center widget okay perfect well now this is still not in the middle okay well this is still not in the middle so what we could do we could come here and the container itself over here we could apply margin so const adding sets so left 30 do remember we already did 60 right minus 60 the reason because we are going to apply this one left 30 and right 30. okay now it will put in the middle okay well it's looking better but the text are i guess way too big so we can change the text size let's see the text size is uh where is 50 so let's do 40. yes this is looking much better now okay well for now we don't apply on tap event which is this one will do future okay so well next we want to see once we click on this one click on this one uh it should pop up a button but before that actually let me show you one interesting thing now this is a fixed one right so over here instead of three we could do five and we'll see it's still at the top and fixed okay and this section is scrollable okay hopefully it makes sense but now for good looking we'll just do three it looks good with this right well in future we'll see how to read this data from server but anyway now we'll focus on this uh tab button over here well to work on this button first we need to wrap our button container uh though over here within the button container this container actually this is the container which is this one to make it clickable we need to wrap it around gesture detector that's what we'll do so right here gesture detector okay well of course gesture detector takes on tech event so once we click on this one we want to show an overlay and that overlay would be like this okay it would show up like this one from bottom to top and then we'd be able to click on this cancel it once we cancel it we go back to this one so once again we click on this this overlay will show up and it will have this kind of ui and we click on this it would be gone okay that's what we want to do all right okay so to do that we need to use a model in flutter that is shipped out of the box which is called show model bottom this one all right well now this has uh builder so whenever you see builder in flatter in general it takes a function okay so it is build contacts and bc and i think that's it okay well now make sure that you have this semicolon right now you have to return something so let's return for now would return a container okay all right okay and uh what else uh let's see this uh show bought show model bottom it has uh okay anyway so before i talk further let's go ahead and run it and let's click on this one and it showed up right and now it has to color this is called background color and this is called barrier color okay all right so we can set them say background color we do colors.gray that with opacity 0.5 and let's see okay yeah so it's working so this is our gray background color and this is called barrier color all right of course we can set barrier color say colors dot gray with opacity 0.8 all right so let's run it yeah so 0.5 this is 0.8 okay over here so we can play with this value so definitely the barrier color we want to transparent as you can see from the picture so barrier color should be transferred we'll be able to see the background okay yes so do colors dot transparent okay so let's see close it run it again yes transparent now we need to play around this height this height should come up to this place okay yeah now you could go ahead and define a height of a container so let's do it say 800. and say with well we don't need to worry about though this default is complete with so anyway so let's go ahead and check it now this height is not taking effect that's because i think we need to set up some other properties which is called one of them is called is a scrollable okay so is [Music] let's see i think we also have another prop uh type here which is called dynamic we need to set it and then is a scrollable or a scroll control and we need to set it to true now let's say and run it so it becomes a bigger height okay so if you don't set this and this the height of show model bottom she wouldn't work it'll just stick to the default one okay so anyway but we don't want so much height we want up to here so how to find this height so we'll have this total height minus this amount of height so that's how you get it so we do media query dot off context dot size the type minus 240 so this amount of space up to here 240 okay now let's save it now see it perfect okay yeah well well now that's 240 for that one so actually well so far so good but let's continue let's see as we go ahead i'll explain more so now here well as you see from the design okay actually our model should come up to here but this part is once again completely transparent and from here it started to become gray okay so how to do that now this part is a bit tricky for this one we need to use another stack widget okay all right let's go ahead and see our stack widget so i would stack with it as a child now it takes children okay all now the first one is once again we know stack widget takes position widget okay so over here would return position to eject okay and now here we'll have a container let's see okay well for container we could use the default height here and with here so we do with media query dot off context dot size dot width okay it doesn't matter now the height okay well how far this height should go uh let's see uh what you can do here we could do color colors dot red okay all right let's save it run it so this is the college so what means that means that actually uh this one we could also come up to say 300 okay so it's it's going up so the bottom is not there so i think we need to set up this bottom property so what do we do we do say bottom zero close it okay so now it's coming from bottom so now do you see it so this is 300 okay the this container size uh i mean sorry uh the height height is uh less than this one so this is becoming red and the gray one is the parent one okay so the parent container within our show model bottom it is the highest height height is up to here from bottom to here and it has a background color and what is the background color the background color is this one okay 0.5 opacity now as a child i put another widget and that's a container now this is a different height so what this tells us this tells us that uh our background color actually we can remove it okay over here so we can make it say colors dot transparent okay so let's close it right so that's gone so actually it is up to here but we don't see that okay like if you click here it doesn't go away it is still there but if you click here it goes away all right yeah now if you click on it comes back all right perfect so now what we can do so this section actually we could make it gray all right this section we could make it gray so instead of red so that we can see the background okay hopefully it makes sense so so we can use a different color now we'll do ox ff ee f1 f4 and let's save it and yeah so it's coming there now we need to use opacity 0.7 yeah so you are able to see it so the actual model is a show model is coming up to here but our this is our child okay so our child is coming up to here so you're still able to see that right perfect okay now next we'll see how to show this these three buttons okay now we can also use them once again as uh our position widget okay we'll put them right over there okay yeah so let's go ahead and see where is it well i guess this is one position widget so right next to it we can declare another position widget and here we'll have child once again we'll have container okay all right now here the container will have width and height right okay so let's do it so we do with 60 and say height 250 do remember so this is the width and this is the height right now okay so that's what we want to do all right and what else and we also want to do box decoration so so that will have beautiful border box decoration border radius border radius dot circular now here so let's say 29 all right yeah and it should have a background color sorry color app color dot or main color so that's what we want to use let's save it run it no yes so it showed up but it's on the left we want it on the right so let's change the position let's change the default position so we want to set it to the right right zero and yes it's showing up but it's too much to the left so that could do so we could do 58 all right so same as its position so their position should be same this button position was on the right left as well if you go ahead and check the code so let's save it yes perfect so it's overlapping right there okay and uh how about the top let's see top zero how how it works okay yeah top uh well i guess we we are good with this it looks okay all right yeah so that's it so it's working right okay perfect so next what we want we want to show this items over here this button items okay and to do that we need to actually declare a reusable component reusable buttons okay because these three buttons we don't want to write a lot of code we will write one code and use them again and again and to do that actually here we can deploy declare another file and we'll call it buttons.dart and here we'll declare a class stateless class and we'll call it app buttons okay now over here uh definitely okay let us import the libraries but we don't want to return a container because we want the button to be clickable okay so what i want uh we want a gesture detector okay yes now gesture detector will have ontap function as well as the child okay for now charlotte do container okay now let's see over here what we can do here so this button should be reusable so the one who calls this button should give its text uh icon while there are a lot of icons here as you saw early icon color background color icon size uh and some text color like the text as well okay so a lot of this thing should be coming from our function that calls it okay so this should be saved over here in the construction and they will use it during the initialization so let's go ahead and declare some variables over here so double we do font size so that means it's optional and we do icon data because we'll pass icon so icon and we'd also pass on tab event okay so function on tap what else background color color background color and let's see color icon color okay let's make all of them optional upper from this one you must have an icon for others we'll use a default value so we use text color okay we're good now we need to put all of them here otherwise we'll get error as you can see is being cranky so we'll start with the font size this font size okay well we might have a default font size let's see default font size we can do say 20 okay and we'll have text color this dot text color and text color should be app color dot main color for now and we'll have icon and icon color this dot let's see i icon color called colors.white to import libraries let's do it and we'll have background color so background color app color dot main color and what else so we'll have this dot we also need to have text actually so final string text now text is a compulsory not optional so that's why we don't use this one so text and what else uh let's see required okay now we also have this icon this dot icon now we also need a required okay text color icon color i think we're good font size and also the ontep function okay on tap so let's remove it okay so we are good to go and how about this button constructor how to construct them now if you see from this one so actually this most of these buttons they have this icon as well as the button name okay all right once again it should be clickable right okay that's why we have this uh gesture detector now the button should have a column layout okay so that's what we would do and now here we can pass on tap error should be gone and here we have a column layout within column will have children let's see yes children okay now the definitely first one is the container container for the icon itself we do with 40 height 40. on decoration box decoration okay border radius border radius you should be pretty familiar with them right now and color it's a background color the color we pass and what else okay all for now this is the icon background and now as a child will have icon here and now icon is being passed from the caller function as it is received here here as you see okay and for the icon itself there should be a size okay say size 30 so fixed size and color icon color so you use icon color okay so that's it so that's for this [Music] let's see this icon okay now the text but look this over here we don't have any text for it right so this is optional so this text could be null okay yeah so the text may not be provided okay so we can actually do optional over here not this one because text is not necessary sorry so the text could be no because that means option optional means you may provide you may not provide but as you see here we also don't have a default value for this so if we don't provide it's totally null right if we provide we'll have that text so that's what we want so now we want to use the text over here we'll see if there is a text we'll use it if there is no text we'll just use an empty container okay so let's check on the text text is not equal null then we'll use a text whatever the text is given so this is the text widget and this is the text which is coming from here as you see all right okay otherwise we'll use empty container okay yeah now let's see because it could be null so that's why this operator here you need to use it tell the compiler that it could be null and if it's null don't crush the app all right now definitely we can use some styles here so text styles okay say font size [Music] 12 14 i think that's good and the color text color this one i think we're good okay so now we can go ahead and use this all right so let's come over here so this is our second position widget within this stack within our show model bottom sheet over here so now over here we had a container and this container is issuing this now the container needs a child okay so we'll do child over here and child definitely you understand that it should be column uh so it should be yes it should be column okay now it takes children over here now children so now we can use our buttons over here okay that should be app buttons this one okay so only required one is icon as you can see here so others are optional so that's why you just see icon okay so anyway what i can you want to use over here so we do icons dot let's see can we have cancel or not this icon yes we have this one so it is cancel and what else we can use say background color so for background color actually i can use it here so icon color app color dot main color this is the icon color and we'll have text color so up color well in this case we are not going to really use this one but the text color the first one because we'll not have any text but i'll copy paste this three times so i'm writing this one anyway because we need this later okay so we do colors.white but the for the first button is not useful because there would be no text anyway let's say background color colors dot white and say what else now we also want on tap event now for this one we use the navigator [Music] dot pop and we'll just pass the context within this one we can cancel the model okay so that's what we'd be able to do and we need to put here this one this uh semicolon otherwise we'll get an error so let's go ahead and save it now let's click over here and here we go so this is our first one right yes okay well it doesn't look that great because of the top position uh maybe we can fix it let's see how we fix it well either we can put a margin over here so const agencies only top say five now let's rerun it yes it looks a bit better now so now we can copy paste this one three times then we'll have three buttons okay and of course for others for now we don't have any on top event so removing the on tap but at the same time here we want to apply text for it okay we do text uh add bill this one and the third one text history okay now let's go ahead save it once again run it from the scratch okay well it's not the best looking but it's working okay it's getting there now there are a few other things that we need to take here now this column property here we could do main access alignment main access alignment dot space between so it will have even space i guess so okay yes so it is this even space around this container but now it's uh pushing too much to the end okay well it's pushing too much to the end well instead of actually applying margin let's apply padding we don't want margin on padding and i think it would also fix this issue over here okay yes and now over here this one uh so let's do bottom say bottom 25 let's save it yes it's looking much better now and definitely we can also change the icon color so over here this one instead of i can cancel we could do add and instead of this one we could do history okay let's save it now run it okay so it's perfect it's working much better but now as you see this also works why because we are passing this navigator.pop.com context so with this you can cancel out your show a model bottom shape like that okay perfect so actually so far everything is looking great okay but the home page is also missing another section like this big text so we'll see how to draw this big text well to be able to show this big text over here uh what we could do we can come to the head section and over here within head section we can declare another function and we'll call it text container okay yeah definitely we need to define this function so we do it here text container okay oops okay now what do you want to return definitely we can return position widget but if you see that they are also overlapping on each other so you might think that we can actually return to position reject and that should do the work though okay so let's go ahead and do it now here how do we return to position widget but definitely we can return well now you can think of also another solution that just come here and do two position widget actually that wouldn't work okay yeah that's because this container doesn't really have it has height but it doesn't have width okay you can actually we can do it here first and we'll see okay let's see position well now we're just going to show the text right so we can just write it like this okay um let's see has missing text so my bills okay my i guess my bills okay and over here we'll apply style we'll do text style and font size it'll be big font so let's do 50 and want to weight front with the bold produce bold over here and we can do color colors dot white okay now let's go ahead and run it and see what happens yeah well now the first thing is that null that's because this one now go ahead and run it okay well okay it's up there right okay so can we go ahead and do declare another widget okay so let's copy paste this one okay now this time the font size should be much bigger so 70 by the way with this one actually we can also set up the position right so we do left 40 and top say a okay all right and let's save it yeah i showed up now this one for this one uh let's do left zero and uh top 100 okay and the color is actually instead of colors to the white we can use a different color a little bit like as you see here it's going to gray it looks like a gray color right so we can use that one so we'll do ox five ff293952 so let's run it okay well now i think we need to change the swap of this uh containers okay position widget so let's swap the order now let's run it okay now it looks much better but now here actually we don't want it like this okay we don't want to return it from here we so i just cut it from there you can do the same now here we want to return it okay so how do you return well now can we return say a stack widget let's see children and within stack widget i i put this to position which is the one i cut there and now this one uh which was being called from head section okay now let's run it and see so it looks like it's works okay so this is pretty much the same design we saw earlier over here okay so everything is working as we wanted all right okay so next we'll see once you click on this one it will go to uh pay bill page where it will show that you are paying the bill okay well to do that first definitely we need to create a new page so over here we'll do a new file and we'll call it payment page.dart now here we want to declare a stateless widget and we'll call it payment page and instead of container will return scaffold okay and here actually we can declare some variables and actually we can copy it from there this too would really use it over here okay h and w for width and height okay now if we take a look at our payment page payment page is this one so it should look like this well now this is a background image actually this one and this one the white one together is a background image so we have the image there all right so we want to put the background image in a container from here actually let's find our head section main background and we can kind of copy this it would save us a lot of time from writing we do here body section now we'll directly put our container but definitely this is not the background image name so what is our background image name payment background okay so i'll just do payment background all right yeah okay and now here's another thing we want to click on this app over here over here uh so now we don't have this mechanism yet but we can go ahead and build it so over here instead of calling my home page we can call it payment page okay the one we just created over here right now we'll run our app okay so while it's there and it's kinda weird okay so for this one the width and height actually we can change so the height should be the height of this uh screen so we want our image to take the whole screen height okay and width should be w the one we grabbed early at the top okay now let's go ahead save it and see the result okay now this is the image actually background image we had already instead of cover actually i would like to do fill uh we don't really make a big difference though but i prefer to go with fill all right okay now it's good now over here we can declare a child and the child would have column why we're doing that because these are all in column format so on the top of each other okay these are all columns no position widget over here all right okay so definitely first thing we want to show this image this image right okay so let's go ahead and do it so we need to have the list and over here we'll have a container once again and container should have width so double the max infinite next finite i guess and height well what's the height now we want this to be dynamic okay so based on screen position it changes i mean screen size is you might have a smaller screen so if you have height divided by multiplied with the proportion so it will take the height and based on that height it will give you a new height so pretty much on every device it would look the same okay so that's why we are doing this thing okay all right now once again we can copy this one and put it right there okay and this image name is success i know it so let's go ahead and run it and see the result but it went to the top we don't want it so we can actually uh what what can we do over here now this is a container you remember right so within the container actually we can create a padding so we do padding okay and const as insets so padding so the image is there so from the image we'll create padding so it will come everything inside so we do say top 80 okay perfect why i'm doing 80 because i know this from here to here the distance is 80. so it is coming down and so left 20 and the right 20. now it looks much better okay or even actually we could do say well now we don't need to change this one the thing we could do to change over here so instead of fill now we do fit with let's see how it works okay perfect so it's based on width it's doing the changes so it looks pretty good right now okay okay perfect so with the first part of the design we are done now we do this one okay this to text well as you can see these two texts are pretty easy all we need to do use text property now what we did early over here within position widget the text we can just copy paste okay so we'll put it over there now definitely we don't want so much big maybe we could do 20. uh instead of my bills would do success and instead of color this one we do app color dot main color okay let's go to save it and give it a shot well 20 is too small so let's do 30. yes it's looking better okay now we can go ahead and copy this one one more time and put it right there now what it says payment is completed for two bills so that's what it will do well in future this would be dynamic once we do the second part payment is completed completed for two bills let's go ahead save it yes but it's way too big so let's do 20 that's perfect now we don't want to boulder like this maybe we could do a different bold say uh 600 and the color we don't really want the main color we want the id color which is a little gray okay which is looking much better i think we're good for now and now we're gonna have to work on this issue okay and how to work actually previously we worked on this this list thing list builder thing so that's what we that's how we want to build it but this should be in a container okay this should be in a container so let's go ahead and first define our container and we'll do width and height so height 160 and with say 350 all right and definitely we'll have box decoration i'm sorry what happened here border radius dot circular say we want 10 and we want to have border right so border dot all now we'll have width two and color colors dot gray with opacity says 0.5 let's save it and see well it's looking good it's too close to the upper section so you could do size box over here and would do height and h dot 0 0.05 oops okay so it gives us enough space okay or maybe we could do four or five all right yes perfect okay well now within it we want to show these things okay a container can definitely take a child okay well now the child is another container well for now we're going to use a container and other container like this but in future we'll wrap it around list builder okay anyway so let's do over here column now if you take a look well if we want to show two so that's why we need this column thing right within the container we have this column and in each column we have rows okay within row this is the first section is the second section but second section is a column again and this is the third section right okay so we'll go ahead and do children and do row over here all right and within row first one is you can see that this this has to be a container right yeah so we'll do container okay and a container with 50 i'm sorry i need the list for it okay and container with 50 height 50 and we have decoration on the box decoration and border radius border radius for the radius uh well we do circular it's a 25 because we want to make a complete circle okay and we also want to use color colors dot green okay that's what we want to use and now there should be an icon as you can see there is an icon there that's what we want so there should be a child as i can so i can start done and it should check size say size 30. okay now let's go ahead and give it a shot well it's there it's there right there okay well now the color is uh black so we don't want it we want a different color so when colors dot white perfect okay all right so we're done with the first part right yes no it is some problem it's uh too close to the top and left so what it could do we could do margin okay so const add only set top 15 uh 20 i think we're good yes and well for now we're good so let's take a look at this design so this is a row the first one is a container which is showing this one and the second one is a column so that is a column okay now definitely we have text over here so as you can see this two text right so we can copy paste the earlier text we had and over here would do can jan power while it's too big so we want 16. and the color is id color which is gray color in our case all right now let's save it and see the result um yes now we can copy i think we don't want id color here i'm sorry we want the main color which is green uh it's a little blue okay now copy the text and uh put it right there now here say id for whatever you want okay yeah and now in this case the color is dot id color okay perfect and we also want a distance so we do size box now we can do height over here and set ten okay so top and bottom has this distance but it's too close to this container okay so this is the container over here we can also do a sized box you would do with say 10 okay it's looking better but now we want the column to start from the beginning so we do cross-access alignment cross-access alignment dot start okay now they're aligned right okay perfect so we're done with this section and next we want to show this price over here so would copy this one sorry i mean we'd create a space first so we do size box say height so this should be width though say 50 50 is too much 20 is okay all right and uh now we want to show this uh text over here and how to do that so what you could do you can maybe say copy this one and think about it copy this one and put it right to there now let's see the result okay uh well now we don't want that bold so it's bold over here we want say w400 okay and we should be good i'll see it yeah okay like that but of course this is a dollar sign so because we're dealing with money so 1248.00 okay we're good let me do 700 okay perfect but now i want it to come down but coming down is not going to work like that so what do we do we put it this one in another column column will have children now within it we'll have this text of course you'd say no change but now here i'll copy it again one more time so we'll have two texts right yes but the first text actually we can keep it empty apply nothing but it'll still occupy some space because it's nothing this nothing it means there is something okay and we can also apply a bit of spacing over here so we do size box say height so 5 pixel or if you're not happy with this you can also do 10. okay yeah it looks much better now okay now as you can see after each of them we have a divider so let's go ahead and create a divider okay so where to create this divider uh let us do this row over here so after end of each row after end of each row we'll create a divider to do divider and here we just say thickness thickness equal to okay now let's set well we don't see it most probably we also need to apply color to it right say colors dot gray with opacity 0.5 we are not saying this i think the reason is that's in the wrong place let's see so this is the container and this is our column and this is the first row after first row hopefully we want to use it now let's say it yes it's there now we can see all right now you can also deal with this bottom let's see here this container we can just put over here a bottom padding a margin let's see maybe it would help us yes now it's looking much better but definitely what we could do we can just go ahead and copy this one and put it there and we'll see two times okay but we don't want to do it like this as i said that we want to do it using a list builder okay well now to do that using a list builder you need to wrap your container around list builder widget as we did early list view dot builder okay and once again it takes a function okay so we'd copy this one and cut it now over here it takes a function in its item builder so function takes two parameters first one is context but we are keeping it empty second one is index we can pass index now but for now the index is not useful we'll use that in later later once we import things dynamically okay now let's go ahead and run it now this is infinitely scrollable list okay so first thing we could do we can mention the item count so maybe in our case three let's save it now we'll have this three just three of them okay but now the same the old problem up here this extra top padding so we can remove that so we'll use media query dot off dot of context sorry i think i messed up so let me undo what i've done media query dot off context okay i think media query dot remove padding this one okay very good and it takes properties remove top true and just use the context and context let's see yes within this after this the top padding should be gone now we have this three of them okay perfect it's working so next we want to work on this thing where we show the total amount okay now let's see where we are showing the total amount so let's get organized don't get lost it's over here so this is our main column remember so this is the main column which is holding everything so now over here we want to show this but before we show this we can use a size box so the size box over here let's do height 0.05 it will make sure that we are responsive based on design now we'll have column for this too okay so we'll do text over here and we'll do total amount i think i'm making the old mistake so here we need this children and then we copy paste this one and then we do style text style font size say 20 and the color of color dot id color which is gray let's say let's see it and run it okay we get error because this size box is too big so now the error is gone so that's why i want to make it responsive anyway so now let's go ahead and copy this one and over here we could say something like this it's a random amount dollar two eight four zero zero zero and a font size 30 and color is dot main color okay let's save it and see the result yes and i think we could use font weight and we also do a size box here so do height 10 yes it's looking much better well next we'll see how to use these two buttons over here all right uh but before we go ahead and do the button i think we also need to create another size box over here so this distance right so we'll just copy paste and instead of zero five we do one three and now over here we do this one but you understand that this is a row format right a row section so we do row over here now and we have children now this button we already have worked on this okay so all we need to do go ahead and call the buttons do you remember we have this app buttons like coming from here are buttons so this one okay buttons and the icon what is the icon name so icons.share so this is the icon we want to use share sharp and it also has on tap event i remember so we'll send onto event but this is empty for now and do remember that there is also a text over here so we'll do text and the text name is share yes and what i'll do i'll just go ahead and copy this one oops i'm sorry and put it there now this second icon is printing print let's see print outlined and we'll call it print now let's save it let's see the result wow amazing so our buttons are there in a row and we can i guess create a bit of spacing between them we do size box and we do height so h 0.02 0.002 now let's see sorry this is not high this is with width okay they have the spacing but i think we can do actually a little more spacing perfect but now we want them to start from the center so we do main axis alignment because we are in a row so this is the main axis alignment do main access alignment dot center perfect so it's working pretty well and i think here we could do four yes perfect okay yeah well now the other thing is that this button over here actually for this button we have already done the work so let's go into six yeah i think this is looking better now for the button itself here i think we have done the work because we already have built the button previously so over here first we do size box now do height and we do h 0.02 okay i think here let's see within this we don't want this one actually pretty much this is nothing to do with the height let's see what's happening here that's because of this one okay fine now what we'll do we will go ahead and call this up button here app larger button so this one so the only thing is mandatory is the text right so first we'll do the text all right let's go to save it perfect so it's already there now do remember that we can also use background color so it is background color background color colors dot white and we'll also have text color colors dot i think for text color use app color dot main color okay now let's go and save it perfect okay so it's working now the font size let's see maybe it's too big so let's go ahead and find our widget which is large button over here looks like we don't have text size over here so maybe we could do 30. yeah i think it's better now we want to click on this and go back to the previous one how to do that and do remember like here we have this one so i want to click on here and go to that page and come back so we'll use a package once again get x package okay this is super easy to use we do get let's update your file let's see yeah this loading is done okay now to use get x package your material app should be get material app but of course you need to import the library so do package you get dart perfect now once you click on pay bills you want to go to a new page right okay so let's come over here and find our pay button this is the pay button do remember that this button takes on tap event okay so here we want to use untap and we want to send the tapping event so what is the typing event we want to go to a page get to where so get to payment page payment page this one all right and let's see it's asking you to input the library so let's go ahead and import it at the top package again dirt okay perfect now let's see we still have an error because we need to semicolon okay now let's save it and click on this so it takes you to this page now once the payment is done you want to go back okay so let's go back so where is our payment page this is our payment page so this is the app button large button over here we want to create ontap event so we are passing it now we want to get done back that's all that's all we want to do and semicolon and i think we also need to import the package so with the package start i'll save it now click on this go back click here come to this page click on this go back now let's check on this one so everything else is working if you click it's gone go back well now we're done with the static part next we'll see how to connect this thing with the payment section where you do actual payment and at the same time you should get this data from back end okay so this should be next part so the next part should focus on the payment actual payment and the backend data so stay tuned

Channel: dbestech

Views: 24,250

Keywords: flutter payment app, flutter payment with paypal, flutter payment app ui, flutter payment app with backend, flutter app step by step, flutter tutorial, flutter android and ios tutorials, flutter tutorials 2021, flutter payment gateway, flutter payment app github, flutter payment with braintree, flutter payment sdk, flutter backend app, flutter app with backend, flutter laravel, flutter nodejs payment, flutter php payment, flutter payment app with laravel

Id: RJW__xxu5vY

Length: 152min 54sec (9174 seconds)

Published: Sat Oct 02 2021

Reddit Comments

[u/xvadim]

Super, looks very interesting