Create Responsive Flutter Apps 🖥📱(Livestream)

hello everyone welcome to another uh live stream with he flatter team today we are going to talk about uh how to build a responsive app with flatter uh on desktop mobile and tablet devices today's live stream is going to be really interesting why because we are going to discuss about so many things about responsive and flatter all right if you guys remember a few days ago we posted in our community uh and ask you guys uh what kind of Life stream do you like the most and most of the people voted for having topic based life stream so yeah today we are here with a topic based live stream about how to build responsive apps with flatter all right now let's go to the next uh next slide here before we get a started let me walk you through the table of contents so as you know as you guys know in this live stream we will dive deep into understanding of responsiveness and flatter so first of all we need to explore the basics of responsive responsiveness which means what is the responsive design and why it is really important in development next we are going to talk about flatters approach to responsiveness uh which means how flatter deals with responsiveness of apps after that we are going to have the most interesting part of this live stream and it in and in this section we are going to have a project a dashboard and in the and we are going to make this uh project uh responsive with explaining the key concept of responsiveness after that we will discuss the best practices and tips uh which which uh which will make you uh which will make you to just which will which help you to uh learn more about responsiveness and make you to create your application responsive in a shorter time and in the last part uh we are going to answer your question in a q& a session all right uh now let's go to the next slide first first let me introduce myself my name is Ramin I am a flattered developer for four years and now I'm acting as a flatter and extractor in the hay flatter team for almost two years so let's get started with the actual content but first of all let's see the basics of responsiveness so uh let's go to the next SC here I have added this gift image which represent demonstrating and it demonstrate the that respons the responsiveness as it like adopt it size to to different screen sizes to the tablet and also to the desktop so in the word of flter also it's all about how your app adopts to the different devices screen sizes and orientations it's about like ensuring that your app looks good and function just as well on a tiny smartphone as it does on the large tablet or even on a desktop computer so let's go to the next slide and here you might be thinking why this is so crucial uh you would be thinking that why responsiveness is so important so there's like few things that makes it very important so first of all let's imagine uh users are interacting with your application on variety of devices from the smallest smartphones to the largest desktop screens and everything in between but your app does not adapt to these screen different screen sizes and orientations it can result in it can result in a poor user experience and the people will does not like it that's where responsiveness comes into play ensuring that your app is user friendly across the board apart from that we uh then we have this wider audience reach uh which means that if your app is responsive people are going to love it and use your application and even they will recommend your application to other peop which will result in the reach of wider audience that means that a lot of people will use your application and last but not least uh adaptability to the new devices nowadays every companies are like a lot of compan comp are building phones with different features and different screen sizes every phone is different from the last phone and another phone so if your uh app is responsive if you build your app responsive then you don't have to worry about this problem because it can adopt to any device so rymen these were like the basic things about the responsiveness now you can just Enlighten the flutters approach to the responsiveness specifically all right thank you so much sad now let's shift our Focus to how flatter handles responsiveness and this is where flatter truly shines because flatter is a popular UI software development kit by Google it means giant Google framework it is really a powerful framework so now in this slide you can see and most of you guys know the widgets are the building blocks of our flatter application so I can say 100% that flatter gives us a lot of ways to make our app respon responsive uh and if you go to the next slide I can just give you one of those important thing the media Cy with this media quy we are we can uh we can get the device constraints for example we can get the screen size and also the device orientation this is one of the most important uh things in the flatter next we can go to the next slide and here you can see two widgets the layout Builder and orientation Builder which these two widgets are really helping us to make our application responsive with the layout Builder we can just uh make some uh Point like break points for different screen sizes or for different uh devices for mobile uh for this Des toop or tablet to just display our widgets in these kind of devices and the other one orientation Builder it will adapt to just and check the orientation of our devices it will check if it is in the landscope mode or uh portrait mode now we can go to the next slide yeah next to this built-in widgets which flatter has we have some extra packages the responsive Builder and responsive fra framework work uh package these two are really famous and strong packages with these two packages we can uh create or make our application responsive in a shorter time let me just share my screen here and as you guys see uh we are already in the pop. de website and when uh and we can just uh simply search for this responsive keyword and after that you can see a list of packages which all which all these packages are helping us to just make our application responsive and in these packages we can see this responsive Builder this one and also the other one responsive framework packages these are the famous One why because they have a lot of flags and it means so many developer are using using it and it is uh why they're using because they're stable and really powerful let's go into one of these uh packages for example the responsive Builder so for using this uh package first of all we need to add this package in our Pops speeco file as you are as you guys already know about this and after that after we are installing this package so we are allowed to use this responsive Builder widget and inside this widget we we can just have some condition and based on those condition we can just manage how to uh adapt our uh widgets in our application for example if we want to just display our widgets in a desktop mode we can just have this condition and also for the tablet and even for the watch devices which are really a small uh which has really small screens but still we can just yeah somehow manage our widgets St next let's just go through the another uh package which is really important the responsive framework this is also almost working the same first of all we need to go uh and add the this package in our Pops specto file and after that we need to go to our material app as you can see here and using this responsive breakpoint Builder which after we are installing this package we can access to this responsive breakpoint Builder and inside this widget we can just Define our custom break points for example we can just create for our mobile devices for tablets and desktops and later on in our in our application we can use this break points and somehow manage and adopt our widgets for example here as you can see there's an small example uh for the Mobile screen size we will have this item and we will display items in this way and yeah that's all from these uh two packages now let's go with uh with our interesting part which is uh showing which we will show our one application and uh we are going to make this application uh uh uh responsive and now I'm going to give this stage to him just just uh remember to be in this live stream till the end and watch it to just learn a lot about the responsiveness and flatter okay s you can go on okay thank you so much rymen uh first of all let me just share my screen so you guys can see uh right yeah it's visible now so in today's live stream we are going to build uh this UI dashboard I've already built but now we are making it responsive but first of all I need to show the output of this uh you dashboard UI and how it will look after we make it responsive so as you can see if uh I I'm already running it in the web view because this is the easiest way like I can just manage the screen size and make it U shrink shrink it and then I can expand it to test the responsiveness of the application so let me just shrink to show you the output of this uh dashboard UI if I just shrink it uh here you can see that the side menu is getting disappeared so why because we do not have enough space available that's why we are making it responsive and we are hiding the uh side menu and we are just like we are having this menu button if we just click on it it is appearing again so this is how we can make this uh dashboard UI respon so and if we just like shrink it more Shinken more here you can see that it is getting responsive and it it will look something like this in the tablet mode but when we just like shrink it more to the phone uh mobile mode you you guys will see something like this the storage details the storage details will be will be hidden from this and it will come uh like uh below this recent files and let me just show that again if I shrink it here you can see that it's responsible it is disappeared from the right hand side and we can see it in the bottom of this uh recent files so this is the U Das UI mainly we would be making it responsive uh we are having this side menu we are having this dashboard screen on the right hand side we're having this detail screen so this is the mainly it the idea but if you want if you guys want to learn I I want to mention something like this that we we are providing this uh the starter project where which I'm going going to start in this live stream and then make it responsive you just you guys just need to go to this uh link over here uh we will also provide this link in the uh description of the live stream so you guys can also check it out from there and you you just need to be in the master branch and download it from over here or CL clone it into your system and after running this project after downloading this project let me just uh stop this one so we can run the all right let me just okay yeah after you have downloaded the project and then run it in your ID it it is not necessary that you're using us code you can use Andro Studio or any other ID that you're already loving but after opening the project the starter project that I'm talking about it will look something like this and when I run it it will look definitely uh it will also look like this the web view of this project is already built but we will make it responsible to adopt the screen sizes uh screen size to the tablet mode and also to the phone uh screen so if I just shrink it down here you can see that it is not responsive because this is just a starter project and I'm running it but in this uh live stream I'll make it responsive and you guys can also follow along by downloading the starter project so without wasting time uh let's get into it first of all let me walk you through the project structure that we are having once again after downloading the starter project you will see uh your project just like this there is nothing that you guys are can worry about uh when you run the application the starter project it will look something like this if I just like shrink it a little bit down you can see that this is not responsive so in this session we will make it responsive but first first first of all let me just walk you through uh with this uh project structure uh first of all in the pop stml file here we are adding these packages these are not the packages that are making this application responsive these are just the packages to make the application UI you can see the flutter SVG for the flutter icons we are having the Apple chart and the provider is just for State Management but we are uh actually not using any State Management now getting back uh here you can see that in the screens folder we are having this main screen which is the actual uh which is like the whole uh handling the whole application basically this is the main screen and we're uh dividing this main screen into two parts using these expanded widgets and why I'm using expanded rdet because here you can see that if I it it it like it defines itself because uh like it um it it makes the uh the child its child uh fill the available space no matter how many SPAC is available if you give a child to the expanded widget it will automatically uh fill the whole Space avail ailable that is why I'm using the two expanded widgets to fill up this whole space available and currently we are just splitting into two parts the first part is for the side menu and the second part is for the dashboard menu so for the side menu menu widget I'm I'm using the flex property which is by default one and it will take if we just uh calculate it uh and for the like if we just calculate it for the dashboard also like for the dashboard we are using the flex 5 and for the uh set menu we are using Flex one so in total we are just splitting this um whole screen into six parts one part of the screen will Taken will take by the side menu and uh the left over five parts will be taken by this dashboard uh widget which is over here this is about that like uh the main screen how we are splitting uh the dashboards and everything now let's go to this UIL folder where the real magic happens and I have created here this responsive widget it's just a few lines of code like as you can see it's hardly like 50 lines of code and I've already add already added this uh uh comments for you guys so when you're uh getting started with the starter project you will understand and you if you want to follow along that would be also great this is just a status widget and it uh takes a three widgets which is a mobile tablet and desktop uh I will later later on when we when I'm going going to make it responsive the application I will explain why we are needing this uh and why we are requiring this then if you just scroll down here you can see that we are having these three uh uh bu T type bu U methods that is returning true either true or false and how we are going this getting this as ramman mentioned earlier in the flutters approach to the responsiveness that we are having the media query uh widget which is used to take the which which we can use to take the device constraints including the size of the um size including the size of the device which is like currently we are accessing the device well and here we are comparing it with the crew the number which is like which we can call it a breako so for the mobile if uh the size of the screen is less than at 50 then we are considering it as a mobile and it will return true same same is the case for the tablet but here we need to compare compare for in between the two breakpoints either way if the screen size is less than 1100 and it is in between it is greater than or equal to 850 then we are considering it as a tablet and lastly for the desktop where which is like currently it is on the desktop because the screen size is more than 1100 then we are considering it as a ttop so these are the three uh main methods that we'll be using uh to make our application responsive later on in the build method we are also like comparing this uh width that we are acquiring here uh here from this using this media query and then we are just like comparing and returning the desktop and then the tablet and then the mobile so later on I will also explain why you're we we are using it and how we can make uh this uh logic to make our application responsible so let's just look uh get back to this uh live project showcase for example here you can see that if I shrink shrink shrink you can see it looks great it looks great but now you can see you guys can see that we are not having enough space available so what we can do here is just like as we already said here that uh what we can do over here just uh we can just uh hide this side menu so that this whole part can just fill up the available space and it will not look bad at all so uh what we need to do just we can just go to the main screen and here you guys can see that uh we are using the expanded widget to show this side menu so how we can uh hide it and then we can add this menu button uh to Showcase this uh to Showcase this um menu menu menu widget I'm also having I also open open this in the uh adobe. XD the design for the desktop we are currently having this for the tablet we want something like this to hide the side menu and then then show it using this menu button when we click on the menu button then we can showcase this side menu otherwise it will be hidden here so for this what we can do returning back to the code uh we want this to be hidden in the tablet screen all right just confirming that my internet connection is working so we want this side to be hidden in the tablet size so what we can do is just we can uh write the code if it's uh we are just going to write uh simple cor first I need to remove the cons over here so it not does not give the errors can just run if it's not a tablet uh if it's first we need to access to responsive this one responsive that we created and after that we can access let me just import it I'm really sorry guys it's taking a little bit [Music] time all right now we have already imported it so let's go and we will be checking it if it's desktop then we want to show otherwise we don't want to show and after saving it we will see this and this condition this uh it will just like ensure that if uh we are on the desktop which means that the screen size the screen size is greater than 1100 then we will show then uh where is it yeah here yeah here you can see that now the screen size is above 1100 so the side menu is uh visible if we shrink it and we decrease the size from 1100 as you can see the side menu is disappeared like now the available space like now it's looking great like the U the overall UI of the dashboard is looking great but still we cannot access it like for example if we run our application like this in our uh tablet it will be responsive uh we cannot see the side menu but still it is not accessible so how we can do this uh this is very easy we just need to add a simple icon button over here from there we can just access the side menu so getting back to the code what we can do you just need to go to uh for these uh blue errors you can just add simple const so it will just disappear you don't you guys don't have to worry about this now what we need to do is just to like back to the design here you can see that we we can we need to just add this uh menu button where we can click and just uh access this uh menu uh this uh menu widget so let's get back to the code and what you can do is just go to the uh just go to the widgets and here you can see the dashboard widget and inside the dashboard this is actual the dash dashboard but all the components are in the component folder so we need to go to the header and here you will find out uh in the row widget in the top of the header we are having this like icon button I've already commented it out so if I just like do it something like this so you will see and I just I also need to import this controller I've already created this controller over here you can see in the controller folder we are having this controller which is just uh opening the the drawer it is simple as that like the controller itself is not doing anything else it's just opening the drawer so you don't you guys don't need to uh get confused about this one and you can see then I just need I just need to import the controller and also the read method yeah after like doing it and let me save it saving it I hope uh let's see yeah it's here as you guys can see the menu button is here and we are clicking on it but it's not working why it's not working but first let's check out the uh responsiveness and here you can see that uh in the desktop mode we are also having this uh menu button first of all we need to fix this so what we can do is just to check uncommon this uh to check it first we need to import the responsive over here also uh let me just zoom in so you guys can see it better you need to check if it is not desktop mode which means that if it's not desktop mode what it means it's a tablet mode then then we need to have this uh icon otherwise we don't want to have this icon so this not means that if it's not a desktop mode means that the size of the screen the device size is the width of the device is not greater than 1100 then it's the tablet uh tablet mode and we want to show this icon button so uh we already fixed it now let's check it out uh after saving after hard loaning here you can see that see it's taking a little bit time but yeah we have to wait for it as you guys can see if I just like increase the size now Boom the uh menu button is disappeared if I just decrease the size shrink the device screen size you can see it is in the tablet mode and we have the uh menu button but if we click on it we are still not able to open the drawer open the menu uh item uh menu menu menu so what we can do is just uh we can go to our main screen because we uh all everything is on the main screen this is the main screen so we need to add here I've already added this drawer we just need to like commented it out and boom after restarting let's restore out restore and yeah now as you as you guys can see if I just press we are able to see the uh uh see the menu uh menu all right this is fixed side menu widget yeah we are able to see the side menu widget so this is uh this is fixed like in the desktop mode we are having this like this if we shrink device screen size then we are having this menu button and we can see the uh we can see this side menu fidget easily now this is fixed like the it is almost fixed for the tablet screen now it's responsive but what if we just like shrink it more uh here another thing like this uh search bar is also not looking great if you can see uh on the in the desktop screen it's looking great like it's okay but if we just shrink it down here you can see it's uh it's again not looking good because we have anpress available and it is also like shrinking so again let's go to let's fix this one again go to the header and here you can see that we are having a spacer in between in between the dashboard text and the expanded widget for the search field we are having the flex of two so what we can do is just we can make it one and let's see how how how it looks yeah now now it looks better as you can see uh it looks better if we shrink the size it looks better yeah that's looking perfect and now let's uh we are able to access the menu item widget and everything let's shrink it more again here you guys can see that we're getting the error or flat error again if we if you see it in the debug console here you guys can also see that we are getting the Overflow error so how we can make the make it responsive let me open the uh the um design again so for the tablet now we have made it responsive we have the menu item button when we can click it we can just access the draw uh but for the phone we just need need still we need to make it responsive we we need to H this from the right hand side and move it to the down uh to the bottom of the recent files so we can uh just so we have enough space available and it will look great on the mobile device so how we can do that let's do it let's go to the code again uh yeah let's see the dashboard here you can see yeah so in the main screen here you guys can see let's get back to the main screen and then go to the dashboard dashboard yeah the dashboard yeah so the dashboard is basically we are also having a row widget for these and then we are having a size B a default padding which is the this uh space in between the wget and then we are having the storage details but what we want what we want to do we want to we want to basically hide this storage details while we are on for our phone so what we can do is just like we can uh write the same condition over here also like we will just the red ARS are coming because uh we're using const over here we just need to remove it and then we can come in here we can just also like import use the responsive widget responsive DOT first we need to import it yeah of course import import Dot and we need to check we want to display it on the desktop and tablet but we don't want to show it on on the phone so if it's phone then we don't want to display it uh if it's not phone then we want to display it otherwise if we add a not then it's the reverse of it like it's the opposite so if it's not phone then we don't want to display and how we can remove this blue uh errors we just need to add the const uh everywhere and boom all the errors will be gone right let's see let how to start and see how how it's looking let's see yeah it's already gone from the right hand side as you can see we are on the mobile screen and it's already gone from the right hand side but it's not appearing over here so what we can do is just copy this storage details and go upside above and here after the recent files we can just p and p it over here inside the column widget and after hard restarting here here you will you guys will see that it's already appearing yeah the storage details are already here for example if I just like go this from the tablet this is the tablet screen if I just uh shrink it here you guys can see it's already there but there is no uh space in between the recent files and so what we can do is just to add this t b of the def default height and yeah it will look great yeah now it's looking great so we have already made responsive for the uh from from the from the desktop then we have this tablet screen as you guys can see the menu is here if we shrink it more then the storage device storage details also going to the bottom of the now that that's how we can make it responsive if we just press in the in the mobile in the mobile version here you guys can see we are also having this uh uh we can access the draw from here just clicking the menu button but still if I just like uh resize it over again as you guys can see the search bar is not looking great because we are having this dasboard screen uh we are also like having this uh profile which is not important so more we can hide the name so first of all let's go for this uh you don't you guys don't have to worry about these errors I will fix it soon first of all let's go for the search bar we need to hide this dashboard text so we have NFP then we can just expand the search bar so what we can do is just go to the header back and here you can you guys can see we need to just hide it uh in the mobile so we will I already added the same logic if if it's not mobile then we show it otherwi and if it's mobile then we hide it and let's see you guys can see in the template mode we are having this this dashboard text in the desktop mode we are having the dashboard text if I if we just like uh convert it into the for mobile mode then we are not having it and yeah that's cool also the flex is good we can see that this is the search bar yeah but also we can do something better how we can do that we can just like uh hide this name of the the person and we can just only have this image so we will have inep space and this search bar will just uh get all the available space so yeah what we can do is we are having this profile card we if we get here we're having the image of the profile then we have the name so yeah but we can do the same for this one as well we can just check f it says uh responsive do is mobile if it's not mobile then we want to show if it's mobile then we don't want to show so here you guys can see we have the image of the person we have the icon button but we don't have the N so we have in space and search bar is uh filling all available space you guys can see it's like responsive yeah this is all about this and you guys can still see if I just decrease the size there's only one these uh my files which are like giving the errors overflow errors so we can also fix this one for this we can go to this my files here you guys can see we need to go to this files and over here we are just like calling this m u my file info card grid View and if you go to it this is just a simple grid view uh this is just a simple grid view widget which requires the cross access count and the child expect ratio but we are keeping it still like the child cross access count to four by default and also the child expect ratio to one so how we can fix this uh in the beginning I told you guys that I'll I'll will tell talk about the responsive widget uh currently till now we're just using these three methods like as mobile is tablet and S desktop and making our application responsive but we are not using this Bild method the actual Bild method like uh how we can use it response you guys might be asking so let's go to the my files here it comes um here it will be like we'll be using it to make this part responsive because this is a complex part we cannot just use FL methods or simple logic to make make this responsive so we will be using this instead of just calling this we will call the uh responsive widget and here you guys can see let me just copy this one so okay all right now let's calling the responsive widget here we will pass it to the desktop mobile also for the desktop we will also add for the tablet mode right it's cool you guys can see the changes there's no changes because currently we are not making any difference we're still calling the same for this now what we can do is just like uh pass uh I've already added this comments but this doesn't matter like we can add uh these things like we can pass as it requires these cross access count and child aspect ratio so what do you think if we convert these uh four to the two so then we we will have two files in each row then then maybe we will have enough space and it will look good so what we can do for the mobile we can just like uh we can set the cross access count uh to four and let's see what's what what the difference does make all right all right just making sense Pro is count to four we have to hard load it maybe it will be working no it's not working yeah all right uh let's go back what we can do over here we can just like first of all let's just create uh first of all let's access this uh size and yeah it's not for yeah right I guess I got it it's not four that's why it's not working I was just wondering why it's not working so it's just two uh let me go back if if we just set it to two here you guys can see we're having uh now it's working we're having two files in each R this is how it looks like and yeah we're getting some errors because we're not just like sitting it anding accessing the size actual size but we will do that soon so first of all let's get the size of the screen uh how we can do that we will just create a final field of size and then we can just uh access it using the media query as Ramen mentioned already not this one the media query do off context and then we can access the size and then we will access the BD and yeah we say it in in here the size so here we first of all we uh before doing this we need to check for the size here we need to see F size. VD you're just directly accessing the vid over here so we didn't don't need to specify it once again so size and then we need to check uh if it's less than 650 which means that this is phone then we can have two cross cross access count we can have cross access count to what I'm doing here we just like cross access count but we need to check the size which is if it's less than 650 then we can have two items then we can have two items in the row otherwise we can have four items and then yeah let's see how it looks like rning the uh after hard loading the project here you guys can see it's again giving the error so let's hard restart now we are having uh four but yeah let's go let's move if we just if I shrink it down to the phone size uh you guys can see now we are having four items uh uh two items in each row this is how we can like make this part responsive and this uh this is how this responsive widget comes into like comes handy we we can also like if you guys can see still this is this looks very like it looks uh good but not so good if it looks like if if it looks something like this it would be better because it's okay with this uh size of the phones but what what about this one what about this one what about this one it looks bad so what we can do over here we can also just like set set the child aspect ratio and here same we will do the same for the phones like if the size is less than 650 which means the app running on the app is running on the mobile then we can car keep the uh aspect ratio to three and one what what does it mean by the child as ratio child as ratio is basically the child ratio uh like uh compared compared compared to the uh divice screen we just uh make a ratio of the we just make ratio of the uh height and then the width and then we just give the size to the U and then we just give size to the uh child of the child of the application so this is about the let me just I don't know why it's giving errors let me heart restart again the temp for the yeah I don't know let's just shrink it here now it's looking perfect yeah it's looking better if we scroll down we have the storage details we can see this one let me also go to the inspect so you guys can see yeah do that here we we are just having like more than as you guys can see I don't know if you guys can see or not we are having more than uh 1100 that's why we are having this uh dashboard UI opened uh because let me just close it down because it's not very visible uh let me just close this inspect element but yeah this is how we make this UI responsive in the desktop top we are having this if we shrink it down we just like this we are having the storage details and if we just go a little bit more more more more then we disappear and we are having it at the bottom and yeah it looks great on every aspect and in every device screen size so this was all about the uh how we can make this project responsive I hope you guys have uh learned uh a lot there was like so many interruptions in the from my side because of the low internet connection but still uh I tried my best like to make it responsive and we have also provide and provided starter project so what you guys can do is just download this starter project and try it yourself and yeah I hope you guys will understand like uh how we can do yeah I'm not using any special packages or any uh complex things it's just it's not just a it's not a rocket science I'm just using these uh three methods and this simple uh built method that we are having here and just comparing the size that is acquired by the media query uh widget which is already built in flutter so using these all these basic concepts Ive already me this uh application responsive and as you guys can see you guys already witnessed that it is like uh responsive in every uh screen size so this was all about this now I will just like forward uh you guys to the Ramin so he can talk about more about the best practices and tips uh that he can share about you how to build the responsive apps so Ramy you can start all right thank you so much s for making our dashboard responsive and it's really looking great in different devices like the mobile tablet mode and also desktop mode but before I'm just going to start uh talking about the best practices I just want to remind you yeah uh we will have our question and anwers session after the Bas on practice uh section so just please make sure you guys are asking your important question in the live chat and later on we are going to answer all your questions all right let's go to the next uh slide okay now in this section uh we should always uh make sure sure after we are done with making everything good after we are done with our application we should always uh make sure to test our application uh for the like uh yeah if as you're seeing in this slide also we should always uh make sure we are uh checking and testing our application and also for the responsiveness also we have to check it in different devices to just uh see how it is looking in Mobile and maybe in the desktop mode or in the tablet devices yeah I know we don't have all of these uh devices with as in our hand and here is uh flatter will come to help us uh if you just uh let me just share my screen here and I will show you how we can just test our things our application in different devices again we are going back to the this pop. de website and this time we are searching for this package device preview if I'm searching for this you can see here this device preview which uh which is already making a lot of uh likes also here which means a lot of developer are using this to just check their application and different devices now if you just open this you can see here in this GIF also like uh we can just uh check our application in different uh devices like in different iPhone devices maybe in different uh in different devices like tablet and in Android you can see we can even check them in different Android devices and so on we can just check them uh to we can check them even in the desktop mode uh and also in the tablate mode but how can we use it first of all we need to again add this package in our application by this uh command by this thing like we have to add this package in our Pops specto file with the latest version of this package after that what should we do is we should wrap our we should go to the main page main page of our application and inside the main method we should wrap our my app uh method with the device preview and we have to make sure to put this property with the K releas mode it means what does it mean it it will only display uh display it will only work in the de debbag mode and not in the release mode after that after we uh we after wrapping this uh with this device preview we have to just close our application and run our application again and then our uh our emulator will look like that and it will help us to just display everything in different uh devices like in the tablet mode in the mobile mode and in the even in the Android Android devices and different Android devices and all other devices which you can think about it and yeah that was about this package I I know this package will help you guys a lot because you guys are really like after making your application responsive you guys really need to test it uh and check it uh after you're deploying your application now I will give this stage uh to S again and let's see what does he have in his hand all right thank you so much R in uh so first uh I I would like to remind you guys also that let me let me first of all let me share my screen let me share my screen so you guys can see yeah all right that's great so let me guys remind you that we are having this flatform head fl.com where we provide this 12 weeks flutter training which will make you from a newb to the X xer flutter expert developer and here as you guys can see that we are having a lot of variety of uh courses available from the newb level to the advanc level uh if I just scroll down you guys can see that we are offering a lot of courses especially as we as you are talking about the responsiveness in flutter uh so we are also having this Advanced course about the responsive responsive UI and how you can build it so if you guys feel like you want to go uh in more deep and more advanced level in building responsive apps then you can you guys can check it out this check out this course that is available on he.com what and just uh a will to watch this course and how you can do that you just need to to go uh you just need to go to uh this uh head.com and here you guys will see this apply for 12 weeks floer training uh button you just need to enter your email and this and then just uh click here on apply on for 12 weeks FL training which will redirect you to this simple application form and let's just wait for it a little bit so I can so I can just show you all right so this is the application form that you guys will see uh here you just need to put out all the personal information that you have your name your email your country and uh a lot of other um just a few more details and then you guys lastly need to submit and once we get the notification we will we will uh just contact with you as soon as possible so let's get back to the slides this was about the uh how you can Avil our 12 weeks flut training uh before getting into the Q&A session once once again I would like to uh have a quick reminder again for those people who join in the middle of the live stream uh we have created the he letter community in WhatsApp where we have different groups for for for example General discussion polls and announcement and you guys can join in join in out uh there you can uh share your problems and then a lot of people will answer you we are also trying to answer your questions and solve your question solve your issues that happen in development and you guys can just go to our YouTube channel and head over to the uh about s about that s section and there you will find the link and you can just press on it to join our uh WhatsApp Community uh this was about the WhatsApp Community I highly encourage you guys to join our WhatsApp community and yeah let's move to the next session which is like really interesting the q&s session I I I hope you guys uh understood like how responsiveness work because there was like a lot of interactions on of the bad internet uh that's why I couldn't just uh transfer the whole like my understanding to you guys but let's see if you guys have any question I can uh share my screen to clear them up let's let me share my screen and see if you guys have any questions from the beginning yeah uh first of all the first question is like uh coming from Nan while then can I make a block website with flutter of course uh you can make this is not related to responsiveness but yes of course you can make a block website uh you can also make application for that because uh with flutter it is a single code based uh framework you can create uh a web based application you can create uh Android iOS yeah so of course you can create a website blog website using slutter then coming down uh just is not opening Channel link not open so I hope you have already open this uh link of our live stream and yeah let's go to the next question if yeah this is about uh the fedy f is asking what about the screen Ule package screen util package is also very uh useful we rammen already talked about the packages that uh what which packages should you should use when you are going on advanced level like as I met the whole application the dashboard UI responsive without using or getting help from any any package uh so yeah uh when you're going for the advanced level and you're just like if there is like a lot of screen sizes that you want to handle then definitely you can use a screen util package it is very uh helpful and it gives you like a lot of uh access to get the constraints of the device that your application is is running on so yeah you can definitely use the screen util package to make your apps responsive uh let's go let's going down practice what about the screen U package I'm really sorry this is uh mentioning that your internet connection is really bad so yeah I don't know it never happened before and yeah I hope in future it will be better again this question is coming from the Nan that can I make a Blog with the website uh blog website with flutter yes of course you can do that uh after cloning the project how can I uh run it uh you don't have to like first of all when you clone the project from our GitHub repository that we will provide the link in the Des description you just need to open the it in your IDE and before running it make sure you download all the packages by running the flutter pkit command in the ter Minal and then after that you will be able to run your project project how can I all right that's that's then let's go to the next I inquired about the 12 weeks Flo training course I am interested so I already explained how you can apply for the 12 we flutter training you just need to go to our head flutter website and there you will find this button apply for the 12 week flutter training you just need to pill out the form and we will contact you back as soon as possible uh anyone can help me to run the project after cloning it it's really simple you just need to clone it download it and open the project folder in your IDE and then you can just run flut P command in the terminal to download the packages that is used in the project and yeah it will be good to go yeah all right let's hello sir one project we can work with the device preview and get expect Pages uh yeah you can work the dev package as rammen already mentioned in the best practices and tips that you can you if you guys don't have access to variety of devices but first like first thing first when you when you're deploying your app you need to test it out on different devices like different screen sizes so that your app looks good so if you don't have access to different devices then you simply go for the this alternative which is the the best alternative and it will allow you to use different devices and we are having question from yasa I recently started my flirter journey how can I improve skill in flirter responsive and api. St management can you explain the basics to Advan Journey so as I already mentioned y we are providing the 12 week Flor training uh where uh you will become like from the newb to the advanced level in only 12 12 weeks so maybe you can also check that out apart from that we are also having 700 plus uh tutorials on our YouTube channel so if you if you are facing any kind of difficulty in understanding any topic then you can just search in our YouTube channel for any topic and I uh we have cover every topic and you will find detailed tutorials that can just learn uh that that will help you out in your Flor Journey choosing blog provider in gex uh these are just like the State Management so yeah you can first of all if you're starting out you should go for the you should go with the provider because it's more like basic and then later on we when you're are getting on advanced level then you can CH choose the other State Management as well when you have publish ke architecture video soon we are already like it's our ideas list we are working on the clean architecture and yeah uh we will publish it on our YouTube channel soon as soon as possible uh it's flutter will future demand this is also an important question we uh yeah of course because no technology will die every technology have future so flutter will definitely have a future mind AP from that it is also backed by the Google which is uh as we all know that Google is not just a small company uh and day by day and year by year it is updating it and maintaining it so of course flutter there's like in the future flutter will be demanded technology and whoever learned flutter um they will be like earning good amount of money so I guess these are all the question I couldn't see any question related to the responsiveness so I could just uh answer all of them but yeah uh most of the question I already answered so this was about like uh q&s session now let let's get back to the slides all right uh so let me just uh before we wrap up let me uh once again say that we encourage you to explore the live project that we shared and the code that we that you will get in the stter project you just need to practice it and experiment and H your skills with the responsive design and most importantly applies these principle to your flutter apps whenever you're flirting uh uh building your apps you just need to apply this principle this simple principle the beginner you don't have to go for the advanced level Concepts you don't have to explore more packages you can just use the simple package um principles to make your apps responsive uh and it will help you out uh on becoming a more skilled and successful developer and once again thank you all for joining us today your participation has made this live stream a success we hope you continue to explore and engage with our flutter Community remember to like share and subscribe subcribe to our YouTube channel for more valuable content related to flutter stay tuned to our live future live streams workshops and tutorial videos we have got plenty more in the store and to help you out with your journey so as we conclude today's live stream we want to express our gratitude from for to your time and attention and it's been a pleasure having you with us I guess that's a fairw for now but we will see you again very soon happy fluttering goodbye everyone thank you

Channel: HeyFlutter․com

Views: 8,231

Keywords:

Id: nkCj8IERfDo

Length: 61min 23sec (3683 seconds)

Published: Tue Oct 24 2023