Flutter tutorial Kids education platform | Flutter ui speed code | flutter tutorial

do [Music] [Music] what's up fellow developers today we'll look into creating a design for a kids education photo so let's get started first we try and create this page breaking down this into separate paths we have a row which will have these two text and then an image then we'll have set of text to be added and a small button so before we start i've got the images and font so i'll try and import this now okay in perspective let us add those images and then we'll add these fonts okay and add the second font okay now let us create a new file which will save all the color schemes and name it as color scheme let us import material dot dot and then let us define the colors okay now we'll input the color scheme dot file in our main document now we have an empty document i'll get rid of the unwanted codes now we have an empty document i'll remove the debug tag here now it's stateful widget let's create a scaffold first and then we'll give this a background color of light blue so we have saved it in the color scheme here now looking at the design we need a row so let us create a row first embody let's have a safe area so let's not render anything outside the safe area now inside safe area let's create a complete child i mention a complete column widget in which we'll have different rows so child column and then in children we will write a container first which will contain both the text go kids.com and skip in container let's have a little padding on the sides so edge inserts.all now let's have a sorry symmetric let's have a horizontal padding of 20. now as a child i'll add a row in children and add a text go kids dot okay now let's style that text style font size to be 14. let's give it a front weight of probably 500 and then let's have the font family as cersei okay that looks good now we will add another text for this skip we'll add skip and then now let us add a alignment tag a space between that part is set now we will try and import this image below the row column let's create a small space so i'll add a size box of height probably 30. now let us add a container it has to have the width as of the device so i'll write media query dot off context.size.width and then let's say this image would occupy around 40 percentage of the whole screen so let's say height to be media query dot of context dot size dot height into 0.4 now we have an empty container i'll write a decoration as box decoration and then image decoration image image asset image now we'll import as a slash i have it here i splash png i'll copy this path okay now let's see good just to make sure that if it fits the container let's add a fit tag contain okay and now we create this text and this button here for that let us probably have an expanded column with a container so let us try and add an expanded column below this container expand it now this child will have a column children now all these are evenly spaced so let's add a alignment of evenly space space evenly now let us add a text here let's see what happens okay and then let's style this i'll give it a size of 12 and font family to be cersei okay that looks good now we'll have another text that says distance learning and homeschooling part okay now this has to be bigger and let's add a font weight probably 700 okay and now it needs to be align center so i'll give it an alignment of now that looks good now we have to add this text area so let's add that and then we'll probably make this a little bit bigger okay and let us give it a front weight of 300. now i'll also give it a center line now that looks good and then now we have to create this button we'll have an icon and then over here we'll add a border with a black color probably with some of this opacity so for that let us create a center widget and then i'll give it a container as a child let us add a box decoration and shape a circle now we need a border for this we'll give this a width of 15 and color to be black with some opacity probably 0.1 and that should work okay i get this thing now we'll add a child to this container child will again be a container we'll give this a padding from five again the shape will be circle and then the color should be dark blue as specified in the color scheme document okay now if we add a child to this container as the icon icon button let's give this an on quest for now let us add that later and then you okay that looks good now we have the color to be white good now on on this buttons clip will navigate to the next page so we'll write a function open page navigator dot home page and then we'll add the root here home page context home page now let us create a new document named home page it is import material. now let's create a stateless widget home page and save this let us import the home page document and then on first we add open home page okay good so now this has been navigated to the home page so this is going to be our home page dividing this into different parts we can understand that this part is a scaffold app bar where we have a menu icon and a notification icon and this part will be a stack which will have a image here and then the search bar with the text field and a text here saying hello john scott or whatever the name here and then we have a big column which will have different teachers widget so let us first create a scaffold now i write it as page let's create a stateful widget as page and then let's create a scaffold now here we again need the background color to be light blue let's import color schemes now i can access light blue color good and let us get rid of the debug tag good now we need an app bar its background color is going to be no first let us create this app bar so i i can show you see the background color becomes blue i don't want that background color so let's get rid of that color let me let us use transparent so the color is gone now you can see a gray color border i mean a gray color shadow that is because it's elevation is high so i'll write the elevation as zero now i can get rid of those colors now the first icon is always called as the leading and in leading i'll create an icon button i know now okay i want it to be black in color and let us probably keep a size of 30 okay now we need an icon on the right side for the notification that comes under the actions tag in actions and again have an icon button okay now again its color should be black and size again 30 okay so that part is good now we'll create this area first for that we'll have a big column which will hold all the other parts of the ui let's create a body which would have a column and then in children let's first create a container its height should be probably around 30 percentage of the total screen so let's create media query dot of context dot size dot height to 0.3 and width should be full so again media query dot off and fix that size that width now we need to import the globe image globe and bear image first so i'll create a decoration image decoration image again image set image set slash images okay now once this is done we also have to know that the app bar has taken a little bit of space here and if i don't want that to happen okay container let's add a child that should hold the search bar and give it a padding of 20 on all sides and child column now this container will hold both the name and the search bar so let's say the first content here should be hello let's style that you can see this hello here size 16 and font family okay now we need to get the name displayed here it's going to be again a text widget it needs to be of a bigger size okay and let's add a font weight also and keep it at 700. now that looks good now we'll have an expanded widget till this part that is for for the agent when i create the search bar i want the search bar to be added here so i can move this up i just add an empty expanded widget and then let's add a container of height 70 that's going to be the size of the search bar box decoration let's add a border radius of 20 and then let's give it a color as white okay now that looks good now we need to add the icon here and a hint text for that i'll give it as a child children in the children the first child can be an icon button search okay now i want this to be a little bit bigger and of color black so i'll give it a size of 30. okay now that looks good now again i want the search text area to be expanded here so i'll probably give it an expanded widget and then we'll have a text field let's style that font size can be 18 and family again this cersei let's see if that works okay it works and let's give it a decoration input decoration i want to get rid of this border so i'll give it as input border dot none and we need to have in text which says search for courses or tutors okay now we have this empty space here so we need to move the search bar up i'll probably give it a size box just below this expanded widget of height probably 30. [Music] i'm sorry just put a container okay now we have to create a white space here with all the tutors widget like in the design so we add an expanded widget here and then we'll have a padding see we have a padding throughout the container so we write a padding of 30 and the width has to be the same as the document size and the color has to be white okay now we have a column widget which will hold all the tutors widget so first we'll have a row which will have top rated tutors and c all in place i will style that and let's give it a font weight of 600. okay that looks good now we had another text which should say see all and the color has to be blue and the size should be smaller now we need to move this on this side so let us add an alignment space between okay now we may have a lot of tutors here so let us add this i mean this widget into a single child scroll view and then a column so let us first add an expanded widget just below and then let's add the child as single child scroll view and then let's add a column as as the child of single child scholar now here we can have any number of rows which will again be scrollable because it is inside the single child's folder let's create a tutor widget let's see the y1 dot png is the name of the image and name of the tutor and the subject grade and fees per session let's create a widget here now this this needs to be clickable so i'm just returning an inquiry here [Music] the first argument will be the image so i'll give it an image second is the name third is the subject fourth is the grade here's the cost accuracy price now this will return an increment widget all right now first considering this widget we need a row inside the row we'll have a stack which will have the vg element the background element a rotated star the image of this avatar and the star writing here so we'll create this first and then we'll look in this part now to start with that let's first create the container the whole container this one so because i have given an equal i just write an open on tap now we have a container we'll have a small margin on top and i'll give it a height of 130 now it has a rounded rectangle so i'll give it a border radius 30 and then its color can be light blue probably with some opacity okay we have the container here now we'll add a child as row which will hold all the widgets in place now first let us create a container this will hold the stack now since i'm going to import an image that will have before okay i can show you that in just a second i will import the background image and i have a height of 120 and a width of 1 5 0 decoration box decoration image decoration image image insert image i have an icon vg here and if you can see that we have a sharp edge here i want to clip that so i'll add a clip clip now i'll add a border radius here only on the top left part again it should be 30 now we have that clip now if you can see it has a small space here so we'll just fit it properly with box with the container we create another container this would hold the star and the so character again going to be a stack i want a little bit of padding on the left and top part so i'll write as left top five this child is going to be stacked again first let's create a container of for the star and the star has to be rotated so i'll add a rotated box widget stone should be 180 degrees so i'll add a quarter of two now let's add a icon widget now if you notice the star is inverted and let us add a color of dark blue size to be a little bit bigger so i'll add the size as 60 okay now that looks good now we'll add the star rating here on top of that container again the same width and height of the star and then we create a center widget this center widget will hold the text it says the rating that is the center style size should be a little bit smaller and then i want weight to be 700 and color to be white okay now once this part is done we'll import the character here or the avatar for that we have to import the avatar on the outer stack widget it needs some space for the star here so i am adding a lift of probably 50 points and then let's add a container decoration box decoration image decoration image image set image now we already have the image name as a parameter here so let's add the remaining part i'm sorry now let's add a bit here okay good so this part is none now we will add the grade name subject and the session for a post-procession area now in the same it has to be in the same row i'm just writing it after the whole container is complete we need an expanded widget it's funded widget and have a container widget inside that with some padding now we create a column in the column everything has to start from the left side so i'll write cross axis alignment starting now since this grade has been moved to the right side we'll add a row and then have the main axis alignment of the row as end so we'll write main access alignment and now we'll have a container and then hopefully we can we can write the child create we already have the grade as a pattern so now this is right aligned now let's style that this green color okay that looks good we'll add the name of the teacher i have small space in here we have the name of tutor here okay my style text type so now we need to add this subject subject says english teacher um its color was dark blue now considering this part alone it is center from the english teacher to the end of this widget so we'll create an expanded widget and then we'll center this text in that area expanded the problem of writing a center widget here would be that if i create a center widget of an expanded project now i'll have the text displayed here but still i want it to be on the left side so i can either create a column or a row to make it on the left i prefer to create a column and then its main access alignment will be center and then you create the child now that's price for session good and now let's time that okay this is the image this is the name of the tutor this is the subject this again that's the image subject grade and the fee per session if you can notice the scrollable so we can have any number of computer widget here now for example i want to click this widget and then see details about every tutor here so i'll write on tab open teacher page let's create a function open teacher page now we write it out i'll create a new document as teacher page let's import material.dart now let's create a stateful widget and then let's import this teacher page here now i am able to navigate the new page i'll import the color schemes now let's go to the last one here we have an area that looks similar to the widget here we have a container with the background image and then the tutors image here name teacher subject and their star rating with experience and then over here we have some text this is going to be a scrollable area in the availability now and the time slot picture and a button so we will first try and make this this has to be a row and this will be in an expanded widget with a column and this one will be a scroll view again okay let's try and make this part first scaffold color again should be i've added this color just because the the image the background image of of this widget is similar to the light blue color that we specified in the color scheme so i just added a new color here now we have column widget that will have a row which will hold the avatar and the name of teacher subject etc so we create a row first and then i i create a container which will hold the background image and the avatar that's the container here with which with 200 and hello let's create a stack and then height 240 degrees watch decoration image decoration image let's import the background of icon this time i position into the bottom part i'll give a small space on the left side and then let's add a container oh now we'll look into adding these widgets on the right side i'll create an expanded widget we'll add a padding all widget has to start from the left side so i'm giving the alignment to be cross arrangement.start let's add the name of the tutor here needs to be bolder so i'm giving it a front weight of 700 and from family to be product we need some space just below the name and give it a size box height file let's type the subject color is dark blue and font family can be cersei again we need some space i'll add a size box of i15 now we need to create this widget here which will have a star an inverted star and the rating as a text so i'll create a row and then container of height and width 20 again has to be a rotated box with turns of two and child can be an icon we like the text here we need some space i'm adding sized box of width five which time this 4.9 star rating now we'll create the next row next door would be the same as this part instead of a rotated box here we'll import an image for the palette so i'll write as decoration box for collection image decoration image experience now we'll have an expanded widget that will hold all these widgets in place okay i'll give it a padding of 30 and color as white we will create all these widgets into a scrollable part [Music] column message child all the widgets start from the left side so i'm giving it a cross axis alignment of start first text says about peter uh okay now we'll add a space below this title i'll give it a height of 10 and then again we'll have a description text here um and then below that we'll have another title and add a space at this time it has to be greater than the previous space left we'll add the second title should say courses by peter hmm now below that we have a scrollable area so i'll first create a container of height 100 and width to be the same as that of the device and then i'll add a single charge scholarly the direction of this crawl has to be horizontal and then in this we create the course widget we have the image and then the title the grade the and then and then the color of the text that is written inside it will create this widget the first parameter is the image second parameter would be the name i mean the title third one would be the gray fourth one would be the pg color the last one would be text color let's add a margin to the right a lot of border radius of 20 the color should be the same as received as a parameter we'll add a row which would hold all the other widgets if you notice that this part and the image has been spaced equally so and it has been spaced to the side so i'll add the space between widget space between [Music] now we have the title let's type that color should be the text color font size should be bigger and font weight should be broader now just below this text which it will try to create has to be in green color and smaller in size okay now let's add the image again i'll add a container of 890. with 70 decoration box decoration image decorations let's add the other widgets also i come to like three and the title for the second one was creative bloomers the third one is achievers trade to be one zero two zero three yellow and pink pink now we will change the text color okay now below this we will add the availability slot like before we add space of i20 and then we will write availability again we have a space of 10. now just below this we have to create a row which will hold today's date and seven days from today so for that let us create a let's create a string we will have seven widgets so i am creating a for loop here we create a date widget to have a parameter of end that is the i value i'll create a temporary date and then add a duplication with this received as parameter so take psi and give it a margin of 2. and height 60 the width has to be divided amongst seven different containers so i'll write we create a container to hold the day and the date i'll give it a vertical padding of 10 and the horizontal padding is 10 also and then it will hold a column the column has to be centered this will hold two texts one is the day say for example sunday [Music] just type this and below the day we have to write the day current date that should be tempted dot day let's type this it has to be bigger in size and broader also now since the selected date has to be in yellow and the other date should be of normal color then it has to be yellow or else it has to be light blue with an opacity of 0.5 now let us define selective date see now it has changed now we also have to specify the day now it is all written as sunday for that oh for that we will have to create a new function which will return the current day for saving the parameter as weekday we will return the day strength of the value now instead of sunday we'll write d value of template dot great day i will receive this monday tuesday once again and so on now below the availability widget we have the time start widget also and for that i'll give it a space of 10 again and then let's create a container which will hold a column child now we'll create a time slot widget and its current selected state now we will retain a container will give you the padding of horizontal value of 12 and vertical 15 we also give it a margin for the sides and for the vertical axis it needs to be a rounded bottom around the corner so i'll give it a border radius now the color has to be pink if it is selected and light blue if it is not selected we will add a child the child will have an icon and then size will be 13. color will be green color and then let's add a small space we will at the time here now we'll have four different widgets here in this area so i take a copy of this now this needs to be inside a row widget [Music] and again i'll take a copy of this widget okay now we'll create this make an appointment button let's create a container this container has to be of white color the width should be same as that of the device let's give it a padding of 15 hour sites let's also give it a margin on the left right and the bottom let's add a border radius of 10 and the color should be dark blue let's add a child it can be a center widget and then let's add the text widget here saying make an appointment color should be white on family again should be cersei and pick your font size now just to make sure that this is responsive add a few more rows for the time so you can see that this can be scrolled and get rid of these row columns that has been added i'll add a back button so you can go back to the previous page so we'll have a bar okay the color has to be transparent and the elevation to be zero now you see that the space has been taken by the arc bar so we'll try and remove that and this i'll add a non pressed tag we'll add a hero type for this character so in this container i'll add a new widget and again here we add a hero type yeah that's it for today thank you for watching you

Channel: Kaushik Chandru

Views: 8,086

Keywords: flutter, android App, iOS app, mobile app, UI speed code, flutter app design, responsive ui, theflutterway, COVID-19 App - Flutter UI - Speed Code, flutter ui, devefy, flutter source code, flutter dev, flutter ui design, google flutter, flutter app, flutter netflix ui, flutter speed code, flutter ui ux, flutter ui tutorial, ui design, flutter ui speed code, minimal app, flutter tutorial, kids education app, kids app, kids education platform flutter, flutter tuts, children

Id: AaPDVHikul8

Length: 97min 13sec (5833 seconds)

Published: Wed Jul 29 2020