Responsive Dashboard UI | Layout builder | Flutter Tutorial.

hi everyone welcome back to my channel in this video I'll be talking about how to create responsive UI with flutter as you can see here this is my application which is running in mobile view and when I will expand this this is the tablet View and the bottom part is coming just beside and again if I will expand this to the desktop view then you can see that there is drawer which is already open and the button for opening draw is also removed we do not have to press that and in Mobile mode when I will tap on this then drawer will be open in the mobile mode there is same so in this video we will create responsive UI with the help of flutter and also I will share the code with you on git so for this let's get started right after this [Music] intro [Music] so first of all we will create new project in Android Studio new flutter project it is already selected flutter next and then let me provide the name of the project I'm using responsive app and make sure that all four are selected for web Linux it is completed let me close this now it is Android selected let's move to project and here you will see all the folders including live and for web Linux iOS Mac OS and here you can run your app in Chrome let me run this it will take some time because you're running your app for the first time [Music] this is the basic application counter [Music] app and it is running in my Google Chrome browser refresh and command save will definitely going to work so let me shrink it it is working on mobile mode also so what I will do I will remove all the code let me shrink this this one also and I'll select and remove these codes and also this line instead of this I will create new screen do file home is screen let me take it as state full widget home screen let me import some necessary things here let me provide some value inside this scap fold definitely it will take inside and also I will provide this home screen in this material [Music] app add constant to remove this warning now let me run this there will be a blank screen because we haven't added anything inside our [Music] scaffold let me align this so that I can show you output Side by site inside my home screen and in this scaold inside body I'm taking Center and as a child of Center I'll use text and inside this text [Music] I'm typing like this is [Music] responsive and app okay let me run this it is showing here now I will going to create folder let me name it responsive and in inside this I'll create dot file [Music] responsive [Music] layout okay it it would be a stateless [Music] widget and for handling the L layout I'm creating this responsive layout let me import this let me remove this [Music] line we will create this widget for mobile I'm using mobile scaffold for passing the widgets for mobile tablet and desktop let me copy this and for tablet tablet scaffold and for the desktop I'll be using like desktop [Music] scaold and in this build function let me remove this before that let me create the required field here responsive layout oops [Music] okay okay and then [Music] reord this do mobile scaold requir this dot tablet and the last one for the desktop for passing the wigets of all the three devices like for mobile tablet and desktop now inside this build folder inside this build function I'm using layout Builder and Builder will take here Contex text and constraints constraints cly bres I'll apply here [Music] condition F constraint dot Max [Music] width I'm checking here first condition for the mobile constraints do Max WD uh less than 500 okay then I'll return mobile SCA fold and L safe for the tablet if constraints do Mac XX width is less than [Music] 1100 then it will return tablet scafold and rest in the else part other than any constraint oops let me remove this else it will return desktop scaffold okay we are done with this responsive layout and let's move into main function fun here initially I passed home screen so it is not in use for now so I'll remove this we will use responsive layout instead of this responsive layout and it will ask three wigets mobile tablet and desktop so for creating that I'm creating new DOT file inside this responsive folder so first will be for mobile scaffold I'm creating this layout for mobile and uh then I'll create for tablet and desktop respectively now I'm creating for mobile so I've given the name mobile scaffold and the second one this one is mobile scaffold and and the second one is tablet [Music] scaffold okay and the third one is desktop scaffold all three layout is created now inside each of them I'll code separately so inside mobile scaffold I'll use here State full widget let me name It Mobile [Music] scaffold import this package and inside [Music] return let me remove this I'll use your scaf fold and inside this let me set the background for now for mobile colors do orange I'm taking the background with shade 200 let it be colors. orange for now for mobile scaold and for the tablet we will set another background so this should be stateful widget and tablet Square fold import the package let remove this instead of this I'll use scaffold and inside this as a background I'll use different color so that I can show you the effect of responsiveness when we will move from Mobile to tablet then desktop the background color will change in tablet I'll be using colors. purple with shade 400 okay and in the dektop it would be also State full widget with desktop scaffold name for package and let me remove this instead of this I'll use scaold and as background [Music] colors do [Music] gray oops let me remove this not gray yes now I will call these screen this SCA folds mobile tablet and desktop from my main function as these are the required parameters that we will have to pass so for mobile scaffold I'm calling mobile scafold class that we have created again for the tablet and for the desktop for tablet tablet scaffold and for the desktop desktop scaffold let me provide the parenthesis the brackets okay so error has gone now let me mun the code so starting it is purple so it is in the tablet mode so when I will increase the WID when it reaches to the desktop mode more than 1100 the color changes so this is the desktop scaold now and this one is a tablet and let me show you the mobile scaffold let me inspect this it is not going further now this is the color that we have set for mobile scap fold here you can see that when I will remove the decrease the width it is changing from Orange to purple and then gray let me close the inspect element I will and handle it in my responsive layout class that I have created for now I'm taking here 500 what I will do I'll increase the width 700 now here it is the orange color this is the mobile mode my browser is not shrinking let me check it with 600 it is also working and I have changed the background color for mobile orange do shade 200 and for the app bar I'm using here app bar and the background color I'm using to mobile scaffold colors dot orange and shade 900 let me run this it is visible and in the main [Music] function debug show check mode Banner Falls to remove this tag in the corner after that inside body I'll use drawer [Music] but before that let me add title for the ab bar text widget inside this I'm typing here mobile view so I will change the app bar title also when it changes from Mobile to desktop to tablet so for mobile view I'm using mobile view text and draw I'm using here draw viset and the background of the drawer would be colors dot orange with shade of oops shade of 200 let me add the wigets here as child first of all I'm adding here column because I want to show multiple data children inside this first of all all I want to show my logo dra header as a child I'll be using icon so icon [Music] dot flutter [Music] icon flutter Dash let me see what kind of Icon it will provide there is a draw when we tap on this this is the icon let me increase the size of the icon little bit so size let me make it to 50 now let me run this now it looks good okay so I'm I have added this draw till now in mobile view it will not be visible in tablet and desktop so after that inside D I'm adding list title and Below header draw header list title leading I'm adding here icon icons do [Music] home and then title dashboard [Music] okay there is some error it will actually take widget so we'll have to pass text widget title text widget and inside this I can pass my text which is dashboard dashboard and I'll copy this list [Music] style let me provide constant so that I can remove this Waring lines let me copy this list style and I'll add four times because I want four options here let me rename it course and also change the [Music] icon for the third one settings and also the title be change settings and the last one I want to show it as profile you can customize it in your own way profile so now let me run this [Music] now when you tap on draw these are the [Music] options now I will create [Music] another directory M folder by the name reusable let me remove it utils where I will put my all the repetitive codes inside this I'll create dot file constant UI constant UI [Music] okay and because I want this drawer in Mobile tablet and desk desktop so I will copy this and inside this let me create a [Music] variable common draw and paste it here import the package and you are good to use this common draw in your mobilea full tablet and desktop same as we will do for abar common [Music] abar let me copy it from [Music] here I also want to change this text dynamically for mobile tablet and desktop view so I'll copy this and paste it here all good and I want to make this text dynamically so that whenever I'll use app bar in Mobile I'll pass the text mobile view and respect respectively for tablet and desktop top so let me take here common string abar title text let me provide it initially empty string and I'll use here instead of this [Music] now inside mobile SCA fold I'll use the string here abar title text and we'll pass the string like or we can do do one more thing my app bar Common App bar yes this was the app [Music] bar so this is my app bar and after that or I can do one thing I'll create separate function for my app bar so that I can pass my string in this so it's return return type is abar let me copy this and I'll have to provide return value let me remove this [Music] return in this way you can use function you will have to pass the string here for now title remove the extra space and abar title will be replaced by title now whenever you will call common AB bar you will have to pass the string let me remove [Music] this that's perfect so inside mobile scafold let me remove this and inside Common App bar I will have to pass the string as title so here I'm passing mobile view and same as for Dra let me remove this and instead of this I'll be using common drawer let me run [Music] this everything is fine now I'll make the changes in the tablet scaffold [Music] also want to provide that background I'm creating here common background so that I can pass this color to each scaffolds for mobile tablet and desktop now I'm using common background which with shade of of 200 orange color with shade of 200 so this is my common background me copy this and instead of this whole line I'll be using common [Music] background no semicolon just comma yes now let me do let me move towards this tablet careful remove this background color and instead of this common background and also for abar common AB bar here I'll pass strings oops like table tablet view yes sorry for that tablet view now if we will expand my app to the table view as you can see here the app bar text is changing now for the D it is not visible here because we haven't implemented in tablet view so inside this tablet scold We'll add d as common draw and now you will see that in my tablet view this draw is also available now we'll implement this appar and draw in desktop view so for background common background and the app bar common AB bar with text Dynamic which is desktop view because now we are implementing these things in our desktop scaold for desktop view and let me add dra so here I'll be using row because we want our draw to be already open because there is lot more space so inside row children and then I'm using here common draw because in my desktop view I want draw to be open automatically there will not be any button for opening and closing the dra now when we will expand this to the desktop view till now this is tablet view here you can see the draw is already open and the button for draw is no longer visible now I'll add some more UI in my mobile [Music] view so for that I'm using column children and inside this I'm using xpect ratio aect ratio is one actually I want to show grid view so we will have to provide some vdet then we can use grid view inside that then as a child I'm using your size box and width would be Infinity double do [Music] infinity and child of the this size box is grid [Music] view so for showing grid view you must have to use widget grid view. Builder and let me align this grid delegate would be silver grid delegate silver grid delegate and this one with fixed cross access count okay and cross AIS count for now I'm using two because I want two column so this defines column cross AIS count and item Builder context and [Music] index early Braes and we'll have to return the UI what kind of UI we want to use in this grid view so for now I'm using container ER and color I'm taking here colors dot orange same as AB bar you can replace it with the ab bar color you can make it in constant UI variable but now here I'm not going to do that you can do it if you want so I'm using here colors. orange so let me run the app so this Implement for grid view is done in Mobile scaffold only now it is our grid view we will have to add some padding padding of it [Music] now let me [Music] reload this is my grid view with C cross AIS count two I'll create new DOT file in the utils for reusing widgets let me provide the name here widget [Music] boxes it would be a stateless kind of widget class name would be widget boxes import the package and remove this line and we will copy this padding code from here and we'll paste it here and rather than using this code in all the three scaffold widget we can use it widget boxes for showing this grid view in all the three mobile tablet and [Music] desktop let's close this widget boxes and inside this mobile scaffold I have added here item count 4 for grid view because I want to show four item and if I'll commend this and you can see that my grid view has infinite scrolling so for providing separate number of wigets that we want inside grid view we will have to pass this value item count now I want to show list so for this I'm creating another file videt list so again it would be stateless wiget and name of this class would be wiget list so that I'm creating separate file so that I can also use this UI in different View mobile tablet and desktop so in this from viget boxes I'm just going to copy it and this time let me import the necessary package and this time I'll provide height for this container and color will remain same and height I would like to provide 100 and we will call this class from my mobile scaffold so inside my column and after this aspect ratio for grid View I'll call expanded and then as a [Music] child so list [Music] view do Builder item Builder and it will take context and index so pass the context and index and then curly braces and inside this return and we'll call my widget list here and finally I'll have to provide item count inside here list we Builder so after this line yes item count for now I'm taking five so let me [Music] run [Music] now you will see that after this grid view this is my list view now let me close this widget list and after that this is my mobile SCA fold and when I'll expand this there is nothing in tablet View and desktop view as well I just want to copy this column because this is the UI for grid and list which is visible so now in the table scaffold as a body I'm passing the same same column having grade View and list view so let me import these wiget boxes and widget list now let me run the app this is mobile view and when I'll expand this to tablet mode this is my tablet mode there is some overflow error is coming so we will fix it so here item count is four and aspect ratio is one and for tablet I'm using aspect ratio 4 now after reloading let me expand this again there is only two grid wigets is visible so we'll have to handle this also so inside this cross axis count I'll use four instead of two because this time I want to show all the four grid widget in one row let me expand this in the tablet view as you can see that this is my G in a single row now now when I will expand this to desktop there is nothing so we will do coding for the desktop mode also again I'll copy this column and we'll paste this inside desktop scaffold but after this common draw because this is in row and let me import the widget boxes and widget list now let me run this as a body we are taking Row for desktop scaffold now when we will expand this from mobile view to tablet view is this it is looking nice and when I expand this to desktop view think there is some error it is not visible so I guess I'll have to handle this so let me expand this column and I'll have to wrap this in expanded wiget now let me run this and when I'll expand this to tablet and then desktop view now it is visible it looks good in the desktop view you can also see grid analyist and also the desktop area has some more space so I want to apply some more extra wigets on the right side of the screen so for this again I'm using expanded and as a child I'll use here column children and inside this again I'll use expanded and as a child let me align this do a child of this inner expanded widget I'll use container and the color of this container same orange color and as a child I'll use here I want to show some text so I'm taking here Center wiget and then as a child of Center I'm using text widget and I'll use some text for showing purpose like extra data that's it let me run this so now when I will expand this to desktop mode there is an extra data vet available as you can see that the middle part of the widget containing grid and the list is quite a small so I'll provide here the value of flex of two so that it will achieve some more area as compared to extra data widget now it looks good it is looking fine in desktop view and same I will have to manage that extra data widget in in tablet View and mobile view so for that I'm just going to copy this expanded widget which contains extra data wiget and also I will have to wrap this column inside row and let [Music] me now after this expanded I will paste after this column basically let me paste the extra data viget and now and let me run this now when I'll expand this in tablet view there is some issue I think so let me check I'll have to wrap this column also inside expanded now let me run this and after expanding this tablet view here extra data wiget is coming it is taking lot more space so in the expanded of grid View and list view I'll add Flex value of three would be fine let me check with the four and when I'll expand this it's not looking good so I'll use flex value three contrl save let me check it once again now when I'll expand this in my tablet mode it is looking fine now we'll have to manage mobile view only and there is also some scrolling issue so inside this mobile view I'll wrap this column with single child scroll view let me remove this expanded widget from here inside this listb Builder shrink WP will be true and physics will be never scroll physics okay and let me run this and now it is scrolling [Music] perfectly and after that I will have to add that extra wiget that I have copied from desktop scaffold again there is some issue I okay actually I will have to remove this expanded widget let me remove this let me remove this column and rest of the part is fine this no I will have to remove this expanded widget and this is the extra space I'll have to provide some height here with this container let me provide it 500 height now let me run this so this is this is my extra widget in mobile view now when I will expand this to tablet view my extra data widget moves toward right hand side and when I expand this little bit more then my navigation drawer is opening automatically so this is it in this video I hope that you must have learned something related with layout Builder you can play with it there are several kind of things so for this that's it in this video please subscribe to my channel and hope to see you next time in our next video bye for now [Music]

Channel: thecodeme

Views: 590

Keywords: flutter, flutter tutorial, flutter for beginners, flutter animation, flutter app development, dart language, easy UI with flutter, learn with flutter, make app with flutter, package of the week flutter, flutter package of the week, flutter design of the week, flutter user interface, Layout builder in flutter, layoutbuilder in flutter, responsive user interface in flutter, responsive ui in flutter, responsive app for desktop in flutter, flutter layout builder

Id: 6Ts0S1XzOL4

Length: 60min 2sec (3602 seconds)

Published: Wed Jan 10 2024