Flutter Responsive App Design with The Flutter Way @TheFlutterWay

foreign let me see the links in my community so maximum people can join okay so 11 people joined so far that's pretty quick okay um please do share the stream with your friends so maximum people go and join and take the benefit from the experience of the great one word the flutter way because um five to ten minutes and then we will start where is the link okay so here is my announcement group announcement the session with apple another flatter we had just started okay so English please okay so I think I think small comfortable with English so he will switch between English and Urdu but um of course most of the session will be in English so be patient okay here we go girls let me put it on thank you no problem it is a 19 people joined so far okay cool let me put it on my Facebook groups hello sir please talk talk in Hindi so yeah we will switch in between Hindi and Urdu and of course in English so you guys will understand okay no problem to be honest with you he died I'm not a freelancer so I'm not sure about um anyways let's focus on this session topic [Music] Mania of course so of course um okay so 25 students joined so let's wait for five to four minutes and then we'll start I mean um foreign why he stopped bringing a new UI design the flutter I think he's working on a lot of projects and he had a lot of things in pipeline but of course he will answer this and uh when he'll start the session has started okay so 29 students run so far cannot understand please explain in English oh okay so also we'll keep this session in between live session has said how many of you guys are really excited about this session please let us know in the comment box because we still have four to five minutes left so I want maximum people can join and then we'll start the session make oop video of course we will make a video soon guys that's it okay following you both from a long time now this is lottery for me of course um this is of course an honor for me as well uh having uh the flutter we on on with us and I'm super duper excited as do I as you guys can see how I am blushing and it shows how much excited I am I'm it is a good choice to switch my career okay so we'll come to this kind of questions at the end okay how to learn UI design of course how to learn UI design how to master UI design inverter these are the type of questions that of course our guests will also answer by the end of the sessions to keep a hold on it who is this hi hi hi so I think I know you who I let me put this in the time thank you of course Marketplace you can invite me and I want you happy if you can okay so we already found people trying so far so let's wait for two to four minutes more and then we will start I'm good how are you okay so it's um how you depends and then of course um how are you I'm following your course is a good and very beneficial for me thank you so much guys x i excitation is on Peak a pattern programming unique architecture yes there are two playlists one is with catex and One X with the provider and then of course block is coming or I'm going to start the Block series in two to three weeks of course I haven't teached anything related to the UI design management Channel full Focus but of course UI I believe is not easy part of course we have a guy for this who will teach you if it's easy or not today I guess without responsiveness package but the look is different or smaller device so of course a dollar Guru I built a app so he's saying that his app is not responsive for smaller devices with the font size so that is why we are having this session and then we about to start in two minutes of uh I'll I'll let my guest answer you on this foreign [Music] I want to learn graphql with flutter I don't have any kind of a playlist about the graphql so I know how to integrate graphql because I have integrated one of in one of the applications um you can take the source code if you want to from my GitHub but I don't have playlists right now um okay so so I must have respect for you started learning whether from when you visited yeah so it was a really wonderful Workshop in the after part that I delivered and it has 300 participant and they yeah they enjoy my boring lecture for three hours but none of them left my none of them left the hall and that was interesting okay how I want to add videos Okay cool so let's start with our live session guys and then of course let me just um [Music] Okay cool so let's invite our guest and then okay so song hello everybody how are you uh Abdullah I'm great and I'm honored to be here and thank you so much for inviting me uh actually to be honestly being my audience was requesting it's been a while since they were asking me please approach um the fluttery the flutter with the fluttery and then bring him in the live sessions so I uh so I ping you and you were kind enough to give us a time and I really appreciate that you have given you have given me a time and and here we are so um a lot of people um before we go ahead a lot of people know about you that they know about the flutter away so I want you to give your introduction who is Anwar who is [Music] YouTube channel and who really love open source also I made Google developer expert for flutter rendered it's been like one and a half yearn right now and I really love coming this stuff I really love talking on events learning from expert I never really enjoyed my life and I I really love to share knowledge with others like once I shared a video and each time I check the comment that I got and it really motivates me and I don't know how many okay I have a question for you guys those who are watching me the one first question is how many of you show my face if you show my face before you know I'm the person behind the flower type like yes on the comment let's see I can see your comments so let's see how many of you just know me instead of larger the Flasher way okay so let um that was amazing session and maybe I'll join another station on Nepal very soon oh yeah a lot of yes yes okay there is a one no okay another one is no first time singing okay live session oh there's a lot of people your audience are from Nepal also that's great a lot of people my my most first time is from India okay that's great yeah oh there's a guy from Bangladesh as well Bangladesh hello I'm also from Bangladesh no okay okay so it's a 50 50 I think yeah that's good oh someone also follow me on LinkedIn thank you thank you ah my fast instructor it means a lot it means a lot oh thank you someone from India that's great thank you love you guys you guys a lot of fan from India that's great yes India foreign thank you guys and yeah also if you really really like if you watch any of my flutter away videos that let you can also let me know how it helps you or if you guys have any suggestion from me okay do that do this or improve that kind of stuff happy to you know check and answer you guys I'll answer your question later no problem I I think about the comments we will come to an end if you guys have any questions so I'm I'm taking the note of of the best questions we will ask and I'll I'll ask at the end and then I think um let's proceed with our topic and that was how to make our applications responsive for web and iPads and for the text events for the MacBooks I don't care at first let me share my screen screen let me add it on this yeah I think you can see my screen yes okay hi everybody so you most of you guys already familiar with flutter by using flasher we can build apps for Android iOS web desktop and even embedded device but if you want to build an app that support those all the platform you have to make it responsive now look at this one I built a dashboard dashboard app you can call it on flutter that work on every platform like this is the preview on web or desktop app this also working on a mobile device as a Android or iOS app also the here is the preview of iPad and this session I'll explain how I make it responsive so that it work on every platform that you guys have on our flutter support before we started there's two things I need to show you that I need to show you the end product so at the end how it looks instead of so that you have more better ideas so let's start with the web here is the web review we have as you can see on the left side we have this side menu and surgical storage details are sort of something let's see how responsive it is you can make it bigger we can make it smaller as you can see side menu is hidden show like that always perfect let's make a little more as you can see let's make it as small as we can as you can see this UI is fully responsive now let's see how it looks on let's say an iPhone okay here it is it is on iPhone that's how it looks on iPhone or Android if you open the app on Android iPhone it looks like that the same app that we just write it once and we're using on every platform here's a hamburger menu okay let's flip the phone as you can see it seems to be some kind of a magic card happen when you shift the screen yeah as you can see guys smooth as border okay one last thing let's see how it looks on Tab there's iPad or something so here is a tab let's see how it looks how it looks on tab so the sidebar because right now we have another space but if we leave it as you can see it add up to the screen perfect you guys so are you really want to learn how I do that kind of stuff okay let's close those chain let's back the slide so if there's some link I have that really help you one is this GitHub link that that contains this whole project even you can see the live preview from here so that this course my main focus is to show you how to make it sponsor if I really started the whole I start from building the whole UI from scratch it takes me a lot of time because it's not an easy UI to be honest and it takes a lot of time and effort so if you really want to learn how how to How I build this whole UI from scratch you can check my videos called responsive admin panel UI on flutter on my YouTube channel you can check it out but on this session I'm really really interested on make it responsive so that you guys understand how you can make your app responsive for that we have three bounces here and we're really interested on this UI brand so if you want to follow along with me or if we're watching this this video after this live session or after decision you want to try it by yourself you just go to this repo there is a link or maybe Taj also added on the description no problem so the first thing you need to really need to do is clone this UI branch so once you clone it it looks like that or you can open it on a private IDE I'm using vs code for that I'm really comfortable on BS code before I started let me explain what you have in the starting project or UI Branch as you can see I'm here on the UI brands so I have access folder that contents icon all other as busy icon and images slogan stuff let's back to the public speak.eml so the few packages I added Google fonts for using custom Google fonts later SVG so that I can add those icons I felt charred you can see a chart storage chart for that I need this chart and provider for State Management to be honest there is no there is little work on provider so if you it really depends on you if you want to add it you can add it no problem now if you go to the lib directory here the all magic comes so let's start with how can I start let's start with the main I have one thing let me explain one thing I built this repo two years ago as you can see it's pretty old project I I built it in two years ago so maybe some of code are not really up to the mark because you know it's two years old code or where right now people are are flattered way better you upgrade this product but as you can see here I can use cost but I'm not using cost and all some base practices are missing don't worry because on this session we're really focusing on how to make a responsive instead of follow the best practice and the cost it's an old project that's why maybe some is most of the time it follows but sometimes it may be lag you know there's some way we can improve it and this this youth task I really appreciate if someone really did that for me and create a pull request are happy to March it okay so fasting fast we are on the main directory let me run it fast so that you have idea how the UI Brands look like so what I'm gonna do I'm gonna run it on a web Chrome OS as a web because uh I plan this I designed the whole stuff as a way fast then transfer it to a mobile if you are on BS code you can command should be like flutter and select device choose Macos okay then run it by using Ctrl F5 it takes some some time let me explain other thing here so we have controller simple controller which open the drawer it's pretty simple stuff that's the hour statement work nothing else that's that's it it's completed it's model recent files is nothing simple class also some demo files that I'm using whole UI similar stuff because I'm explaining yeah there is two two screen here okay now come to our project yeah once you run the UI it looks like that it looks amazing on my Edge you know once I fast finish this project I was like whoa that looks pretty and on on my website it has like 500 000 views sorry on my YouTube channel I think it has more than four thousand stars on GitHub so yeah five thousand stars on guitar even it was on GitHub training one at Guitar trending page that's amazing feeling you know it's okay yeah on the screen there's two screen one is main another one is dashboard so let's see what we have in our main screen so main screen is this whole screen it has two part one part is that sidebar and another for this whole other dashboard and other kind of stuff it's back to the code as you can see there's our main screen inside the row we have two parts sidebar and another dashboard screen so when it comes to responsive design on flutter this expanded wizard is really really helpful if if you know if I design if I build an app and I want to make it like responsive I'm using expanded and trust me for me this expanded only single wizard let's complete the 90 job for me if just uh the app is only focused for mobile I can do make full app responsive on any screen by using just only single with expanded wizard also there is orientation oriented Builder orientation Builder you may use that or layout Builder is really helpful sometimes or complex stuff but we're really okay so expanded why I'm using expanded here less backed now we are going to our responsive stuff so by default the flex is one here and here I use flex 5. so what does it mean so here it means this sidebar menu will take one sixth part of the screen that means if we say the one by six it means 16 percent of the week this whole whole sidebar it takes 16 percent of the width and the other part 84 I think yeah other 84 percent of the screen will take this part so as you can see just with single wizard we can almost make a sort of responsive so that it will take that that portion of the screen it takes that portion of the screen it's really helpful if you can use it in perfectly so okay so let's if we'll let's make this small screen you can see we're starting overflow issue and it look it's not look good so our job is to make a responsive so that we can shrink it as much as we can also it will work on other devices even I'm not really running on Android iPhone simulator if I run it there is thousands of here because of those stuff so the me our goal is to make it responsive so how can we make it before that I can there is a file called responsive the dirt here is a stateless wizard it has three parameter again so there are people saying that can you please make a little bit Zoom it so we can see the full little Zoom right yeah I think yeah now it's perfectly fine yeah so that's the responsive who is it that I created keep in mind that it's pretty simple responsive that worked perfectly fine on that project it is also already a complex one but if you have more complex maybe you can you can customize it as you want something like I'm call It Mobile save and desktop so sometimes you can call it a smaller device medium device smaller device medium device than tablet a larger display or next for some time it will require but it gives you the idea how you can make it responsive and yeah and the thing is I I really try to make it as simple as possible so what it has three trim aesthetic method one is is mobile so when we call it is mobile if the width is less than 850. you know I just uh I just take those numbers that will really work all most of my project I'm not saying it 100 of those projects this value is really working maybe you need any more another value is really important if I I also work a complex responsive project however I just add another one like if the screen is less than 600 then we call it uh we call it small phone or real phone or a small tablet you should name it but for Simplicity let's call it if the screen size is less than 850 we call it mobile and if the screen is greater than 850 and between 1100 then we call it a tablet it's on tablet size and if the screen is is greater than 1100 there's we call it desktop so there's we have three break points and using three break points we're gonna make the whole user responsive also also I'm gonna count it there is a that's my build method I get that size and I have if the sizes less than 1100 it returns at the desktop component I'll show you how to use that in later just understand the logic how responsive the dirt really why I write those stuff how it really works on tablet yes one thing you can see if the screen size is 850 and also not now because you know I say that it can be a nullable tablet why because sometimes we really need for a wizard or any screen we just really need to Define twist and style one is for mobile another one is desktop we're really not required for tablet so that's why I'm not making requirement required but most of the time we really need we have to [Music] pass a custom like a custom component for mobile and desktop that's why we have the freedom to do that else on mobile okay I think you will some understanding on responsive don't worry if you don't get it because once we're gonna start using it you'll feel its power it's like how it's like 45 line of code maximum 45 down it's not a 45 line of code there's a lot of comment and it's so powerful that it can make your whole complex you are fully responsive you can by using this you can remove all those things you can make it amazing so let's how we can do that okay so let's start I'm using on Chrome I run it on Chrome so let's back to an inspector okay actually I don't need that respect right now let's shrink it shrink it shrink it okay so as you can see on that part I think we are out of space our side menu is already pretty small and it's not it's not look good and all other kind of stuff so the my always my first goal is if I remove this side menu then it would be perfect because so that I can add up a lot of space here so how can I do that how can I do that let's back to the inspector here so yep so let's make it bigger so as you can see here our width is like almost yeah 1100 here almost Eleven Hundred so it must look on 1100 on responsive the dirt we have a breakpoint as you can see if is less than 1100 and 850 we can call it tablet so what we can do on tablet mode right now it is on tablet mode on tablet one I don't want to show this side menu so let's do it so let's back to our main screen there's nothing we need to do uh so yeah here is our side menu so I want to hide it or I just want this tool there's two way you can say it I want to hide it I hide it on tablet and mobile or otherwise you can say something else I won't show it on only desktop mode on that width is less greater than 1100 so if tourists or responsive dirt one is not coming spin is desktop then I'm gonna show it otherwise I'm not gonna show you simple line of code look at this one see okay let's make to the 100 let's make it 75 percent so as you can see okay we have 1600 is now for bigger skin it's perfectly fine but once we started shrinking shrinking once we pass the 1100 mark as you can see it already looks bad but it's okay we don't want to make it more bad so once we pass that voila it's gone side main is gone now we have another space to show other stuff it's perfectly fine so that we can shrink it more and more even it's enough still is okay as you can see but there is one problem we hide it so how can we access it we need a you know users hide it and it doesn't make any sense you have you hide it you are not able to use it right now so how can we make it yeah I did we can add a menu menu icon here so that user understand okay it's now hidden if we click it it pop up so let's do it show the menu icon here so for that we need to go our dashboard screen here is our dashboard screen let's go to the dashboard screen we'll find our menu this part is a header component as you can see this header component will find it on our header component let's go to our header component you'll find it under the components there is the header okay I already commented out so at first let's just comment this icon okay let's input our menu controller pro I also need to import provider okay so what it does here we just show this icon here before our dashboard text is nothing inside the row I just add an icon here right now it shows always but what I really want it to do once this segment is not showing I want it to show otherwise I want it to hide so again as you can see if it's not desktop then I want to show it otherwise let's hide it now as you can see it's not showing showing once you click it okay it's not okay now it's not showing anything so why is not showing anything before we go further let's back again to our side menu go to the outside menu component inside the main component side menu what is side menu as you can see side menu is nothing just a simple drawer so the best part of dryer is we can use dryer like sort of like you can slide it and it can open so that's why I make it a drawer I list View and other kind of stuff so let's use it on a header something so let's back to our main screen and as you can see I comment it out on dryer we're just using our side menu so so what it changed right now now our main screen has a drawer also and side menu once the height menu is hidden it shows it shows problem solved see how easy it is I'm not writing a lot of line of code I'm just using what I have I'm just using the condition if and else condition that's it that's doing the job for me I already have the same style and same file and look at this amazing animation and those Shadow perfectly fine that's perfect I wanted so you can shrink it up but there's one problem you can see uh as a sink that look at the search you know here it looks perfectly fine it has good enough space but here according to this space is too small I want it to be so let's back to our header again so let's back to our header that's the Third Field before the search field we're using a spacer spacer means free space or the flex is two and by default expanded Flex is one we already know so what I can do here I can say let's see if I say expanded to flex is one how it looks yeah it looks like much better so I have a good amount of space right now for typing something on the search but on this page it's pretty big I don't want that or I think what do you think there's two options you have is personal choice you can make it as it is right now instead of just change the flex to one otherwise you can say responsive is desktop one is desktop I want it to two otherwise one so yeah it has the consistent space as you can see it's almost consistent it's not very big it's very smaller or larger screen it looks like that so size constant something it depends on you I think it's better to just say the flex one I like it that way so that problem is also solved so now with shrinkage shrinkage shrink it there's another problems now you're getting almost 800 I I think it's pixel 800 pixel size now it's not look good again you can see those file my files shrink up a lot and we don't it feels like we don't have enough space and we try to fit those things right we just feed those things not right or we don't have enough space but we just feed it that's not the good stuff so here my plan is to ha place this one after that one because once I replace this with that that hit there so I have good amount of space here so let's back here again to my code this time I need to go to the or well dashboard screen here is my storage details who is that which shows the details so what I'm gonna do and on look at the space it's 8 6. so what does it mean on our responsive 850 if it is less than 850 we consider it as a mobile so what my plan is on mobile I don't want to show the storage detail on the right side I want to show it after this recent file so let's do it back to our dashboard screen so uh-huh if responsive.org or on mobile it's not showing on mobile so it's not showing on mobile yeah now we have good amount of space Bird is Gone you know it's gone but we can't just use that this hamburger menu system we just draw or something so we need to place it here so let's put it there actually same stuff storage it's copied paste it here let's see how it looks first okay it shows but I need a space after that so that it can understand that it's different let's copy it and looks good it looks much better right now so as you can see okay just for now just ignore this part also that part I'm gonna fix it pretty soon but check this one it looks perfect isn't it now it looks like okay it builds for a smaller screen like that so let's make it bigger bigger bigger so once we have enough space I want to show it there like that and I want you to hide it so that stuff is just only if on sale mobile is this part is sold only mobile because the right part is hidden on the mobile now let's look at site see showing perfectly and it's so smooth perfect it's perfect so okay now look at this it's not look good again on header so how can we fix that we can fix it two ways we can remove the spacer and or also we can run on mobile I don't think so it's a good idea to like show that dashboard text at first let's hit the hidden this dashboard text on mobile so where is the header here is our header so I want it to hide it on mobile simply logic that we are already used or most of the time you can use smaller title it totally depends on you and I for me it looks better instead of because on mobile okay you don't have it's not necessary to show because you already understand so yeah I just have enough space but it's not good the search is pretty small on mobile so one thing we can do here if response is mobile we don't want to show it so yeah see it's perfect so oh that's a good option oh I don't think so it looks that good so let's remove it instead of that we can do analog thing the thing is we can re uh we don't you know on mobile it's not a good idea to show the whole username here we can just show her icon that's it so we have another space for a search so let's do it I think it's better it's good to have some space here I think so how can you do that you already guess it using the IP logic so back to the header and here is the profile card with the and here is her name the username so I just responsive is hide it okay yeah it perfect so as you can see now the problem is gone on mobile it's pretty smaller we have good amount of space for a search yeah this is good the tablet table is looking good the store is looking good but this my file is not looking good so the last thing we need to fix is this my file so let's go there and check those stuff those card and this is the most complex part of this so I can say responsive right now we are using what it calls if an L else logic but this is we can't fix that problem with if an else logic so the so how we can fix that let me show you so back towards display and here is my fives so you can find it on under the component go there so this is the file info grid View this whole stuff is a great View so let me show you this component at first explain what you have we have a grid view Builder and we said our physics to network scrolling so it's not scrolling anything it's just normal a great View and the other thing I Define two parameter one is for cross-axis count which is four by default and child expect ratio which is one by default and the other item is here file info card and I'm using demo data so how can we make it responsive and this great view is really really handy on this one TV show you know if you said it like let me show you something cross access count if I said it just one it will work like a list view right it looks weird here but you got it it'll work like it grid View or we can say like two looks much much better as you can see on Loop 2 on this very small side is work perfectly but on a larger screen yes looks pretty weird so it's not pretty simple solution to just using IF and else stuff so how can we solve this issue this complex issue so this higher or responsive wizard comes handy you know a boy a boy just commented move this in the wrap widget and he's giving a suggestion what do you think about it uh uh you know number one thing I can do that you know that that's a good question but what do you think is it good UI practice or it looks good if you thought see it three card here and one is is there another those space are empty do you think is it a good design stuff uh to be honest with you I think using the web digit is this is something um is is is and my point of view right now in the scenarios we are covering of course is not a good approach but of course rapidly is something that you use according to your requirements so this is more of uh how you how you handle your problem yeah that's the thing but uh I highly recommend you to try to solve it using wrap because there is actually so when I'm doing this stuff the fasting I try to solve it using the wrap but there's some limitation especially those spacing and other kind of stuff and and I I really I really like your idea and I would like you to try by yourself then you will understand what is the limitation okay now come to the topic and another thing I'm showing you to solve it using grid view so that I can show you how to use this responsibility that we are creating we are not using it till now we're just using the static method but we also have this responsive who is this so why we really create this responsive wizard for those complex situations uh so that oh one more thing I remember if you are using wrap those have a fixed something like aspect ratio so if you just always say one like let's see right now it has a one it's not really working always you know right now this portion it has pretty big space between those and it has to make it smaller so if you can't Define a fixed height also it looks looks good you know you have to make it the designer make it is a sort of square so you have to keep it consistent this one issue you're facing while using wrap and other kind of stuff okay now back to the code we are my files okay so we are using our responsibility for the first time so it has to you have to pass through parameter on mobile let's use as it is fast mm-hmm or desktop also same also I want to for tablet so yeah so we did that so does this make any changes or any Improvement on our design let's see no it's look exactly how we want it but we're using a responsive quizzes so we have the power to customize it on on different screen size on mobile on tablet on desktop to be honest look at here it looks perfect on this portion those sizes and everything on larger screen it also looks pretty good the mass is created when we are going to on the mobile on a smaller screen see because the mobile still is 6'4 pixel but to be honest on mobile like let's say on iPhone 12 it's just 390 as you can see it's not even visible those icon here so how can you show that that's the problem here because if you're opening it on like SE smaller even you don't have enough space to just show those icon and we're gonna solve it right now so how how those simple responsive with that solve this this issue so here as I write some code here as you can see one thing we can see on mobile we can set the cross access counter two instead of four so let's see how it looks okay it looks like that here right now it's too big it's too bad but it's better you know it's too big and as you can see here if it's too small then it's it's better g42 like on iPhone 12 Pro it looked good but if I make it responsive then it's not look good like uh if it's like bigger skin like fours 500 pixels it's not good though spacing is too big so how can I solve that yeah it was all the problem on a small screen like here if you're using iPhone 12 or iPhone SC it's all that but whatever that one we solved one problem it create a new problem look at this it's massive and here it's perfect so we don't have enough space to fit for and here we don't have enough it looks pretty weird if we just place two here and on a smaller screen it looks good but whatever this for that we can like change our aspect ratio so what I can do here as you can see I will create a variable called size which give us the screen size or okay let's call it size sort of width so for from using this variable we can get the width so here we can say something like that like it looks good here so let's instead of two let's put it four then again okay so let's see how much if we place four point it looks good like if we are on like right right now we're on mobile format make it smaller make it smaller look at 700 it looks good still it looks good it looks perfect I can late you know now it looks weird let's say 650. yeah 650 it looks good here still it looks good on four if we I use for for item on grid View so what we can say here if the size the width is less than 650 650 then we are gonna less than 650 then we're gonna use two otherwise we are going to uh use four what does it mean look at here still we have four but when we get a ship to the less than 650 wow well because right now we don't have enough space that's why you shift two cross access count and it worked perfectly fine but look at those those are massive and um it gives a pretty bad user experience so how can you solve those massive problems we can solve it by changing the aspect ratio so here if we change the expect ratio to 1.3 let's see how it looks much better see much better here much much better or 1.4 if you want to okay if we want use 1.4 there is a overflow issue so it's not workable 1.3 all right why is okay why something like that here too far okay I'll fix that no problem I think so let's let's at first for a moment just ignore this I'll solve it later I got it White shows that so I think here 1.3 1.4 will be fine let's make it 1.4 yeah it's at least good much better no there's again an overflow issue 380 is there any screen size 380 yeah so we have to use 1.3 is perfect see it working perfectly fine let's see on iPhone 12. yeah it looks good so the thing is so but we change the aspect ratio on mobile here it shows the Overflow and it did not not look good here so what we can do here use the same logic if it the screen size is less than 160 and we are going to use 1.3 expert ratio otherwise the squares we want to use the square aspect ratio which you want I'll check it see iPhone 12 Pro perfect don't worry there is there is if you will notice there is some exercise space here I'll fix that pretty soon and this mobile preview and we're gonna fix it on once we try this on iPhone simulator less instead of iPhone let's check the response system yeah till now it still has yeah because if I close it there is a minimum minimum size minimum width you can shrink your browsers look like that this is the minimum you can do you can't do more than that you can shrink your browser more than that so here our problem is solved it looks good it looks sort of like it's not using 1.3 aspect right here everything is working fine so we solve the issue for web but still there is a there's some problem I think exist on the mobile or for mobile app so let's stop it here and run it on iPhone simulator Ctrl shift F5 yeah it's going to be a bit complex I don't know how many of you guys get it but once you get it it's going to be pretty good and trust me but those simple two line it just made you you are a whole list mode what the hell okay I made a mistake let's see control ship C flutter and see like this device iPhone 14. so let's run it again here take some time it's it seems to me after taking you at this session I'm just I I I I have kind of a feeling that I just mastered the flutter for web because I know how to build great applications for eyes it was I was struggling with making it responsive for web but when now I have this simple uh you say kind of EX not Accenture it's a widget but of course now I know how to meet um our widgets more responsive and and it's it's great to see that how every widget is the index of your main uh main file so this is awesome to be honest with you I'm not sure about um how audiences taken also okay so we are getting a really awesome feedback they say also massify this guy is very good yeah that's why we are that's why we are having him yeah go ahead okay the one thing you can notice here is look okay but it's not perfect the one thing you notice this more exercise space here so why is really showing showing so let's at least at first we need to solve this extra space because now space is so important for us we can't just uh just waste a little bit space so I think on the dashboard screen I mean yeah here the pairing if I remove it yeah it's gone so I really wanted to show why this space actually it shows on the desktop on like after this file it shows this storage and I'm I'm forget to Hidden it so I just want it to show on desktop and tablet otherwise I don't want to because on desktop and tablet this is my storage details on the right side otherwise it's on down I don't need that storage okay now I run it it almost fixed here as you can see on iPhone 14 those documents look pretty good and clean but there is one problem on this spacer I think we can do is let's back to our header again so and hide the header like so where is my header yep so yeah here it is flex something like if the screen size is less than 650 then I don't want that one I don't want this spacer or at first let's remove it and see yeah it looks much better so for the simple stuff let's do it like damage I don't know media query of contacts the side dot width let's call it 650 less than 650 I don't want to show it so instead of if let's okay it's greater than some greater than okay the problem is almost solved now let's flip the phone and uh we did nothing here and it by default it worked perfectly let's open it I mean this is just awesome nothing nothing any more beautiful than this to be honest with you uh you know we are not using any rocket science or nothing trust me at least 80 or 90 percent we're just using IF load exhaust if there is no even there is no else just a plot you are using IF logic and it looks like that see everything is perfect I think okay let's test it on a tab close it let's open simulator which one you prefer not a watch uh-huh let's open it on 12 inch let's see how it looks there listen back to select device now I want to drive the troll let's run it Ctrl F5 oh I I'm not sure about you um if it's running so a lot of people a lot of my audience um commented on me that please teach us how to make app responsive and they have kind of a fear that it will be a kind of a rocket science are they be kind of a very very complex Logics that they guys will use in order to make applications responsive and they and then there and there will be like kind of a lot of extra work that they guys will put to make things happen but that's not the case guys it's in front of you yeah you should already okay this is how it looks on iPad 12 inch look no error nothing everything is perfect let's flip it here you are smooth as butter so that's it guys for me I hope you learned something I hope you like it let me know your experience or yeah maybe there is a lot of way you can even you can make it even better trust me I did this two years ago so yeah there's a lot of improvement there's a lot of new Wizard maybe but my initial goal is to make it as simple as possible I know there is a lot of advanced flutter developer and also beginners watching this so I I really take this session on that level that beginners can also understand the advance also get understanding so if you're Advanced flight developer you know now how to do that so you can use your own style you use your own modification and if you're a really beginner then I think at least you you get idea how to do that and you have the confidence okay now I can do it it's not a rocket science I don't need to do a lot of stuff I just need to use if logic that's it and it is more of a hit and trial method just hit try hey try and make it responsive even I'm not saying any font size nothing changes everything is you show the result in front if I do that there's nothing need to change everything is perfect it looks good you know look at there and look at here do I really guys really feel the phone difference it looks perfect it looks perfect on iPhone it's visible here is also found this liquid on a wave it also make busy is larger I think Florida takes team flower or flutter team design that takes him like that it's a little bit bigger on larger screen and Shrink for smaller skin I'm not sure I think that is that that's the case that's why when you are doing responsive design you don't have to think okay I need to change the font try to use this theme that's that's my suggestion okay let's stop oh okay a wonderful I think this section cannot be more beautiful than this so let's get back to the some of the questions and then we will go toward the uh to at the wind up and and then let's see what people have to say so please guys feel free to um share your questions here and then I'll I'll ask him and then um is with us so he will entertain your questions as well so I decided for app is larger than the size of it okay so so my first question is do you recommend third party services for building responsive apps like you see there are a lot of packages available in the community and one of the biggest problem with the community packages is sometimes the developers think that he is not able due to some personal commitments he's not able to maintain that package so do you personally recommend to use those packages for building responsive new applications are are the built-in packages are the built-in um I would say so my pass widgets built in technology it's enough to build responsive apps to be honest uh the uh you let me share the true story when I'm started playing with how to make responsive I start with grabbing those packages so I'm really feel like yeah I'm using a lot of packages and you know some you don't get 100 I want it that way but he wanted this way so what I always did at first I checked the package then I I'm not really grab the package I checked his score even this responsive design idea that I have here I'm I'm gathering taking two or three back responsive packages so I checked their code I see how they do it then I will add my thought okay I need that part from him I need this part from him then I'll build my wizard as you can see I take two or three flutter packages and come up with this simple responsive who is a single that's solved my whole problem you have my best I always suggest you guys once you try a package sometimes it's a simple line two or three lines of code for that you are using whole packages it has it offers a lot of stuff but you don't need that you need a small stuff just take that part of the code and you'll also understand a lot of stuff how other developers think other developer do and trust me I learned a lot a lot of stuff uh checking others those packages those packages amazing they're really talented once you check their code you'll get understanding and 80 or 90 percent time you don't need to use that baggage that's it guys okay so I'll add up here I'm recently my client asked I'm my client I was building a chat application so there was a UI and he wanted to make it like WhatsApp so now I was I was thinking how how I should make um a cut from the left side if you see a kind of bubble um yeah so so I I went into the pub tour Dev and then there was a package bubble chat I think I just explored it and then I added the package into my project then I copy his code and then I just go into his documentation and then just copy hold the code and then remove the package and then everything is good and then and then what I did um because I'm not sure about how how actively that guy will maintain and maintain the code but of course this code is written in the dark so flatter is maintaining for me so I I really do not make myself to dependent on the packages that I'm not sure about so what I did I just um copy the code and I just created my own I kind of a like you responsive kind of a widget okay and then I just published on the getaway and I said see you guys okay okay so do you win any projects okay so I recommend the music channel answer so do you recommend any project or tutorial on YouTube or some other platforms which we can practice and make our skill better with responsive design like this um I already built I don't know others you know to be honest if you just write on Google you will find a lot of video a lot of article anything you want to learn that's what you really need to do Google it so there is no recommendation you know sometimes you don't like my style but you know you like Star this guy so you have the freedom you have to explore which style you really like which you style you are really comfortable with sometimes you know I know a lot of people they're really really good at documentation so they're always they're not really watching videos they know that's my strong part I really enjoy documentation just go to the documentation and read it they're not wasting time on watching videos but I know a lot of guys they're not really comfortable on documentation for them they really enjoy watching videos on their free time they do that so you know that's really depend on you which one you prefer if you everything is perfect okay so then we have another guy for him he says the federal brother the flatter away um so so so I think to elaborate his questions so he's saying can we get the job um by doing dashboard like like we have react and then we have of course um like VHS and then they guys do for front end and they got the job so can we do it in the same way by learning flutter yeah for backhand yeah we can use flutter whip to be honest uh flutter with is not if you compare flutter wave with few react native on performance bases and other kind of stuff flutter wave is not that good uh to what I really think about this like those are website on but flutter what flutter did flutter helps you to build web app it's not a you can just consider this a website you can yeah maybe you have to put a lot of effort to get that result but you know if you're using react native view you will get pretty easily and that freedom so for dashboard you are not really if your user with one more second it's not really matter for you then you can use flutter even I'm working on a big project we are using flat on the back end so because this hour so yeah we're using it we can wait one second listen uh 0.5 seconds it's not but once you make it live for users then 0.5 second also matter for you that's the thing for backhand stuff you can do it administer yes um also can you also get the job by learning the dashboards UI and then make really good us using them for for the dashboard for the web but what is your thought process on this I don't get it to be honest I got my dashboards my location uh I can't say you that I expect if you know how to do dashboard you'll get a job you know it's pretty hard to tell but it's it's a plus thing you know you can learn anything in your anytime it was just a thing that I just need to learn this thing and I will get a job that's pretty hard to say you know okay so the answer so let me answer this so so if you if you somehow manage to learn that would learn you will not get the job of course so there's a call package responsive framework is it good so I think we had a really good discussion on this why not to use um packages and why to read the documentation of those packages and then take the uh I would say take the insights from those packages and use them according to your own requirement it's a really good idea rather than putting all of the whole packages into your uh into your into your project Okay so and then we have another question is so so the question is how we can make our web applications live for the end users using Twitter web if you are using flutter for building those app pretty easily you can do that yeah so one of my interns recently did this so I can connect you with him so you can ask him how he did it to be honest with you my experience with photograph is so far zero because I did not get a time because um to be honest with you it's it's maybe because of what I'm I'm producing a lot of content for the YouTube on the app side and then of course I have a job full-time job that I need to manage and of course I'm running a lot of community so that's why I didn't get a chance to well but of course after today's session so it seems to me my my all of my code is right on the place I just need to use this if and else logic that anyone has shared with us and then I'll I'll I'll ping my client yeah I did this for you on the web pay me more and you have it I have completed your bootcam what should I do next to increase my flatter knowledge I think yeah uh Skipper I would uh why you stop okay so here is a question for you who told you that I'm not watching you ideas I feel my always on the video that I created always my focus is to make the UI perfect you know I build a lot of UI videos so uh if you are really trying to learn why on flutter you can check my old videos you'll find a lot of more than right now what I really focus on maybe on complex animation that's why I build the UI pre-built because those who are following me for a long time they already know how to build a UI now let's go to one stepfather let's go to complex animation how to do complex animation or maybe on backhand invocation all and make sure all the app have I always try to make good looking app you know for me the design is the first thing I I have to like this UI otherwise I'm not gonna make the video uh recently I was having a discussion with one of my colleague and I said when you when you go to the flutter Bay child so if you if you did a mistake of watching One video you will end up with not wasting your whole day but you will end up watching your whole videos because the thumbnails are so perfect perfect and then of course um the demos are so perfect that you will watch the whole video because that the design that UI look is so so amazing that that in that will leave you the marks that I I why should I build like this so of course you will keep watching the videos and then win for the whole Channel thank you okay so so flutterwap takes a long time to load initially what we do to decrease load time and how we can make more attractive loading time oh yeah that thing is you can use a loading animation on codepen you'll find a lot of amazing loading animation even on this dashboard I'm using loading animation so that you users are not getting that board and for videos you need to do some boiler coding stuff you just Google it and you'll find a lot of way that reduce the stuff so I think that would be really helpful um how to open closed sidebar app brow launch again mobile I think we have discussed it in our session and he also told you how to do that and how to not for iOS for Android so it's pretty much simple you just can Google it and you'll have your answer okay so please open this link for beautiful flutter UI design so we cannot see anything sir what is your suggestion how to become a better level how to become a better developer practice and and and how to keep ourselves motivated to do practice because being a beginner one of the problem is with me is that I hardly I hardly can focus 10 minutes one hours right now I'm capable of doing 16 hours because I'm loving it but initially when I was I was not enjoying it I was learning it and and I have to Google a lot of things and sometimes the process is really frustrated so how you used to handle it uh yeah what I did you know it's pretty common for as a even today if I try some animation or anything most of the time after working one or two or I just fed up yeah it's not working I don't want that it's pretty complex uh so what I I just do I tried it maybe next day or that I go outside walk a bit playing with a kid I have a kid on my home so I just play just give a fresh mind then try again that's the thing you have the girls I know even I try to learn a lot of stuff even I try to learn a lot of stuff I can't learn it because I give up but one thing I know if this list if you try 20 minutes today next next day I'll try 20 more minutes more after one month you'll you'll get the result if you want if you see someone I don't know I saw some before I thought that you know I I saw some expert he had 10 years experience I saw his work and I want to copy his uh I want to be someone like him in two days that's not possible guys you have to Patient you have to go slowly then you will you have to keep patient and keep practicing that's that's the one thing you can do okay so if react native is a good choice or not for mobile level yes of course recognative is a good choice I I always not um I I always do not argue about verses like flutter versus reacted flutter versus native it's it's up to you the scope is us people p for you people people invest in you so make sure that you make yourself the best version of yourself and then you will um easily get the job I'm I'm not sure about you and what a lot of people complaining me that we don't get flutter related shops but when I go to the LinkedIn um I receive almost um two to three offers on weekly basis and and same is the case for you I'm pretty much sure on the LinkedIn because we proved ourselves on the LinkedIn that we are we are capable enough or we are the people you are looking for so so to to to get the job of course you have to be best and make sure you are expert and then it and then it really doesn't matter if you use react native or you use threader do what you love doing it and then go with the one you love doing it for me flutter is love and and of course I'm going to do it for the next at least so I'm not sure I really it's really changed thing you know I know a lot of people are really great developer but how I'm gonna know that you are amazing developer you have to show me you have to prove yourself so how are you gonna prove it you know if I'm not sure for example for me if I'm not showing my work on YouTube do you really know me no do you know my capabilities no that's the thing you have something to show I'm just you know I just created YouTube for fun I I build flutter UI then I really like those of you and I think okay I need to put it somewhere as a student on YouTube and I got a lot of response what I always suggest you guys if you build a project make sure you upload it on GitHub make sure you post it uh you just make a good preview or something just record it how it looks share it on Twitter LinkedIn so that people can show it so then you will want to know the world that yeah I'm capable of doing doesn't matter if you let's say if you clone one of my design and if you share it trust me I saw a lot of people getting job they're sharing my design on their profile this is called my watch it on my tutorial and post it that hey Abu I did that even some of guys do better than me and once I check their comment they will give you one or two project project proposal I hire you free so you have to show yourself that's the thing I think you really put up um you put up everything and so please that no one can disagree okay so last question from the people and I think this is something for me as well how should I grow my LinkedIn my cat and my GitHub and why is you like you yes any kind of suggestion for me and other people of course the question is from the audience to be honest I never think that way to be honest you know I need to do that and I need to do that much follower or something like that I just do what I love to do I just share them that's it you know if you keep doing today tomorrow you'll get a result but if you just hey I need to get this job that's why I'm doing it after the job I'm not doing it um that's not a good idea because you know there's a lot of how can I say that to be honest I even when I just I created videos for fun I create open source project for fun you know my 80 percent I'm I'm doing free stuff I'm not get paid but the 20 time I'm get paid I make sure they're worth more than 90 percent of time why because they know my capabilities they will show my work on GitHub I have 10 000 followers on GitHub which makes me the mo uh the most followed GitHub user in my country even on there's a honestar basis I'm the number six the developer global so I never thought I would I never thought once I started putting my work on GitHub I never thought about yeah I want to be that top on or I need to that follower I just do it it's just by default it comes so that after working on one or two years that I have it I have my I had those things I can add my portfolio keep going don't really worry about don't say the limitation you know if I starting my career like yeah once I get a job I'm not doing my open source YouTube I'll lose YouTube then I'm not here on that position keep going you don't know what is waiting for you in future maybe you'll get right now if you are struggling I mean I'm struggling sometime even right now I know there is a better future waiting for me just don't lose your hope that's it keep going wonderful I think okay so last question and then we'll sum up um I see on the GitHub a lot of people making uh while making the designs so what they do they start writing the whole code for the for for web for tablets and for mobile um like like when I see whole code so they are basically designed they are writing code for like like you have what you have done you have just written down you have created the widgets okay and then you are using those widgets as index into your main file okay and then of course passing those widgets into your um your your sponsor files basically yeah now I see a lot of people on the GitHub using this approach as well they design the whole um they write the whole code for the web for tablet and for Io so so you you show your comments on business that's a lot of work and to be honest with you they guys have really wonderful stars on their profile as well I don't know because to be honest I don't think so it's a good idea to write a lot of code here because in near future if you really want to modify something you are gonna match you have to modify a lot of pages you know places and on our coding don't repeat your code make sure once you try write something yeah you can you know for uh for make it faster you can think it but I highly recommend you to never ever repeat your code at first you know at first I'm doing the same stuff you if you saw my videos on learning purpose if you're learning you can do that no problem if you saw my first one or two videos even on text field I'm not even using text field I I designed the whole textual using container because that time I'm learning if I make it perfect it I don't make everything perfect Pixel Perfect okay I think okay the design is look good even on that time I don't have any idea of text field after two or three videos I understand the text field if you're learning you can do that but after three or four videos I'm creating then I I realized okay my code will look messy you know once I write it I understand it but after a week I back to my code I don't get anything it looks a lot of line of code how can I fix that first one or two project it's really bothering me it takes me a lot of time to think how to make components how to make how not to repeat my code after this uh doing for like five or six months now it comes automatically trust me all of my file it doesn't matter how big it is the uh list most of my file has less than 100 lines of code wonderful um I think I will anyway thank you so much to be honest City I'm really honored and that you have given time to us and I really appreciate it because I know you are a busy guy doing a lot of things matching YouTube Twitter LinkedIn and doing some Open Source book and then of course uh being a content creator I know how it how hard it is to produce content because people see a lot of time it's the final version but they don't see the struggle behind it so I know I I know it's quite a time taking process so again thank you so much thank you so much um you give us the time and if there is any closing mask that you want to share with my audience or any tape or any kind of suggestions and then we are I think good at first thank you so much for inviting me I really enjoyed here to talk with you guys and with your audience it's my honor to be here you know I'll also check the wallet by and Sakina station that was amazing and I learned a lot of things from Molly Bhai and Sakina right now yeah we're pretty good how can I say gdes after become a GD I got a chance to meet them but before Didi wallet buyers are gonna really helped me a lot that amazing person so what I can say and thank you so much for for like inviting me and I know a lot of Pakistani people are from Pakistan and you watch my videos but they don't know me you are the one who show them the my real face either of my videos I never thought but I think after this session now you will have the confidence in enough confidence to put your face on on your channel I don't know to be honest I don't like that celebrated stuff I want to keep down oh okay I wanted I didn't know I don't want them to know me hello you have lots of people know you okay you want the guy who that's the feeling that's good thank you I really enjoyed it and your audience is amazing and you are amazing I checked a lot of your videos even I learned something from a lot of things from your videos those are amazing thank you so much for like contributing to our community and helping those who really want to learn stuff and obviously I know how hard it is to build a video and you have you're doing a job you're like you're giving your precious free time that you can do anything you can give those time to your family friends or you have hangout instead of doing that you are giving those time to those those people who really want it who really want to learn you will really help them to build their career I know as a content creator what really matter for us someone just reach out to us and said hey because of your video I learned this because of you I got this job this is priceless feeling guys that's why uh that's why all the content creator create put that much effort even one of most of my videos take two days to build I I'm not saying for you or maybe more than that so so that's those simple lines is really worth it and I really motivate someone if you're really helpful if you get really helped from any content YouTube video or article please make sure you appreciate the writer it really motivates him maybe just because of one your comment you'll get another amazing article from that contribute really appreciate that I know you guys do it please do it more that's it that's it for me guys and you guys are amazing I'm having so much amazing time thank you for inviting thank you so much guys you will get the source code in the in the in this video description of and of course the LinkedIn um uh LinkedIn link of the uh Apple Anwar you guys can connect with him on the LinkedIn and of course to subscribe his channel of course you already I did and bye bye I love it bro I don't have the I don't have the road map to master the animations but I was suggested to go check um out when that channels when that just type in that filter and you will see um his channel go go to his channel see the playlist of animations and follow all of those animations and you will Master it um why the size of the flutter application is larger because most of those applications are uh you see debugs whenever sorry files either packages so it really doesn't matter foreign well it's not a good platform to build applications because it's a long way to go over application it's already react native research next level [Music] okay so guys thank you so much for watching this live session and see you in the next session so bye

Channel: The Tech Brothers

Views: 6,915

Keywords:

Id: D81JLygbcyQ

Length: 96min 23sec (5783 seconds)

Published: Sat May 06 2023