Flutter tutorial Iron shop App | Flutter ui speed code | flutter tutorial | laundry app UI

what's up fellow developers today let us create a ui design for an iron shop we will start with the splash screen and then we'll move to the onboarding pages then a login and sign up page we also add a home page and a page to list all the clothes and then we'll have a date and time of pickup and then we'll add the order confirmation and the order tracking page so let's get started over here i have an empty project let's first import the assets folder i've got the assets and the images in the assets folder now let us add that in perspective file let us also add the fonts over here we have two fonts one is for the content and another one is for the title let us get rid of the codes that aren't used now we have an empty project let's get rid of the debug tag just create a scaffold over here let us add a container of height media query dot of context dot size dot height and with same as the width of the document now let's add a decoration box decoration let us add an image decoration image and then let us add the logo here a set image and we have a background image which has these circles and and other images so we'll add that first and then as a child of this container let us add a center widget we'll add another container of height 200 and with 200 let us add a box decoration again over here let us add the logo image perfect now after about few seconds i want to open the first page say that is the onboarding page so i'll create a new function let us define the page road context let us create a new file let us import material dot dot just create a stateless widget and then let us import the onboarding file here and now i want it to be navigated about three seconds so let us create an init state function here over here let us add a timer let us add a duration of three seconds and then i wanted to open the onboard page okay timer works within a class named async let me add that great let us see if that works perfect now let's go to the onboarding page over here let us first create a scaffold and then let us add a stack now we will again add the background image so let us keep the height same as the document and then with also to be same as the documents with and then let us add a column as the child of this container i'm sorry let us add a column as the child of the stack so over here let us add a column widget let's keep the main axis alignment as center and then let's add the children now for the onboarding i'll be using a widget named as page view so i'll explain how to use that let us create a container of height 500. this child would be page view as i already mentioned it needs a controller so let us first create a controller for this it's called as page controller let us define test page controller okay now i want its initial page to be zero now let us add the children for this widget now this is the image name that i have already added in the asset folder and this will be the title of of this current page let us create the widget for this one it will be a column widget as i already mentioned will be the image now the second one will be the title of the page now let us return a column widget again its main access alignment would be center now let us add the children of this column widget let us first create a container of height 200 and with again it should be same as the documents i'll write media query dot of context the size start with let's give it a padding on all sides say i'll give it 50. now let's add the image we already have the image as a parameter so i'll just write down img dot png okay and then we need to have the container with padding of vertical axis i'll give it as 10 and then let us add a text widget over here i want the title to be displayed let us give it a style size would be 30 family it would be roberto font family would be roboto and the font now let us add another container us give it a padding of vertical 10 and horizontal say 40 and then let us add a text widget as a child now i'll just give it a dummy content and then let us create a style let us give it a size of 16 color would be gray color and then let us align it to the center great now let us add the other pages also i'll just copy this function these are the image names and let us edit the title also let us see what happens so we have all the images in place now let us add a an indicator for this but before this i would like to add a one page change function which would actually return an integer i'll i'll leave this as blank as of now i will add it later and then let us add a row again its axis would be center over here for the children let us generate five or five containers now let us define this get indicator function it'll be an animated container i want it to be animated so you can also use a normal container here animated container needs a duration so let us add a duration first i'll give it a milliseconds of 100 let us add the height of this container it will be 100 with i want the say for i let us define a current page variable if that is same as that of the page number then i want it to be longer else it should be same as that of the height so i write it as 10 there is not a margin i mean border radius and i want the selected page numbers indicator to be orange in color so i'll write if again if current page is same as the page number then i want the current current color to be orange or it should be gray in color perfect now let us add a variable here that would be current page which which would actually be zero at start i'm sorry now if you notice that the current page is not edited when we i mean when we change the page in this so that is where this part comes into action on page change so let us edit that and create a function saying set current page now that would be set current page it will receive an integer as a parameter let us add the current page value here then let us set its state now if you notice that you go to the relevant page indicator here and now let us add an orange button just below the onboarding screen so let us add a position widget in the stack that we already created i give it a bottom of zero and left and right also to be zeros because i want it to be central line let us add an equal widget here on tab again i want it to be a function this function should change the current page so i'll probably let us define that later let us add a container first height 70 with also 70. let's add a margin on the bottom side linear gradient now let us add these tops here that's again zero comma one and i wanted to begin from the top center part now let us add an icon for this let's add a child icon color should be white and let's add the size is 40. great now let us add the function for for the for managing the click of this button let us create a function if the current page is the last page i want it to be navigated to the new page that is the home page of the application so let us write navigator.pushcontext let us define the route or else i want the page to be i mean i want the next page to be displayed so i'll write as page controller dot animate page now we already have the current page in place i'll just increment it by one and let us add a duration and give it as milliseconds 200 now for curves i'll give it as curves that linear okay now let us create a new document for the login page let us import material dot dot over here let us import the login page okay now let us add the set i'm sorry let us add the change page here if you notice that we can still change the page on the click of this button and when the last page is reached when we click on it again it will go to the next page that is the login page here and then let us create the login page now now let us create these pages so if you notice that we have the logo on top and some text we have some text field and then a button and along with that we have google and facebook sign so let's do that now let's create a container let us add a padding on all directions let us first create a column widget i want the cross alignment to be at start and then let's define the children this is the logo which will be on the left side so i'll just create a container with 70 by 70 and then let us add the image perfect now let us add an expanded widget here which will have the column widget as its child i'll keep the main access alignment as center and then let us add the cross axis alignment start let us add the children first it needs the text that should say welcome back now let us style that now just below that we have to add another text its color would be gray and size would be 20 and font weight would be 500 now let us add a small spacing so i'll give it a size box we need some text field for the name i mean the email id and the password so let us add a text field i want the label text to say email and then let's add another text field this should say password and then over here let us add a row first this is for for writing the forgot password text so let us add it as end so it will be on the right extreme let us add a text should be green color so once this row is done let us add a size box again of height 30. now we'll add an equal widget this will be the button which is going to open the next page so i'll just create an ontap function let us add that later let us create a container first since this linear gradient is used in most of the plates i mean most of the buttons let us create a new document which would say let us import material dot dot over here let us define a linear gradient let us first add it here and then we will define it in that place and then we need to define the stops also and it should begin from the top center now let us create a text we will first add a center widget and then let us add a text widget here should say login color would be white size again 22. and let us add the font family here great now let us add the google sign in the facebook side in buttons first let me give it a space of 20 and let us first add a row now we will first create this widget which will have a line and the r and then again another line so let us add that first so we will add an expanded widget first that let us add a container its height would be one and color would be three this needs to be on the left and right side so i will add a container in between these images let us add a center widget perfect just below the row let us again add a size box just create another row now over here we need a container let us add a border and let us add the image here that is the google's logo great i'll just copy this container and then let us change this to fb logo let us give a little bit of space in between them now let us again create a row this would this would show if if you don't have an account click on sign up so let us add that so if you notice we already have an expanded widget here so this will be on the bottom and then we need to add sign up button here so it will be an equal again let us not define that for now hmm and then let us give a small spacing on the bottom so let us add a sized box of height 10 probably okay now this is going to be nearly the same design for the sign up page so let us first create a function let us define the builder now we need to create a new page let us import this a page here and then on the click of this sign up over here let us add the function open sign up page perfect now this again had a material app now the sign up page will also have a similar design as that of the login page so i'll just copy the contents of the login page from here and then let's edit that to say sign up now this should say open login page let us define material page root i will define the builder it should say context perfect now let us edit these text field first so over here we have sign up already and then there is no text here so we'll just get rid of that and then this one should say name and the next one would be phone number let us add a few more text fields here after that would be the mail id and then let us add a password container here now there is no need of a forward password and get rid of that and we also don't need the google and facebook sign in so let us get rid of that as well so instead of login it should say sign up and over here it should say login so when we click on this login it should go back to the sign login page okay now once we login let us write a new function before that let us create a new document and over here let us again define the route now we need the homepage to be open when the login is pressed so we already have an equal widget in place over here let us just define open home page let us see if that works great now in home page let us again import the style scheme document and get rid of the debug tag over here let us add a scaffold okay now over here you can see that we have a app bar which would have a back button and a notification button we also have a title so let's get that done let us add an app bar i want the color to be transparent and elevation to be zero now let's add a leading it would be an icon button okay now let us add the title it will be a text saying yard now let us add the actions here it can again be an icon button perfect now let us add the body of this scaffold let us first create a container and add a padding let us add a column widget let us add a container of height 200 and with same as that of the document this will create this widget first so for that let us add and then over here let us add a stack i'll create a positioned widget top to be zero and left also to be zero let us add a container first again i'll give it a padding of 20 now let us add a column widget into it i want the cross cell cross axis element to be on the start now let's add the children now over here let us define some style for the title that i mean the heading so let us write font size 20 font weight 700. we'll be using this again so i'll define it here and then we can use the same style in this page let us add a sized box and then we will add a text great now we have to add the image so let us add another positioned widget this time it would be bottom zero and right zero let us add a container of height 180 and with also to be 180 let us add a box decoration image decoration image image asset image now this will have the banner image in place perfect now we need another container on the bottom of this just below the the banner image here so let us add a size box height 10 the title of this would be services now again i can use the same header style let us add a container okay i want the same color so let me use this let us add a row here now let us import an image in this place and then let's add an expanded widget we'll give it a padding on all sides of 30. let us add a column widget i want it to be aligned on the right side so i'll give it as cross axis alignment right and then main axis should be center now let us add the children of this widget and then let us add a size box of height 10. now we will create an equal widget here we'll define the ontap function later i'll create a container again we already have defined the gradient style in this key style scheme document so i'll use that now let us give a small padding on the vertical and horizontal axis i want this color to be white and font weight can be 600. now let us add these widgets so inside the column widget let us add a size box again then let us add a container colors again going to be the same and let us add a column widget here this will add a row availability let us again define a content style here and then let us add another text now just below this row let us add a size box height 10 and then let's add another text right now let us create this widget so for that again let us add a container let us add a column widget and over here let us add a text and give it a space and then let us add another text saying you can check time estimation with price and then let's add a row now we are trying to create this button so this shape should be circled this color would be white and i'll give it a size of 40. great now we need to add the bottom navigation bar so just after the body let us add a bottom navigation bar i want the type to be fixed because i have around four items in in this navigation bar so i'll write bottom navigation bar type dot fix it so selected item color would be orange we will define this later let us first define the items bottom navigation bar item it will have an icon and then the title would be a text saying home now it needs at least two two items so i'll just copy this you now over here we need to open the next page i'll keep it on the click of this place order button so let us define a function first i'll define the builder let us create a new page and then in the play in the place order widget let us add open order page now for the order page we have the categories and then we have the clothes listed so let's do that we also we also have the app bar so i'll just copy it from the previous page and the title would say select clothes now let us add a body could be a container let us add a column widget that would be a row now let us create a category widget this would be the name of the image that i've already saved in the images folder and this would be the title and this is the status of that widget if it is selected or not so it will be a boolean with true or false now let us define this widget second one would be the name and the last one would be the status let us return a column widget let us first add a container of height 70 with also to be 70 let us add a decoration now the color needs to be gray if it is not if it is inactive so i'll write if it's active if it is active i don't want any color so i'll keep it as null else it should be gray color i'll also add an opacity of 0.3 if it is selected i want it to be a gradient so i'll write gradient here and again if it is active let us write the gradient style which is already defined in the style scheme document or else it should be null okay and i want the shape to be circle great now let us import the images let us write a center widget decoration box decoration image there's our decoration image and then again it should be a set image asset slash images we already received the image parameter so i'll write it as dollar img okay now let us contain that great now we also need to add a text just below this so we will write it as name great and then let us add the other widgets let us first create an expanded widget inside the column and then let us create a single child scroll view let us add a column widget as a child of the single child scholar this is again the image now this would be the title of the the cloth and this would be the price for i mean per piece i have nine images now let us define that cloth widget would it would return a container the first parameter would be the image second one would be the name and the third one will be the price of that product it should return a container let us add a padding and then let us add a column widget in this let us first create a container now we will add a row widget here let us first import the image for that i'll create a container of height and width 50. we already received the image param so i'll write it as dollar img so we have all the images in place now let us create a column widget inside the pro widget in which we'll have the text and the price of the product so let us write cross axis alignment dot start we already have the name now let us add the price and then let us add another text now i need the the final final price of this so let us write a text here that will display the price of that product now we need to add a plus and minus button so we will add that here on so for that i'll create a row let's create a container of height 40. and then let us add a child with center widget i want the color to be white great now let us add another container of the same size i'll write height and width as 40 and then its child would be again a sector widget now this would be the count of that product i want it to be a little bit bigger so i'll write it as 30. probably 25 okay now let us copy this container and then we'll change the symbol here perfect so if you can notice we have all the containers in place if you notice that we have a line in this space so we also add a row so that is just below the container here let's add a row i don't want it to be i mean till the end of the screen so i'll add probably a percentage of the document so let us add media query dot of context.size dot width into zero 0.75 and then we need to define the color so we have all the containers in space now let us define the bridge is just below this so after the expanded widget let us create a row okay and on the right side we need the total amount to be displaced i'll write another text or just below the row let us add a sized box now we need a button to continue so i'll give it an inkwell let us not define that for now let us create a container and give it a padding of 20 on all sides and then let us add a child to this container color should be white again great now when when i tap select date and time it should go to the next page so let us create a new document we will define the document here import material dot and then let us create a stateless widget and over here on the ontap function let us define navigator.push hmm we'll import the pickup time page here great and then we again have the app bar so i'll just copy it from this document now this should say select date and sorry time now let us create the body of this scaffold now if you notice that over here we have a scrollable area which would scroll in the horizontal axis so i have given as a single child scroll view and then let us define the scroll direction as horizontal and then we will have a row as its child you now let us define this date widget it would return a container the first parameter was the day second one would be the date and the third one is its state if it's active or not let us add a decoration now again if it is active i want the color to be orange or else it should be gray with an opacity of 0.3 now let us add a child column widget i want the main axis to be in the center now let us add the day here and then let us define the style now if it is selected i want the color to be white so again color is active white or else it should be black ok and let us define the size now just below this we need another text to display the current date so i'll write it as date great now just below this we will write the time slot also so after the single child scroll view let us add a sized box of height 15 probably we need a line here that would be the separator and after this let us add another sized box we need the title same as this one and it should say pick up time let us add another size box for spacing again it's going to be a single charge scroll view and this crawl direction would be horizontal let us add a row here [Music] wow let us define the time widget here it would be a container again as same as that of the date widget so let us add a time widget the first one would be the time and the second one would be the active state now this is going to be the same as that of the date widget so i'll just copy it and then let us add a child again the main main access alignment would be center over here we have the time now if it is active i want the color to be white or else it should be black now if you notice we have the pickup time widgets here now we'll add the delivery widget in place that is going to be the same as that of the pickup date and time so we'll just copy this part from this space this one and then we'll edit it as delivery date so now that is going to be at least two days from the date of start so i'll write it as zero nine now again we'll add the delivery time we need some extra space between the pickup time and the delivery date so i'll give a double space so i'll give it as 30. and then once this is done we will add an expanded widget and then we leave it in place so the next container would be aligned to the bottom so let us add a row let us add a size box here and then again let us add a button i can probably copy it from this place now this should say place order and on on click of this button i want it to navigate to the order confirmation page so let us create a new document great now we again need the app bar now this should say order confirmed and then let us create the body of this page let us create a column and create a container of same as that of the document size and height 200 we will create this page actually so we i'm creating the image i'm importing the image first and then let's add this text let us give it a spacing your order has been placed and we now we'll add the style we already have the content style and then we'll add the alignment i want it to be center now let us add a size box over here we need the order id to be displayed and then on the right side we have a box and then the order id displayed in it so we will create that uh let us add the child that is the text widget i want the color to be white good and then if you notice that we have a divider here and then a space between these widgets so i'll create a divider widget now sorry now this divider widget would be a line with a margin at the top and bottom so i'll give it as a symmetric vertical 15 probably and then height would be one color as gray so once this container is over we can add a divider widget now we need some more rows just below the divider widget now we don't need this container and we don't need the color to be white it needs to be black so let us first add clothes count that was seven and then again we'll have to divide a widget here now let's add the final amount and then let us again add another divider now let us create a column widget now if you notice that the pickup date and time is actually inside a column so we are writing a column instead of a row here you i want it to be a little bit smaller so i'll define the size and i want the color to be gray great now again let us add a divider which are just below the column now again we have a row saying the payment method so i'll just copy this great and now let us create an expanded widget because i want the widget just below that to be at the bottom part so i'll create an empty expanded widget now just below this we'll add the button which which would navigate the next page we'll just look for the inkwell and then let us paste it here and this one should say track order now let us create another new document track order page now let us add this here again we'll have a scaffold we also have the app bar so i'll just copy it now let us create the body of the scaffold let us give a padding of all sides with 20 let us create a column widget i want the cross axis alignment to be on the start over here let us display the order number let us give it a gray color hmm now just below this text let us add a container now this is the divided part just below this container let us add a stack this stack i'll add a container first over here if you notice we have a gray color line so i've added this here and then in the stack let us add a column widget now this would be the name of the image and this would be the title this would be the status let us copy this let us define this widget it would retain when it would return a container the first parameter would be the image second one would be the status and the third one would be the active or inactive state let us create a row and that let us add a container we will first create the circular object as displayed here so let us write decoration box decoration shape also to be circular now the color if it is active it needs to be orange or else it would be gray or yeah white this would be the color now let us add a border again for the color how if it is active if it is active i don't want the border and if it is inactive i want the border to be orange color let us add a width of three now once this is done let us add a size box of width 50 now let us add a container now let us add the image here now we have all the images in place and let us add the contain right now we will add a text here that will display the status now again if it is active it needs to be orange else it would be black in color now just below the status let us add a container that is same as the divider now let us add a row now we'll create these buttons cancel order and my orders then below the box decoration let us add the child i want the color to be orange okay and now let us add another container for the right side we don't need a border for this but instead we need a color orange and this should be white in color this should say my orders now we also have the bottom navigation navigation bar we'll add that okay this is the onboarding page you have the login you can also sign up if you want we have the home page and in place order we have all the products listed we have the pickup date and the delivery date widgets this is the order confirmation page you can also track your orders here so that's it for today thank you for watching you

Channel: Kaushik Chandru

Views: 21,243

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, iron shop, laundry app, laundry flutter, ironing, cloth flutter, washing flutter

Id: 1Fyh1T80jhA

Length: 124min 53sec (7493 seconds)

Published: Wed Aug 12 2020