[Part 5] Flutter Web Tutorial - Build Portfolio Website in Flutter #flutterweb

now we have both desktop and mobile version of our header widget but it's not responsive yet I mean when you change the window size it doesn't do anything it just shows this mobile uh version of our header widget because that's what we are doing here so what we want to do is based on this window WID we want to show mobile or desktop version of our header widget so to achieve that functionality we need to use uh layout Builder widget which gives us screen size or window size information um that can be used to manipulate uh our UI all right so for that we can wrap our scaffold widget with that layout Builder widget so I can wrap my widget or my scaffold with Builder and instead of this Builder I will use layout Builder all right this layout Builder has Builder property which passes us two parameters the first one is context and second one is uh constraints constraints all right constraint something like this so This constraints contains information about the screen size or this window size and we are going to use that to manipulate our UI so I come here and comment out this header desktop and I actually make it const and here I will uh use a condition if constraints I'll get the max uh width uh this will give us uh maximum width available in our uh window here because we are wrapping our scaffold basically this window uh this Windows Max width uh is equal to this Max width that's coming from constraints all right we're going to check that if that is bigger than or equal to 600 so this 600 will be our uh maximum uh or minimum Des desktop with all right we are going to show this header desktop else if that's not the case we are going to show this header mobile all right now if I save it and come here if I change the window size when I reach to certain point you can see uh we are seeing our desktop version of our header widget so if I make it small now we have mobile version desktop mobile something like that okay I found this 600 as the best fit uh for my preference so you can actually change it uh to any value you want okay so another thing I want to do here is this drawer mobile because we don't want to have this widget on desktop we only want to show this on mobile right that's why we can set a condition here as well so I'm going to use the same condition I'll just copy it in if that let's check it here end drawer right uh this end drawer can take widget and that widget can be null as well and here I will put the condition constraints Max width is if bigger than or equal to 600 I'll check it I'll use tary operator here and if that is the case if this is desktop this is saying if this is desktop I will use null I will assign null to this end drawer because I don't want any drawer to show up on desk toop right so and else we can use this drawer mobile all right now if I save it nothing changes here because uh if if we press it it will show the drawer if we close it it's not going to be available here right so if we make it now that means we do not have uh this draw we have no widget that is assigned to this end drawer and that means uh we C we do not accidentally uh what is open the sidebar or drawer actually on flut you can in flut you can actually slide uh this side and you can uh get the sidebar open all right that's we want to prevent uh that from happening that's why I set a condition here all right so we can make this smaller again and here another thing we should do uh when we uh have these kind of things uh this kind of what is it some hardcoded value we want to put that hardcoded value in a variable we want to assign that to a certain variable and use that variable and that's a good practice because uh if you want to change that value in some place let's say if you want to change this um I mean globally let's say and then uh you need to change that value every in every place so that's why we can actually come here to to constants folder and there we can create another file size. Dart you can name it whatever you want and here I will create a new const uh variable it's going to be double and I can name you can name it whatever you want I name it k. minan K minan uh desktop uh let's say desktop not that desktop with and it's going to be uh six 100 all right now we can use this variable every time we need them because actually we need this 600 value in in quite many places because we are making our website website a responsive right so that's why I will replace this 600 with that K uh main desktop width and I'll import that and I'll use the same thing here as well just like this all right now if we reload it we should have the same functionality as before you can see here it is working as before that's it

Channel: Shohruh AK

Views: 948

Keywords: flutter, flutter dev, coding, programming, mobile development, android app, ios app, web app, web development, frontend developper, mobile applications, flutter coding, how to code, how to create flutter, flutter widget, flutter functions, cross-platform application, flutter website, javascript, html, css, python, docker, react js, dart, dart and flutter, deploy flutter, flutter google play, developper life, Shohruh AK, shoha dev

Id: F5H_wdRwLgU

Length: 6min 6sec (366 seconds)

Published: Tue Nov 21 2023