Flutter UI Design Tutorial - Flutter Dashboard UI 2023

assalamualaikum and welcome back to coding with t in today's tutorial we are going to design the dashboard in flutter so today's tutorial is going to be very informative and very useful for those who are new and also for those who are expert and want to create some complex designs because we are going to cover multiple limitations in the design so first quickly have a look what we are going to create so this is our splash screen we are creating the login photo application and after the splash screen this is the welcome screen we have already created all the videos related to all the designs related to authentication which contains login sign up you can see this is the sign up that we created then we have a login with the transition effect forget password email and also OTP screen and then inside the login we are assuming that let's say user provides the credentials and credentials are true and use it click on this login he or she will be redirected towards this screen which is the dashboard and this is actually the today's tutorial that we are going to learn okay now let's try to divide the layout structure at the top first we will create the app bar with the background and an icon and then we have two texts and after that we will try to learn how to create this type of search box which has a container with the left border search button and then we have an icon and then we are going to first learn how to create this type of design and after that we are going to make it using list view screw label then we will create Banner with a button View all with the top courses you can see again we are going to create this type of cards which are scrollable using the list view so this is what we are going to learn today we are going to learn multiple Concepts inside it so let's get started as you can see we are creating the login playlist and we have created all the design features on the left side and then I decided to also create this dashboard design because it will be much more logical to design this with a design section so after this we are going to jump towards our backend which is the flutter back end and we are going to implement all the features you can see inside the backend portion so this is what we are going to create and above all the key feature is that at the end whatever we create in dashboard we will make sure that it is a clean code then we will create our custom widgets then we will also use light and dark theme or convert our design towards the Dark theme so this is for the playlist make sure to watch the video till end without wasting time let's get started okay so we are inside the project we created for our photo login application and if you are following the series you know the drill we first have to add all the constraints and all the assets first go to assets folder and inside the images as we add all the previous images I have created a dashboard and inside I have added all the required images you can get all these images from codingmittee.com so after adding the assets go to pubswick.dml file if we add a new folder as we added a dashboard so we have to Define inside flutter assets and path to our folder after this we will jump towards the lib folder which is the main folder and inside our source folder structure if you are following this folder structure then this portion is for you and if you're not following the folder structure you can paste your code wherever you want to paste it but for the constants we are going to use the card background color which we have already added then in the image strings all the images have been added over here and same in the sizes I have created two dashboard sizes dashboard padding and dashboard card padding and then in the text strings all the text is over here right we just have to use these variables so let's close it close the constants go to features and previously we were creating authentication features and inside the screen you can see we created login sign up welcome splash screen onboarding forget password with bunch of other fields so this design has already been completed but whereas the dashboard is concerned dashboard is not related to the authentication right controllers all the logic will be inside this controllers model is just for the mapping and then in the screens I have created this dashboard folder and then we have a empty dashboard.file so let's start with our dashboard. it is a simple status widget and inside the scaffold you can see we have a container the first thing is we want to wrap this container with a widget which is a single charge scroll view because our design is going to be scrollable because we want to add a padding and as a padding we are going to use the variable which is T dashboard padding its size is 20.0 or before start coding with the our main layout we first have to create an app or inside the airport the first thing is we want to add a leading property leading icon which is a simple icon which is icons dot menu and its color is black after this reading icon let's add a title as a title I use a text which is a t app name and then the style is headline four which is theme dot of context because we already created a theme so I will use headline 4 now to place this title in the center we have a center title property make it true so let's run the application as you can see this is a splash screen and after splash screen we are inside the welcome click on login and we're going to click on this login you can see this is the app bar that we are creating next we want to remove the elevation to 0 and also we want to remove the background color unless dot transparent let's save it and you can see background is gone and also the elevation is gone okay now inside the action we are going to create elements towards the right side of the appar so to create the element or to create a button on the right side you can see basically we have a background color and then we have an icon on it right so for the background we are going to use the container to add a border radius and also a background color we will use which decoration property used by box decoration border radius will be border radius dot circular and it will be radius as 10 then use a color color will be the card background color Ctrl alt L to align the code after that expression let's add child as a child I am going to use icon button it's on rest will be none and as I can as icon is a widget so I am going to add image okay the image we have used asset image and in the asset image the variable we have created inside our constants image strings so now let's save the code you can see image has been added with the background color but it is currently aligned towards the top and also towards the right side so inside the container we have a property called margin so you will use the margin same as operating agents x dot symmetric horizontal will be 20 and vertical is 7. let's save it and you can see it has been shifted towards the left side you can change this symmetric to only and inside this horizontal you can say from the right 20 and from the top is 7 so it will be much better so a bar is ready now we can close this app bar and start coding towards our the main body of the dashboard so the first thing is that we have to make sure that all the elements go vertically so as a child we are going to use column property column align all the elements in a vertical Direction so first one as a children of the column let's add text T dashboard title control D to duplicate change second one to T dashboard heading let's save it and you can see we have both elements but they are not currently in the left side so to make it in the left side as a column direction we will use cross axis alignment cross access alignment dot at the start save the code and it is shifted towards the left side now let's add the theme as a style we'll use theme dot of context dot text theme so in the whole application we will keep repeating this line text theme and then we are going to use text theme dot whatever we want to use headline body text or whatever we want to use so instead of repeating this again and again let's cut it from here inside this build method create variable final text scene and that's it now we have the text theme over here we don't have to repeat it again and again so we can simply call text theme dot body text to and same for the second one instead of body text tool we are going to use headline to let's save the code and you can see our theme has been applied after this we need to add some space using a size box we will use high property and I am going to use dashboard padding because it is 20. at a constant now the next thing we want to create is a search box so for the search box you can see the design is in a horizontal Direction so we have first icon so we have one border then we have a text and then we have a I can write okay so first thing for the search box we have to create the borderline so we will use container for that inside the container we have a decoration property use a box decoration you know inside this box decoration I added a border so border will be only are you added left side and as a water side width is 4 let's save it it's currently not visible because container does not contain any child widget after this decoration let's add a child and we have two properties one is text and the second one is the icon so we will use row as a children of the row let's add a text e dashboard search as a text and then as a style we are going to use text theme again dot add line two let's save it and you can see we have a text and we also have a left side border now in here you can see we are using the headline two as a text theme which is the main theme but we want to change its color so what we can do is it is a nullable so add a question mark dot we have apply property so we can apply whatever we want to change we want to change its color so as a color we will use colors.gree with opacity 0.5 let's save it and you can see color has been changed now we can also add a padding next to this decoration inside the container let's add a padding first as insect dots symmetric horizontal list 10 and vertical is five let's save it and you can see we have heading inside our container so search have some space from the left side so as a row we have a first element which is a text now as a second element we have an icon icons dot mic and size is 25 let's save the code and you can see the mic has been created but to push it towards the right side will use its main axis alignment main axis alignment or space between save the code and you can see my case towards the right side so okay so our search button or the search bar has been created let's add a comment okay after the search box we are going to create the categories for the categories because we have a small button you can say a chip but it is a custom chip so I am going to use a size box with a specific height and width and inside the search box we have two properties the one is the box which contains a simple text and then we have on the right side two properties so we will use as a child of this we are going to use row row Place elements in a horizontal Direction so as the children the first thing we need to create a container so this container with a width and height but you can see the width and height is not exceeding this width and height now turn it radius and add a background color you can see we have already created inside our app bar so we will use same decoration with the Box decoration property and we will add a border radius border radius dot circular and also we will add a background color as color property D dark colors now let's save the code and you can see your box is created with the bottom radius and a background color press Ctrl alt L now inside this container as a child we are going to use Center property to make our text in the center so as a center we will use the center text let's say first one is Javascript let's save it current not visible because it is already in the black colors so let's turn it to the style property text theme dot add line 6. again we're going to change its Style with the apply property and return the color as white let's save it and you can see we have Js written in the center okay now as a row you can see our first element is created as a container but as a second element we have two texts so we will use column to create two text in a vertical Direction first thing is cross axis alignment to align them on the left side dot start and then in the main axis alignment push it in the center main X is Dot Center let's save it it is in center but we want to add some space use a size box this time we're going to add a bit width as 5 let's save it and you can see it's pushed towards the left side now the last thing is we want to style this text and the style we will use text theme dot headline six and also for the second one we will use body text too let's save it and you can see our design has been applied okay here you can see we write JavaScript which is hard coded let's say the length is going to exceed this 170 what we're going to do so for that we have property called overflow and we use overflow dot Ellipsis and with the Overflow we use oh text overflow dot Ellipsis so whenever this text is going to exceed the size instead of crashing the application instead of showing that this many pixels have been overwritten it will add dots next to the text so we will use this same for the second one let's save it and just for the example let's add something extra let's save it so this is the error you can see it has been overflowed by 34 pixels towards the right so this Ellipsis is not working because we have to wrap our column with a widget called flexible so now we have our column is flexible let's save it and you can see dots has been added change back the text so we'll wrap it in the widget so to wrap anything in another widget Alt Enter wrap it with the column because it has a children attribute and also list view has a student property so once right when we are going to save you can see it's cone because we have an error inside the run method you can see render box was laid out but it has gone offside because because the vertical viewport was given unbounded height so what does this mean is that we are going to use elements in the vertical Direction which is a single child scroll view at the top and also this list view is going to take the maximum space available towards the vertical so it is no unbounded means that list view is try to capture whatever the possible size towards the vertical so that's why it's giving an error so first thing is we want to change its scroll Direction on axis dot horizontal because we want to shift it towards the horizontal side also we are going to remove the shrink wrap as true so what this shrink wrap is going to do it is going to load only the elements currently visible on the screen to increase the speed now let's save it and this time you can see constraints dot bounded height is not true so this means that still it is going towards the vertical size its height is not next so what we're going to do is we will wrap this list view again with a sized box and this time we are only going to provide its I and the maximum height which is 45 let's keep the 45 on all the places now let's save it and you can see it's visible again and our list view is ready so this is the children of the list queue so after completing the design we will convert this list to list view dot Builder but for now let's paste it to two times or maybe three times let's save it and you can see our wrist view is working very fine now let's minimize it also minimize this search box add some space at the bottom okay after this we are going to create a banner so for the banner we have divided so we have two banners one is on the left side and one is on the right side so this means we are going to use row to divide them in horizontal Direction now inside the row we have children's we are going to create two children's this means that two cards the first one is the main card and then we have a column which will contain one card and one button so let's create the first container and this container is also going to have a border radius and a background color so so the decoration have a border radius which is circular 10 and then color has a card background color we're going to save it but it's not going to be visible because nothing is added inside it next we have to add a padding padding will be again symmetric horizontal as10 now we're going to save it but currently you can see we have only small color visible as a child of this container we are going to add a column because we have to align elements towards the vertical Direction so for the first one we have a row which is which will contain icon on the left side and image on the right side so first child is a row okay the first image is created with the bookmark icon control D to duplicate and change it to T Banner image one now let's save the code and you can see the error which is overflowed by 276 pixels because it they are not flexible the image sizes are big and they are not currently containing inside this container so the first thing is we want to make this container to wrap this container with the expanded widget so it should not again going to Unbound the width property because we are using two rows so we will wrap this container in an expanded let's save it nothing changed now we can easily wrap the image with a property flexible so it should only contain the space available and also for the second one rapid with the flexible let's save the code and you can see we have two images the first one is unable to load okay just hot restart and icon has been displayed so we have two icons or two images being displayed but they are not currently aligned as we want so inside this row we can add space between so we have main axis as Min X is alignment dot space between you can see we have a space but also we want to make sure that the these elements are on the top so this bookmark sign on the top left corner so for that we will use cross axis because row is inside the horizontal Direction and cross axis will be vertical so when vertical is at the start this means at the top and you can see it is at the top first four is created now it's time for the second one add some space then we will add a text Ctrl D to duplicate and it will be Banner subtitle save it and you can see we have two elements but we want to because it is inside this column so column cross access alignment which will be horizontal should be at the start so all elements should start from the left side as you can see now let's type the text text theme dot add line four will be used and body text 2 for the subtitle after this we want to make sure that this Max lines should be 2 it should not exceed the max lines which is 2 and also we will use the Overflow text overflow dot Ellipsis now this overflow will start working when the two lines has been exceed and this is going to work right after the one line so we can also mention over here which is very good practice which is Max lines as one save the code so first box has been created okay so this is the expanded which is the first children which has been created now we are going to use another one which should also be in the expanded to cover the equal space now for the second Banner we have one container which is a card and second button so we will use column and inside its children we are going to use the first one will be container and this container is the same as at the top with the decoration and a padding and when we are going to save you can see this is the text color and this is the banner that we are we have created shifted towards the left side the text has been broken to two lines and it's not in the ellipses and this is in the first line right now we are going to design this one and also this should start from the right top corner so inside this row we will use the cross access alignment dot start save the code and you can see this color has been jumped words at the top and also between these two expanded we want to use size property or to add some space using a size box with dashboard card reading let's save it and you can see the little space has been added so these are flexible because of the expanded widgets we have wrapped them in the expanded okay next same like this one we have inside this container we have a row which is going to contain all the elements so I am just going to copy it from there as a child of this container I am going to paste it bookmark will be same Banner will be same there will be no spacing between image will be Change Control order to align the code and let's save the code and you can see our second Banner has been created but this time you can see we have Max lines as two but we'll convert it to one so one is by default we can easily remove them Control Alt L to align so we have these two texts change the text title to two let's save the code and you can see we have one winner and two winner now this Banner will have a button at the bottom after this container we are going to add outline button phone press will be nothing and as a child let's add a text text HD dashboard button let's save the code and you can see button has been created which the view all now to make this button full width we will wrap this button with a size box and width of the sidewalks will be double dot Infinity let's save it and you can see button has been expanded now after the banners same we are going to add some space first the next one is the top courses the first will go the heading simple text so as a text we are going to use headline 4 you can see the text but to increase its size we are again going to use dot style dot apply and as a font size Vector so this factor is going to multiply whatever the size of the font is so one means that it is not going to change its size so 1.2 means size will be multiplied with the 1.2 and increase little bit so this is the heading size that we are going to use okay now as we have a scrollable effect you can see over here that we created scrollable list already so we will again use list view for that but first let's design the card as a design we are going to use a size box with some width and height okay then as a child Locker size box we are going to use a container again this container will have some radius and also will have some background color using a box decoration so this container is going to have a circular border again with the 10 radius and padding will be 10 from all the sides now let's save it and you can see over here that it has been expanded because we have a width as 320 and height as 200 as a child again we are going to use column because our elements in the vertical Direction as a children's of the elements all the elements should start from the left side so we will use cross access alignment dot Stark as a children of the column the first one is row because or in the banner card we designed two images the first one is the label image and second one is I'll create an image but this time in the row it's not two images it's one text and second image right so as a shield Children of the rule first one is our text as a style we will use headline four so we'll use text theme dot headline 4 Max lines will be 2 and overflow will be Ellipsis control order to align after this textbook okay as an image we have used asset image and it has a d course image we have already added and height will be 110 when we are going to save it you can see we have one image and one text again we are going to use as a cross axis alignment to make sure that element should start from the right top corner or success alignment dot start you can see when I am going to change the size from 16 to 18 now headline 4 contains 18 as a headline so you can see it is now going to overflow by 16 pixels on the right so we have to Simply wrap our text with a widget called flexible or you can use expanded so flexible is recommended it keeps the aspect ratio Flex expanded is going to expand on all the available space same we're going to grab this image with the X click flexible let's save the code and you can see our image is now looking perfect but in the row we want to make them shift towards on the left and right side so we'll use the space between as the main axis alignment in the row space between let's save it and you can see images shifted towards the right side and text is on the left side now the first row is created let's close it now let's create the second row now inside this row we will use children as the first one will be elevated button on pressed is nothing either text we as a child we're not going to use text but we will use icon icons dot a arrow so elevator button will be on so this is the icon that I'm going to use let's save it and you can see make it circular and pull on ever first however inside this elevated Button as a style use elevated button dot style from and simply as a shape we are going to use Circle border right save it and you can see we have a button which is circular which is elevator but after this button we have some space using a side box now after this we have two texts so we will use column to align them vertically as a children of the columns first thing we want to make sure that it should start from the left side with the cross access alignment at start so the first one is child sorry user text so the first one is three years so the first section is a headline four and second one is a body text two again with the ellipses in both text let's save it and you can see it is looking perfect the second card has also been created now let's close this card which is a toe course card you can see the card has been written again we want to make it or again we want to wrap it in the list view so we will simply wrap this widget with a list view so again to wrap it with the list view Alt Enter wrap it with the column and change this column to list view let's save it and you can see again it is going to be crashed because when we're going to see the error inside the run at the top you can see this time vertical viewport was given unbounded height so again this list view has a vertical Direction and also we are using scroll view is a single scroll view so it's again going towards the vertical so it cannot cover the maximum space because space is unbounded so we'll first use the scroll direction as access dot horizontal we want to scroll is horizontally and also we'll use shrink wrap tutu by this way we cannot solve the error again the error is same so remember we have to wrap this with the widget which is a size box and again we have to define the height property which is 2 in this case let's save it and you can see our card has been now displayed error is gone let's again for the example copy this and paste it three times let's say you can paste it more times we're going to scroll it you can see we have charged but there is no space between so we can add a space easily inside this sized box we can wrap this container with a widget or padding and instead of having padding from all the sides let's say we only want cutting from right as 10 and also from the top as five let's save it and this time you can see we have a space between so we can easily copy and paste it as many times as we want now this time you can see we have all the courses being placed so this is the design now okay now in here you can see our code has been two cluttered if we want to change something let's say anything between let's say we want to change the color of this Banner so we have to go through all this code and we have to find it and then we are going to add it so first let's try to convert them into widgets one by one let's close the body the first one is the app part so we right click refactor click on this extract filter widget name a dashboard appar click refactor so we have a stateless class limited which is a dashboard app bar and is being used over here but you can see it's giving an error which means that we have to use this preferred size widget so no problem inside this dashboard we are going to implement it as referred size widget when we are going to implement it we have to override a function so you can hover over it click click on this create override method it is going to Simply get the preferred size and in size we can say size Dot from height you can give any height you want I am going to give it 55 add a constant and that's it you can see the error has been gone at a constant now I bar has been dislocated okay now let's cut it from here go to dashboard folder inside the widgets create a new file appbox dot dot paste it inside this class import all the required dependencies so our bar has been created now over here we also have to import that dependency so app bar is created now the next one is let's leave headings over here because there are only two lines we don't want to change it the next thing is this search box okay so I have simply converted all the files into separate widgets you can see we have all the widgets over here inside this widgets folder okay once the design has been created now let's try to shift all the widgets or all the required list views into list food or Builder so the first go to categories and you can see I have hard coded these three size boxes and this is the list view so we will simply convert this list we want to listview.builder this means that this is not going to require children's anymore so we have to paste these files one by one so instead of duplicating everything inside the list photo Builder first let's try to add all the values go to models create a new directory dashboard and create a new file called the categories models and inside you can see I have added title heading subtitle and on press and also all these W values so this means that for the now these are the Demi values I have created a simple list of type dashboard categories and this is a simple Constructor so this dummy values is for now but when we go to fetch the data from Firebase or from any database we will map this data using this list view towards our categories right so now we're going to head towards the listview.builder inside let's try to first get the list we want to get this list which is a static so we will simply call this dashboard categories dot final list is equal to dashboard categories Dot so it's a dashboard model so you change the name from dashboard categories to dashboard Motors because we have a dashboard categories over here so we'll get the list like this inside this list we have all the elements either fetched from database or created locally it's up to you inside the rescue Builder we have item count so this is necessary because otherwise it is going to crash after some items so item count is list dot length and instead of this children let's create an item Builder the first one is the context then index and then in here we are going to paste this size box so let's close this copy the search box from here and also I'm going to comment it for now let's paste this size box and now in here you can see we have all the elements inside the list so what we can do is using this list we are going to replace all the elements first one is a title so how we can replace it list or index Dot title so this list is basically the list we provided we created over here with a list index is the index of this item Builder which is the first one in this case and then title will be replaced then this is the heading and this is submitting and because we want to make it clickable so we can easily wrap this size box with a widget called gesture detector and on Tab we have list of index dot on press so basically this on Price is also been created with avoid callback which is nullable and you can see it is also provided null over here now let's save the code and you can see the first one is Javascript then flutter then HTML code link and all the values we defined over here so this is how we map using the listview.builder so also this is for the categories now we are also going to change it for top courses and you can see the first one is petrol price course then we have HTML CSS image has also been changed and then we have material course and also images change all the content as we change so this is what we learned today I know this tutorial has been very huge but those who follow till end thank you for watching that's it for today's tutorial you can see our design is pretty much clean and pretty much responsive I hope you learned something new if you learned something new please like the video and if you are new to this Channel please don't forget to subscribe because more amazing videos are coming and from next tutorial onward we are going to start the back end which is the Firebase and we are going to learn lot of things about the Firebase as well don't forget to subscribe and hit the like button you can get the code from the description below thank you for watching take care Allah please

Channel: Coding With T

Views: 20,782

Keywords: flutter ui, flutter ui design, flutter ui design tutorial, flutter dashboard, flutter dashboard design, flutter dashboard ui, flutter home screen design, flutter responsive ui, flutter ui design tutorial for beginners, flutter ui design 2023, responsive dashboard ui, responsive dashboard ui flutter, flutter app, flutter app 2023, flutter app tutorial 2023, coding with tea, coding with t, flutter ui 2023, education app ui design, flutter tutorial for beginners 2023

Id: 7587ynOHhAo

Length: 34min 8sec (2048 seconds)

Published: Tue Oct 11 2022