Cinema Booking App UI Design Tutorial In Flutter: Inspired by Dribbble

so to ensure everyone is on the same page my made that far created a booking page wet which is found below at a state foret with the scaold right so so this is the design right you have the date at the top over here that's been arranged in a horizontal manner so let's start over here right I'll be creating a variable that will get us our current date over here and the return type is going to be the DAT time and the variable name is going to be now so we assign our daytime do now so this will get our current date for us so I'll be creating additional two variables right the first one is going to be the first day of month right and the return type is going to be daytime and the next one is going to be the last day of month so below here I'll be creating a scroll controller variable then we assign it the scroll controller just like it so Bel here you're going to have an ini state where we initialize our first day of the month and also the last day of the month so with the first day of the month we assigned our daytime that you need to pass in our current month right so you need to pass in now do year so the first argument takes in the year and the next argument takes in the month right so it's going to be now. month then pass in the next argument as one right we'll be repeating the same thing for the last day of the month that's going to be now. month plus one right and the next argument you assign value of zero to make sure the variable name is correct there you go so within the scaffold over here let's set the background color of this scaffold to be transparent so that we assign it a value of col transparent and also the SC photos to tting the body so we start with a single child scroll view over here so the chart of this single chart scroll is going to be a container so the container can provide a decoration which in turn also takes in the Box decoration so over here you can specify a gradient let's get rid of the con over here you can specify a gradient over here the gradient is going to be the linear gradient so we can pass and begin where you want to begin from right and we want to begin at the center left so the alignment is going to be alignment Dot Center left then pass in the end it's going to be center right alignment of center right so basically the reason we doing this is want to provide this SCA background color of a gradient so this one you can go about so the color Tes in a list of colors right an array of colors so here I'll be specifying some head values of colors over here there you go so let's save any changes for now we are not seeing any gradient because the container of this is not having any child so let's proceed from here so the chart of this container is going to return a safe area and that will prevent it from being a notch area and the safe area will be contain a column it takes in the children so let's wrap the column in a padding wet and this pattern is going to affect all size a value of 20 so the first chart of the column is going to be a single chart scroll view so over here you can pass in a controller where you pass in our scroll controller and also let's specify the direction over here the scroll Direction to be horizontal to provide a value of AIS do horizontal and so the chart of this screw single child scroll V is going to be a row so let's say the main as this alignment of this row to be main as this alignment of Center in the road T in the children where you can specify list of regit over here right so be generating using the list. generate right so you need to pass in the length and the length is going to be from our last day of month then you can assess the date from it and the index so over here let's get our current date over here right so I'll be creating a variable of current date and can get that from our first day of the month then we use the ad method we provide a duration testing the days then we passing the index and this will get as our current date and also let's retrieve our day from the current date right so I'll be creating a variable of day name so that we be using the date format right it's come from a particular package known as inl so date format sorry date format then you pass in E which has the format method on it then we can pass in our current date and this will get us our day name for us so make sure you have that installed so once you have the day name you can return a column over here in the column let's specify the main as this element of this to be main as this El of Center the colum over here is the children the first shart of this column is going to be a container so over here let's set the width of this container to be 57 and also will provide some height value height of 70 give some decoration to this container So within the B decoration can specify a color over here and the color is going to base on the selected date right so I'll be creating a variable at the top over here known as the selected index and the return type is going to be an integer so selected index then you can assign the date time daytime do now then you can subtract one from it soorry you need to assess the day so dat time now day there you go then you can subract one from it so over here with the color we going to base on our selected Index right and render different colors so we check over here if our selected index is equal to the index over here right we check if ASL index is equal to the index then you provide a different color else we go with a default color so I'll be doing that over here oops late initializer make sure you restart there you go so let's provide some cons over here so let's specify some border radius the water radius is going to be a circular one with the value of 18 there you go you can see the effect over here here so let's wrap the container within a padding the padding is going to be symmetric and it will affect only the horizontal aspect a value of eight there you go you can see some spacing between it and the highlighted um container is our selected date right the current date so let's proceed to display the information or the date so the container is going to Tex in the child the child is going to return a column so let's say the main this alignment of this column to be main add this alignment does space evenly the column T the children over here the first sh of this column is going to be a container right we going to have a custom dot over here so with that we passing a width of seven height of seven and also provide some decoration where you provide our box decoration so over here take the shape the shape is going to be box shape do Circle and that will give us the circular dot over here now so let's give some color to this the color is going to be colors do black and save the changes over here there you go as you can see over here let's provide some con So Below the dot over here is going to render the day name right so we want to take the first three letters of this day name right so with the substring method you can pass in our start and also the end so it start from the first and then at third index and this will give us the three letters of the day name as you can see right there so let's start this test right so let's provide a font size of 14 a color as well so the color is going to be white and also a font weight that's going to be font weight 600 there you go can see the effect so below the day name is where we render the day right and you can do that by assessing its index and add one so we assess the index over here then we add one there you go as you can see so let's start the day so the St tribute it takes the testy so over here you can specify a font weight sorry supposed to be a font size of 16 so a font size of a 16 have font weight over here to be font weight. 500 and also a color of white saving a changes there we go you can see we have the day the month we are in starting from the first to the 31st so you can see it looks pretty much similar over here so let's provide a cons over here and proceed So Below is the time so let's get started with our one so over here let's provide some spacing so that we provide a size box with a height of 25 with the cons preceding it so you're going to have a single child scroll view so with this we specify the scroll direction to be horizontal and that's going to be AIS horizontal and also tting a child that's going to be a roow so with this tting the children you're going to generate as a list so it's going to be list do generate you need to pass in a length so I can pass in with a default length or manual length of four and also return the container so where the container let's provide a weight of 100 and also a height of 25 and align alignment let's say the alignment to be alignment of Center and provide some decoration which in turn also takes in the Box decoration over here so you need to specify a color over here so I can just grab the color or this condition right so I can just grab this condition we going to base on the index so we check if our index is equal to two so depending on the other you can use the index to manipulate it over here so let's say the Border radius to be border radius do c and provide a value of 15 there you go can see it looking good already so let's wrap the container in a padding widget and this ping is going to affect it symmetrically with a horizontal value of four there you go can see the space over there so the chart of this container will be containing a text that will render the time so I'll go with a default value so as I said earlier depending on the index you can render different times so let's start this test so with the sty tribute you can provide a test style and let's give it a white color so let's set the color to be colors. white let's provide a qu value over here there you go it's looking nice already so let's proceed with the Curve line over here so and for that I'll be using the custom paint So Below the this single CH scroll view it's going to be a custom paint so here takes in the painter and I'll be defining a custom class over here and the name is going to be C painter which is not yet created so I'll be creating it sooner and the chart of this custom paint is going to be a container with a height of 170 so I'll be pasting in the implementation of the C painter right so basically it has the start point the end point and the control point of how rounded you want it to be then you use the canas to draw the path as you can see over there there we go it's looking already good so let's proceed so the next thing to do is to render the chair right with a different colors as well the white one is available taken and also the selected one so below um the custom paint I'll be using the wrap widget with a spacing of 15 the rap T in the children so with that I'll be generating with the list so list do generate you need to pass in the length so I want 100 chairs then we passing index over here and return a widget right so in here I'll be returning an icon and the icon name is going to be the chair icon so it's going to be icons chair and Save in the changes boom there you go so for now we need to focus on the functionality with the one is available selected and also the taken So based on your logic can you can do or proceed with that so below here I'll be creating a function that will get us some random colors right and the colors is going to Bas on these three colors so the function name is going to be get random color and it takes in a list of colors and the return type of this is going to be a color so here I'll be creating a variable of random then I I'll assign the random instance to W so make sure this is imported from the that math then we can make use of this random right so in here you need to return our collect then we assess that with the random variable So Random do n in then the length is going to be the colors do length so when you call this function we need to pass in a list of colors right so I'll be passing three colors over here so I'll be creating a variable of random color then I'll will call the function I just created get random color which expects a list of colors so in here I'll be ping in three colors over here the orange the gray and also the white one so the icon Tes in the color right so in here you can just provide it the random color and Sav any changes there you go it's looking pretty good let's proceed So Below the wrap wget let's provide some spacing right here with a height of 20 So Below the size B you're going to have a row you're going to set the main as this element of the row to be main as this elment do space around then we set it children so the first one is going to be a container so with the container we provide a width of 10 and also a height of 10 so basically this is going to be our custom um dot shape right so with the decoration you can pass in the Box decoration it takes in the shape and that's going to be our box shaped or Circle we want it to be rounded and also to give it a color of white indicating it that the chair is available so let's save in the changes as you can see over there so next to this dot is going to be a test of available so let's first of all provide um some spacing between that right so that I'll pass in a width of five and also next to that is going to be a test of available so this an additional information to know which seat is taken selected and also available so with this test let's provide some styling to it let's give it a color of white there we go let's save any changes oops I think there's enough space over here um so let me copy and repeat that and see the effect N I don't want it this way um let's wrap the container in a row wiget right so we can just grab these things in that row widget there you go so you can just make a copy of this and repeat it one more time over here so here we need to change in the text over here to be taken and the color needs to change as well to be gray there you go so I'll just copy this once more and we need to make the necessary changes over here so here the test needs to be Chang to be selected and provide the color so I can just grab the color over here just like this and also we need to pass this to The Container as well there you go I think it's looking pretty much the same thing so let's proceed with the last component or the last wiget below so for that I'll providing an additional space with the size box right so we provided a height value of 30 and below that we going to have a container as usual so the PDN of this container is going to affect all size right a value of 12 so the width of this container is going to be double do Infinity that's going to be 100% of the screen and will provide a height of 140 and also said the alignment to be at the center so alignment the center so the decoration of this container will provide a color over here the color is going to be his valum so I'll type that in so the chart of this container is going to render a column where you can specify a l of wet in a vertical manner right so without let's set the main as this alignment to be main as this alignment do space around and also with the children we start with a row and let's say the main as this element to be made as this alignment do Center and also provide some children over here so here you'll be having the location icon next to the test right so it's going to be icons do location that's the reason why we specify it to be in the row so that we can position the icon and also the test in a horizontal manner so let's give the icon a color of white so next to the icon is going to be a test and the test over here is going to be some runup test that basically display the location of the cinema so with a star we give it a color of white so I'll be copying the test one more time so below that is going to be some random description and that needs to be below the row yeah just like this it's going to be some random desri description over here so I'll type that in so let's set the color to be gray also the last component is going to be the B that's going to be the elevated button which comes with the on press and also the child so the child is going to be a test widget over here so the test provided a value of buy ticket then we passing the price over here that's going to be 48 bucks so let's get rid of the cons over here and provide it next to the row and also next to the test and next to the test as well there you go so we need to decorate the button right so the elevator button provid us with a sty so that you can just start with the elevat button sty from where you can specify background color so I just grab the color over here and paste it over here saving the changes there you go we need to change the test color so the color we need to change that to to be white and also the button is not fully rounded so we need to F that so with the F size Tak in the size where we can provide some width and height so I'll set the weight to be 3 230 and the height to be 30 and also we need to change the shape of the button so the shape is going to be rectangular um I think supposed to be rounded rectangular yeah rounded rectangular border yeah so over here we can provide a border radius it's going to be a secular as well and a value of 15 as you can see the effect I think that's pretty much it let's compare and [Music] see so over here let's provide some but radios to this container it's going to be B radius cirular where you passing a value of 40 sa any changes there we go I need to increase the height of the battle as well to 50 there you go I think that looks pretty much the same so that's basically it see you in the next tutorial until then stay tuned

Channel: CodeWithDarkwa

Views: 243

Keywords:

Id: YkovshwIy74

Length: 29min 41sec (1781 seconds)

Published: Tue May 07 2024