Building a Responsive Dashboard UI App with Flutter | Step-by-Step Tutorial

hey everyone today I'm excited to guide you through the process of building a responsive dashboard UI app using flutter we will be creating a fully responsive user interface that adopts to various screen sizes providing an optimal user experience whether you are a beginner or an experienced flutter developer this tutorial is designed to help you create a sleek and modern dashboard UI so let's Dive Right In the first step is to set up your project and manage assets first of all we will remove the default Cod that is generated by flutter after that inside the material app we will replace the title with the dashboard UI text we will also set the debug show check mode Banner to false after that within the theme data we will set the scaold to a darker color but this is in a good practice to use hard-coated variables for your app themes therefore to write clean and efficient code we will create a constant folder within the lip directory and here we will create constant. do file here inside we will Define different colors that we will use throughout our application apart from the colors we will also Define a default padding that will stay consistent through the application now coming back to our main file here we will replace the color with the background color that we defined earlier in the constant file and for the brightness we will set it to brightness. dark because we want our dashboard to be in a dark theme now for the home property of the material app we will pass here the main screen which we will create separately therefore we will create the screens folder within the LI directory and inside we will create main screen. dot file here we will create a class main screen which is a stateless widget and it returns an empty scaffold for now with this we don't have the red erors now and we have created the basic structure of our dashboard UI but still there is one thing left that is assets management therefore we will create an assets folder within the root directory and inside we will create two folders one for the icons and other for the images inside the images folder we will add the Avatar that we will use letterer as our profile picture and within the icons we will add all our icons that we will use letter within the dashboard UI well that's pretty much it for the assets management but don't forget to add your ass folder within the Pol file otherwise it will not work now let's run our app to see how it looks like for the emulator we will use our browser so that everything is clear right now it's completely black because we are not adding anything but the good news is that we don't have any errors that means we are good to go to our next step which is adding the essential dependencies therefore we will go to our PSL file inside our dashboard we will have a different graphs and flow charts to achieve this we will make use of the FL chart package therefore under the dependencies we will or package apart from this we will also need the flutter SVG package because we will be using some icons in SVG form therefore we will add it within our psml file well that's it for the dependencies now let's go to the interesting step which is designing the dashboard UI first of all let's plan our dashboard UI we will start with the desktop mode and later on we will adjust our dashboard UI to the different screen sizes let's get started basically we will divide our main screen into three parts on the left hand side we will have the navigation menu where we will have different options to select as this is the fitness dashboard UI where you will see the progress of your Fitness therefore in the middle we will have a search bar also a detailed information about the calories burn steps distance traveled and also the sleep tracking along with that we will have a line chart representing the steps overview and lastly we will have more bar graphs that will represent your progress after that on the right hand side we will have a pie chart which will represent the summary and along with that we will have have a scheduled task that needs to be done well this is the plan now let's get to code therefore let's go to the main screen here inside the scaffold first of all we will pass a safe area widget to the body of the scaold and inside we will pass a row widget because we want to divide our main screen horizontally for this we will make use of the expended widgets because expended widgets are really helpful when it comes to building a responsive apps for the first expanded widget we will give it ax equals to two because we want the navigation menu to occupy only 16% of the available screen size and for the child we will pass a container fidget with a color to see the basic layout after that for the middle expanded widget we will have the details and information of the fitness progress we will give it a flex of a s because we wanted to T 58% of the available space on the screen size same like other we will pass a container widget as a child of the expended widget with a color blue to see its result lastly for the other expended widget we will give it a flex equals to three because we want it to take 25% of the space available on the screen and for the child we will give it a container vet with a color green after hard reing here you can see that we have a successfully splitted on M screen into three parts which are responsive to the size of the screen well with this now we have the basic layout ready first of all let's get started with the side menu we want our code to be clean and evic therefore we will create the widgets folder within the lab directory and here we will create a side menu widget. dot file inside we will create a start widget which will return a container widget for now now returning to our main screen here inside the expanded widget instead of the container widget we will pass a sized box widget and for the child we will pass a side menu widget it's all done after hard loading here you can see that we have our side menu appear but we want to show some data inside our side menu text along with the icons therefore we need to create a model class for our side menu data for that we will create a model folder inside the lip directory and here we will create a menu model do do file inside the sign menu we will have a text along with the icon therefore we will create a class menu model and inside we will add both properties icon and a text and then we will mark it required within the Constructor now we have our model ready it's time to add the data therefore we will create the data folder inside the lip directory and here we will create side menu data. file here we will create a class side menu data and inside we will create a list menu of type menu model that we just created earlier and here we will call menu model and pass relative data to the required parameters we will repeat the same process to add other data as well that's it we have the side menu data ready now it's time to visualize it inin our dashboard UI for that we will go to the side menu widget within the build method first of all we will create an instance of the side menu data because we will be using that here after that within the container widget we will pass a list VI Builder as a child of the container widget for the item count we will make use of the data do menu to access the list from the dat class and then length to access the length of the list for the item Builder we will pass a widget build menu entry which we will create down here and it will take data and index as arguments therefore we will pass the required arguments now coming to the build menu entry widget it will mainly return return a Ru widget and inside a widget first of all we will access the icons using the icon widget and inside we will use data. menu to access the list and then we will make use of the index and lastly do icon to access the icons we will also give it with a color after each icon we also want to have a text therefore we will make use of the text widget and inside we will access the title of each menu item using the index here we will also give it a custom text style after hard loading here you can see that we have the data loaded within our side menu widget but as you can see that the icons and the text are very close to each other therefore we will wrap the icon with a padding widget and we will give it some padding and now here you can see that it's perfect to make it a little bit down from the top we will add padding to our container widget and now as you can see we have our data but when we click on it we are unable to select any item from the side menu and we want it to be selectable and more interactive therefore coming back to the side menu which first of all on the top we will create a variable of type integer named selected index and initially we will set it to zero after that here within the built menu entry Vin we will create a buan is selected and we will check if the selected index is same like the index then we will set the is selected bullion to true now let's WRA our R widget within the inl widget and for the on T function we will return a switch step method and here inside we will assign the index of the selected item to the selected index with this we will be able to click on the items but we also want to change the color and the text style once we click on it to make it more interactive therefore within the icon Viet for its color we will check if it selected is true then we will return a black color otherwise we will return a gray color same goes for the text we will check if it selected is true then we will return a black color otherwise we will return a gray color and also for the phone we also want the selected item to be highlighted properly therefore we will wrap the ink widget with a container widget and we will give it a box deoration inside we will give it a border radius and for the color we will check if it selected is true then we will return a selection color that we have defined earlier within the constant file otherwise we will make it transparent we will also give the container a little margin to make it look good after hard loading here you can see that we have all the items the first item is initially selected and it is highlighted we can select any item accordingly and with this we are done with with our side menu next we will start working on our main P for that we will go to the main screen and here inside the expanded widget instead of the container widget we will pass a dashboard widget which we will create separately in the widgets folder and here inside we will create a class dashboard widget which is a stess widget and it returns a column widget now let's look at the dashboard UI first of all we need to have the search bar on the top therefore let's go to the dashboard widget here inside the column widget within the children first of all we will create a sized box widget with custom hide to have some space in between and after that we will create a headed widget which we will create separately and it will contain the search bar therefore we will create a header widget. dot file within the widgets folder and inside we will create a class header widget which is a stateless widget and it returns an expanded fidget inside the expended vidget we will pass a text field as a child of the expended vidget we also need to stylize our text field therefore within the decoration we will pass the input decoration and inside we will set the FI property to True after that for the pill color we will set it to card background color which we have already defined within the constant file same for the enabled border border Focus border for the content padding we will set it to agent x. symmetric and then vertically to file H text will be searched and for the prepix icon we will pass the search icon with a custom style and after hard loading here you can see that we have our search bar on the top as we expected now let's look again at the dashboard UI so after the search bar we have the activity CS which showcases different accordingly now let's see how we can achieve this therefore coming back to the dashboard widget and here inside the column widget after the header widget we will add another size box for the custom height to have some space in between after that we will C activity details card which we will create separately therefore we will create activity details card. file within the widgets folder and inside we will create a class activity details card which is a stateless widget and it return the container for now here we will showcase health related data of the user therefore we also need need the data to be added within our application but first we will create a model class for that therefore within the models folder we will create health model do do file and here inside we will create a class health model with the three attributes icon value and title and then we will mark it required within the Constructor now we have our model class ready it's time to add our data therefore we will create a health details do do file within the data folder and inside we will create a class Health details inside the class we will create a list and then we will make use of the motor class and pass the relative data to the required parameters we will repeat the same process to add more data in the list well that's it for the data management now let's visualize it for that we will return to our activity details card widget and here inside the build method first of all we will create an instance of the health details class because we will be using it here after that instead of returning a container widget we will return a grid view. filter widget for the item count we will access the length of the Health Data list we will also set the shrink rep to true because we want the grid View to take up only the required space to fill items in the scroll direction for the physics we will give it a scroll physics to have default scroll physics for the grid delegate we will use SL grid delegate with the fix cross AIS count and inside we will set the cross AIS count to four for the cross AIS spacing we will set it to 15 and Main exess spacing to 12 for the item Builder we will return a custom carard widget which we will create separately therefore we will create a custom card widget. do file within the widgets folder and here we will create a class custom card which is a stess widget and it returns a container widget for now we will also add a few properties like child a color and a padding and we will mark it required within the Constructor after that within the container we will give it a box decoration with a border radius and and for the color first we will check if we have received the color then it's fine but if it's null then we will assign it the card background color that we have defined earlier in the constant file for the child we will pass the Ping widget and inside we will do the same if it's null then by default we will have the ENT sex start equal to 12 for the child we will pass the child that we get from the outside and with this we are done with a custom card widget now it's a reusable widget now coming back to the activity details card widget for the custom card it requires a Char therefore we will pass an empty container for now to see the results after hard learning here you can see that we have four beautiful containers now we have to showcase the activity data inside therefore we will go to the activity details card widget and here inside the container widget we will pass a column widget first of all we will set the main access alignment and cross access alignment to the center because we want our data to be in the center after that within the children of the column widget we will add our icons and for that we will make use of the image. asset and inside we will provide the path of the icon using the H data list to access each icon we will make use of the index and lastly do icon we will also specify the width and height of the icon after hard reloading here you can see that we have our icon within the container below the icons we also need to showcase the value therefore we will make use of the text widget and inside we will access the value from the he data list using the index and lastly do value we will also give it a custom text style and lastly we will wrap the text wiget with a pairing to give it some space in between lastly under the value we also need to showcase the title similarly we will make use of the text widget to access the title of each value with a custom text style and after hard reloading here you can see that we have our activity details within our dashboard UI well that's it with the activity details now let's go back to the dashboard UI under the activity details we have the line chart which showcases the steps overview on the monthly basis now let's see how we can implement it therefore let's go to the dashboard fidget here after the activity details card we will add a sized box for the custom P to have some space in between and after that we will call line chart card widget which we will create separately therefore we will create line chart card. R file and here inside we will create a class line chart card which is a stateless widget and it returns a container widget for now here we will showcase over viw of the steps on a monthly basis therefore we need the data to be added within our application therefore we will create linechart data do do file within the data folder and inside we will create a class line data inside the class we will create a list spots and inside we will call F Sports which take two values X and Y therefore we will pass some random values we will also add some more random values within the list we will also create another list left title and inside we will add some key value pairs that will go on the left of the line chart same for the bottom we will create another list bottom title and inside we will add more key value pairs that will go on the bottom of the line chart well that's it for the data management now let's visualize it for that we will return to our line chart card file and here inside the build method first of all we will create an instance of the class line data because we will be using it here after that instead of returning a container widget we will return a custom card widget and for the child we will pass a column widget now inside the column widget first first of all we will set the cross access alignment to cross access alignment. start and inside the children we will add a text widget for the text we will use the steps or View and for the style we will give it a custom text style after that we will add a sized box wiget with the custom he to give it some space in between now here we want to show the line chart therefore we will make use of the spect ratio widget because we want to give it specific WID to high ratio to our line chart for The Shard we will pass line chart fidget which comes from the FL chart package and inside the line chart fidget first we will specify the line chart data inside we will set the handle build in touches to true because we want it to be interactive after that for the grid data we will use app grid data and inside we will set the show flag to false because we don't want any grids then for the Titus data we will pass FL titles data basically we have four types of titles for the client CH there is top titles bottom titles right titles and left titles here in ourc we only want the left titles and the bottom titles only the therefore we will set the top titles and right titles show flag to false because we don't want to show it within our chart for the bottom titles we will used exess titles and inside we will make use of the side titles property here we will set the show titles to true and for the get titles widget we will return data from the list that we have created earlier which is bottom titles we will check if it's not equal to null then we will use the S title vdet and inside we will set the access side to meta do access side and after that we will access access the text within the text fidget we will also give it a custom text style and if it's null then we will return a sized box fidget we will also do the same for the left title as well but this time we will make use of the left titles list that we have created earlier and with this we have our titles good for the Border data we will set it to fals after that we have to deal with the data for that we will use the line bar data which take a list and inside the list we will pass the line chart bar data first of all for the color of the line we will set it to the selection color that we have defined earlier in the constant file for the bar width we will set it to 2.5 which is the width of the line we also want the line to cast a shadow type color which really looks interesting therefore we will make use of the below bar data which takes a bar area data and inside we will give it a linear gradient for the begin end and two colors we will also set the sh flag to True otherwise it will not show up we don't want any dots appearing on the line therefore we will set the show flags of the dot data to fall lastly for the spots we will pass the data from the spots list now coming out of the line bar chart list we will specify the Min x max X Min Y and Max y to specific values after hard loading here you can see that we have our line chart ready and we can see the values that we have defined by hovering over the line now returning to the dashboard UI under the steps overview chart we have these three bar charts representing different things now let's go to the implementation to see how we can achieve this bar charts therefore let's go to the dashboard widget here after the line chart card we will add a sized box of custom height to have some space in between and after that we will Car Bar grab card widget which we will create separately therefore we will create bar grab widget. file and here we will create a class bar grab card which is a stess widget and it returns a container widget for now here basically we will showcase the activity level nutrition level and hydration level data of the user therefore we need the data to be added within our application but first we need to create a model class for that therefore within the models folder we will create a graph model. do file and here we will create a class graph model which will take two attributes X and Y which we will Market required within the Constructor after this we will create another model class Barra model do do file within the models folder and here inside we will create a class paragraph model which will have three attribute a label color and a list of graph model that we created earlier now we have the model classes ready it's time to add our data therefore we will create Barb data do do file within the data folder and inside we will create a class bar graph data inside the class we will create a list data and then we will make use of the model class bar graph model and pass the relative data to the required parameters the first one is for the activity level and for the list we will make use of the graph model which will take two values therefore we will give it random values same goes for the nutrition bar graph and hydration level bar graph lastly we will add another list labels which will go for each bar chart well that's it for the day data management now let's visualize it for that we will return to our Barra widget and here inside the build method first of all we will create an instance of the class Barra data because we will be using it here after that instead of returning a container we will make use of the GD wheel Builder and for the item count we will use the length of the Barra data that we will also set the shrink rep to true for the physics we will set it to the scroll physics for the grid delegate we will pass L grid delegate with fixed cross access count and inside we will set the cross access count to three for the cross access spacing we will set it to 15 same for the main access spacing and for the child we will use the S spect ratio we will set the width to high ratio equals to 5x 4 for the item Builder we will pass a custom card widget that we have earlier created for the pting we will set it five for all the SIDS and for the children we will pass a column widget inside the column widget first of all we will set the cross access alignment to cross access alignment. star and after that we will access the level of each bar RAM for that we will make use of the text widget with a custom text styling and we will also wrap the text widget with a padding to give it some spacing around after that we will add the size boook widget with a custom head to have some space in between the text and the graph and now it's time to add our barram for that we'll make use of the expanded widget and inside we will pass a bar chart as a child of the expanded widget which comes from App chart package first of all we will specify the bar chart data inside for the bar graphs property we will pass chart groups which we will create separately here we will create a list chart groups of type bar chart group data and it will take two arguments one the list of the grop model and another a color and it will return a map that we pass to it for the bar RS we will use bar chart Road data and inside we will pass point at y to the Y property and for the width of each bar we will set it to F we will also give it a color but first we will check if the value is greater than four then we will set the opacity of the color to one otherwise we will set the opacity to 0.4 which will be less visible after that we will also give it a border radius and lastly we will convert the map into a list now returning to the bar chart data here inside the chart groups list we will pass the points and the color to the required parameters after that we will give it a border using the Border data property we will set the show flag of the F grid data to false because we don't want any grid within the charts after that titles data comes in which is same four titles top bottom left and right for the bar charts we only need the bottom titles for the each gr therefore we will access the titles that we have defined earlier using the text widget and give it a custom text style for the other titles we will set the show flag to fals to hide them from the chart and with this we are done we will go to the dashboard vet first of all we will WRA the dashboard wiet with the padding and we will give it a symmetric horizontal padding to have some space in between the s menu and the summary vidget after that we will wrap the whole vget within a single child scroll view which will make it scrollable and solve or pixel overflow problem after hard loing here you can see that we have beautiful three bar chart representing data of the user and with this we are also done with our main part of the dashboard next we have to work on the right part of the dashboard UI for that we will go to our main screen and here inside the expanded widget instead of the container widget we will pause a summary widget which we will create within the widgets folder and here we will create a class summary widget which is a stateless widget and it returns a column widget let's have a look at the dashboard UI first on the top we have the pie chart and then we have more summary details this part is more like a summary of all activities of the user well let's get to the implementation therefore coming back to the summary widget here inside the container widget we will pass a column widget as a child of the container widget and inside the children of the column wiget first of all we will pass a sized books wiget and after that we will pass a chart wiget which we will create separately therefore we will create py chart widget. do file within the widgets folder and here we will create a class chart which is a stat loose widget and it returns a container widget here we will display a summary of all activities in the form of a pie chart therefore we need the dat to be added within our application for that we will create a pie chart. file within the data folder and inside we will create a class chart data inside the class we will create a list pie chart selection datas and inside we will call pie chart selection data widget and pass some random values to the relative fields we will also do the same for more random values here within the list well that's it for the data management now let's visualize it for that we will return to our pie chart widget and here within the build method first of all we will create an instance of the class chart data because we will be using it here after that instead of returning a container widget we will return a size books widget with a custom height and for the child we will pass a stack widget for the children of the stack first we will pass a pie chart widget which comes from the FL chart package and inside the pie chart widget we need to pass the data for that we will make use of the pie chart data widget and inside we will set the section space equal to Z for the central space we will set it to 70 for the start degree upset we will set it to - 90 and for the sections we will access the data that we have already defined using pie chart data. py chart selection datas and with this we have our pie chart ready after hard loading here you can see that we have our pie chart ready but we don't have the person within the middle of the pie chart to fix this we will return return to our pie chart widget and here inside the stack widget we will make use of the position. buil and for the child we will pass a column widget inside the column wiget we will pass two text wigets one representing the percent of the pie chart with a custom text text style and other text fidget will access the total perc which is 100% And with this after hard loading here you can see that we have our person text inside our pie chart and with this we are almost done with our pie chart now let's have a look at the dashboard UI under the pie chart we have a text and then we have the summary details so let's add this to our dashboard UI coming back to the summary widget here under the chart fidget we will add a text fidget with a text summary and we will give it a custom text style and with this now we have our summary text now we want to add the summary details therefore we will add a Siz box after the text fidget to have some space in between and after that we will carve summary details widget which we will create separately within the widgets folder and here we will create a class summary details which is a stateless widget and it returns a custom card widget inside the custom card we will provide a custom color to the color property and for the child we will pass a row widget first of all we will set the main access alignment to main access alignment that space between so that we have our summary details equally sped after that within the children we will car a build details fidget which we will create separately and it will Tex two values a key and a value and it will return a column widget and inside the column widget we will make use of the text widget to access the key and the values in between we will add a sized work to have some space now returning back to Oro widget inside the build details we will pause the data and after that we will call build details F three more times and each times we will pass different values and with this we are done with our summary details make sure that we wrap our summary widget within the Ping widget after hard loading here you can see that we have our summary details available within our dashboard UI which is wonderful now let's get back to the dashboard UI to see what do we have next well we are almost done with everything now we just need to add the schedule task under the summary widget therefore let's go to the summary widget and here under the pading widget we will add a sized box widget with the custom pile to have some space in between the widget widgets after that we will call a schedule widget which we will create separately therefore we will create schedule widget. do file within the widgets folder and here inside we will create a class scheduled which is a stateless widget and it Returns the column widget for now as we also have some Demi data that will be showcased within the dashboard UI therefore we need the data to be added within our application but first we need to create a model class for that therefore within the model folder we will create a shule model. do file and here we will create a class schule model with two attributes title and de and then we will mark it required within the Constructor now that we have our model class ready it's time to add our data therefore we will create schedule task data. do file in the data folder and and inside we will create a class schedule task data inside the class we will create a list scheduled and then we will make use of the motor class and pass the relative data to the required parameters well that's it with the data management now let's visualize it for that we will return to all schedule widget and here inside the build method first of all we will create an instance of the schedule task data class because we will be using it here after that inside the column widget first of all we will set the cross access alignment to the Cross access alignment. start and after that within the children of the column widget we will add a text widget with a text schedule and give it a custom text style after the text widget we will add a size board with a custom height to have some space in between and after that we will make use of the four Loop first we will create a variable index and then we will set it to zero then we will check if index is less than the length of the schedule list length then we will increment the index and as a result we will color all custom card inside the custom card for a color we will give it a black color and for the child we will pass a column widget inside the children of the column widget we will pass a row widget and then once more we will pass a column widget within the row widget to make or text in a column and as well as in the row and then within the children we will make use of the text widget and inside we will access the title from the schedule list using the index and then we will give it a custom text style after that we will add a s box with a custom height and again we will make use of another text vet and this time we will access the de of the task Vin using the index and then we will give it a custom text St and lastly we also need every schedule task to have a more icon therefore within the row widget at last we will make use of the icon widget and inside we will access some more icon after Harding here you can see that we have our shedu task also ready here well we have successfully designed our dashboard UI which looks really great but still there is one problem and guess what responsiveness building dashboards is easy but then making it optimal and responsive so that it can be used on variety of devices is more technical as we have our desktop version ready now we will make it responsive so that we can use it on a tablet and a phone as well therefore we will create a folder util and inside we will create a responsive. do file here we will create a class responsive which we will use throughout our application to make it responsive mainly we will focus on three layouts desktop tablet and mobile and each layout will have its own breakpoint that we will Define within the responsive class we already have our desktop version ready now we will focus on a tablet and a mobile layout therefore we will create a Boolean as mobile which will take context and then we will access the device screen width using the media query. off context. size. width and then we will compare it with 50 if the screen width is less than at50 it mean the device is a mobile and then therefore his mobile Boolean will be set to true so for the tablet we will create a Boolean S tablet which will take context and then we will access the screen size using the media query. off context. size. width but this time we will have two condition if the screen width is less than 1100 pixels and the screen width is greater than 850 pixels then it means the device is tablet thus is tablet bullan will be set to True same goes for the desktop mode therefore we will create aoan s desktop which will take a context and then we will access the dev screen size using the media query. off context. size. width and then we will compare it with 1100 if the screen width is greater than or equal to 1100 it means that the device is a desktop therefore is desktop Boolean will be set to true well we have set up everything now it's time to utilize in first of all we will go for the tablet layout let's have a look what we want exactly with the tablet layout we want to hide the s menu and the summary widget from the right so that we have n up space for the middle part the side menu can be accessed from the draw whereas the summary widget will replace it to the bottom of the main part and we can still see the summary widget once we scroll all the way down now we know what needs to do therefore let's go to the main screen here first of all we will create a volum is desktop and we will call is desktop M using the responsive. is desktop and inside we will give it a context basically it will return true if the screen size is greater than or equal to 1100 as we defined earlier now coming to the body of the scaffold for the side menu we will check if is this stop is true means that we are running our app on a desktop mode then we will have the side menu otherwise we don't want it to be appear on the tablet or mobile mode now let's try it out after hard loading here you can see that when we shrink our app the width of the screen becomes smaller the side menu is disappeared now we will do the same with the summary widget we will check if the is desktop is true means that we are running our app on a desktop mode then we will have our summary widget because we have an app space otherwise we don't want it to be appear on a tablet and a mobile mode now let's try it out again after hard loading here you can see that when we shrink our app the summary widget is also disappearing which is great but still we want to access the details within the tablet mode therefore to access the side menu we will make use of the draw property of the scaffold and here we will check if it's not a desktop which means it's a tablet or phone then we will pass a side box with a custom width and inside we will pass the side menu widget as a child of the sized box widget if it's false that means the the devic's desktop then we will return null now we have added our side menu to the drawer it's time to add the menu icon to the header so that we can open the draw therefore we will go to the header widget and here first of all we will R the text feed with expanded widget and then we will put it inside the row widget we want our menu icon to be in the beginning of the row widget but first we will check if the current device is not a desktop means it's a phone or a tablet then we will add an icon widget and inside we will access the icon do menu we will also give it a color and a custom size as well we will also wrap the icon widget with the padding widget after hard loading here you can see that we have our menu icon appear but we cannot click on it to fix this we will get back to our icon widget and we will wrap it within the anql widget we want to open the draw when we click on this icon therefore within the on T function we will use scaold doof context. Open Drawer method to open our drawer we will also wrap the whole widget within the padding and inside we will specify padding to the right only to have some space between the icon and the text field with this we are all settled after hard loading here you can see that when we shrink the device withd we have our side menu and summary widget disappeared but we have our menu icon on the top and when we press on the icon we have our side menu appear but still we cannot see our sumary widget in the tablet form therefore we will go to the dashboard widget and here first of all we will add a size box widget with a custom hand and after that we will check if the current device is tablet using the responsive class and we will access the S tablet method and inside we will pass the context this condition will be true if the device is taet and then we will add the summary widget here with this here you can see that in the tablet mode we are still able to see the summary widget once we scroll down well we have our tablet layout ready next we have to work on the mobile layout because here you can see that when we shrink our device screen size everything gets overflowed and our app crashes before getting started let's have a look at the phone layout here you can see that when we shrink our device screen size we are getting overload issues with the activity details rectangles and the information is also not so visible therefore first of all we will fix this for this we will go to the activity details card and here inside the grid view builder for the cross access count we will check if the current device is phone using responsive. is mobile and inside will pass context if it's true then we will set the cross access count to two otherwise we will keep it four same we will do with the cross access spacing and with this after hard loading here you can see that once we shrink the device screens we have our activity details changes into two rectangles per row which looks really great now and even the information is visible we can also access the side menu from the side menu button which is amazing next we also want to hide the search bar and have a search icon instead in a mobile layout for this we will go to the header widget and here inside the r widget we will check if the current device is not a mobile and then we want to have our text field search bar and if the current device is mobile phone then we will will have an icon button with the icon search and on T function also we need to set the main access alignment of the parent row which is to main access alignment. space between so that we have space in between once we hide the search bar after hard reloading here you can see that we have our search bar but when we shrink the device to the phone size then we have the search icon button which looks great but still there is one thing missing we don't have the sary details and we don't want it to be under the charts because on the phone it will be a lot of scroll L therefore we will add another button on the top right corner and when we click on it we will have our summary widget open to achieve this first of all we will go to the main screen and here inside the scaold widget we will make use of the Endra property here we will check if the current device is mobile then we will return a sized books widget with a custom WID and for the child we will pass the summary widget with this we are done here now we will go to our header widget and here we will check if the current device is phone we will wrap the icon button within the r widget and after the icon button we will add a circular Avatar widget for the child we will access the image from the assets folder and we will also give it a width of 32 therefore we will WRA Avatar with the anql widget and for the on tap function we will use a scaffold do off context.of and draw method and with this here you can see that when we shrink our device screen with we have our Avatar appeared on the header and once we click on it we have our summary widget open and we can see all the details well we have a fully responsive dashboard UI now which we can use on variety of devices for example desktop tablet mobile let me remind you there is much more that we can do to improve the responsiveness of our dashboard UI but I hope you guys have found this tutorial helpful you can also check out the source code of this dashboard U guys to understand the concept and play around with it

Channel: HeyFlutter․com

Views: 16,165

Keywords: FlutterDashboard, FlutterUI, Flutter dashboard ui, flutter fitness dashboard, dashboard in flutter, flutter dashboards, fitness dashboard, flutter dashboard tutorial, flutter dashboard design, fitness ui design, flutter dashboard desgin, flutter responsive dasboard, responsive design flutter, flutter responsiveness, flutter responsive ui, flutter dashboard responsiveness, flutter responsive desing, flutter dashboard ui, futter fitness dashboard responsiveness, flutter, dart

Id: fVZqxpNdD6c

Length: 38min 52sec (2332 seconds)

Published: Sat Mar 02 2024