Responsive vs Adaptive Design in Flutter

hello guys so in this video we will discuss about responsive versus adaptive design in a flutter so as you all know flutter is a framework that make application for all those that have Android iOS make OS Linux Windows right so basically we are just uh differentiating between two those uh like they are mobile phones everyone they are a desktop right so as you all know mobile is just controlling by very different as compared to desktop like Mobile's just controlling by our thumb guesture right and the desktop is controlling by our Mouse so whenever we are creating application single code B application like flutter is uh just uh making application by single code base as you all know so how we can handle this two different thing and even this two different thing screen sizes is also different like if I'm making a simple card so whenever I'm creating a single page and inside of this card this showing in mobile phone is quite different as compared to desktop so how we can control right so for that thing we will discuss in this video about responsive and adaptive design so let get start without further [Music] Ado okay so first thing we have responsive design so basically responsive design describe that ability to adopt to changing screen size uh we can say that like uh whenever you are making any applications so your application layout must to be adjust on a different screen sizes and orientation so that user feel comfortable like uh your app should be run on all type of devices including watches phone tablet as well as laptop and desktop so whenever it's run on a different devices uh right we can take a example of watch and desktop so whenever it run on a watch it should very look to very small according to watch screen size and when whenever it's run on a desktop so according to desktop screen size your applications look very larger whatever desktop screen size to be so your single code B run on two different device according to screen size so basically this terminology explain responsiveness okay so second thing we have adaptive design so basically adaptive design means to be that your application should be have adaptiveness according to device specifications right uh we can say that like uh it should be have platform specification thing whatever device they are like uh whenever your application run on a mobile phone it's properly handled by our curing effect like as you all know our mobile phones is just running by our thumb gesture and also all the device specification things like uh keyboard uh gesturing effect and uh for the desktop device they have a mouse gesture effect means all the platform specification thing your applications run by those thing properly okay so if we are deciding that uh we are making application for Response Unit is for all those O So how we can make so they we have a lot of options in a flutter like uh there is some kind of very simple option is like uh layout Builder widget we can make our applications by media query option as well we can also use aspect ratio as well and also we have some other options for third party libraries like uh flutter screen util and uh respon on sier as well I'm just adding this link in description as well you just go there and check it out so first options we have a layout Builder visit so basically by this layout Builder visit uh some options we have like uh I just saying a simple word there is Builder property in a layout Builder that can provide us with the Box content object so which contains that constant information for a particular viset basically uh it's determined how our display should be rendered means how actually it size should be rendered so we can use this screen information by this mix width and mix height so basically the screen size content assigned to our widget which help to adjust the display accordingly furthermore uh when this value change due to screen orientation layout Builder called our Builder function which rebuild the widget based on new constraint like as you see in know your screen so whenever it's uh about to 1200 means uh it showing on a desktop so it accordingly our vet is again again changing means uh Ultra wiget layout is showing on this time but whenever you are just uh application means your device screen size is quite uh minimum like it's about to 600 and Below to 1200 so it runs on a wide layout and uh your third condition is like uh for a mobile means uh low to 600 so it's narrow layout vet is just running on that condition second option is quite simple like uh as you already know if you are a flutter application flutter developer so media query is quite simple and even we are using in lot of ways but uh in a screen size management we can also help us so by this media query option we are not only able to getting with vet height wiget screen but is also uh getting overall screen size and device orientation of obligation at a run time so as soon as those configuration change our build method will also run and it ensure that vet is updating according to our latest data like as you see in know your screen like uh I'm just uh writing screen width and I'm just getting a uh screen width according to by this media query like uh by this query I'm just getting width and according whenever run time like whenever on a run time my screen size is changing it is also updating my code like it's a about to 1200 my ultra with Widget layout is basically running below about to 600 my wide layout is just showing about to 300 my narrow layout is just showing and uh below that my ultra narrow layout is just running on that time and uh third option is we have aspect ratio basically this aspect ratio uh just we are using on a lot of ways uh even I am just taking a simple example like whenever you are just uh showing multiple images in a grid way so this wiet is quite important on that time so basically with this as ratio you can size the child according to your set spe ratio uh basically first the wiget tries to be widest width a cord allows that layout constant is uh allowing them basically using this given expect ratio the vget height is calculating is ratio of the wiget height width height uh means uh like in simple word we can say like if you are showing a three wiget in your screen so expect ratio is just getting a total height and width and according to that your images is showing like if there are showing three images means your mobile is supporting three images at a time so their expect ratio is just allowing them and three images showing in a single particular row but whenever is updating means your screen size may be on a desktop so that's allowing to five to six images and even above that so other options we also have apart from this aspect ratio layout Builder vet and media carry we have option for a orientation Builder we have option for a layout Builder we have option for filed box fractional size box media query media query data custom size child layout custom multi- child layout so this all the widgets also help us to making our application responsiveness uh so these are the easiest approach in a flutter to make your application responsive but uh there are also other option also have like third party Library we can say uh they flutter screen util package so by this package you can also make your application responsive and also they responsive sier package uh I'm just adding this link in a description you just go there and check it out okay so second thing we have adaptive design so as if we already discussed before that adaptive design means to be your applications should be run by platform specification things so in a flutter how you can right so in a flutter if you want to be develop your application according to device specification thing there is some kind of widget and uh there's some kind of options that help you to create your application by this adop Tess so there is lot of options uh we will discuss some of them uh they are quite important and uh let get start from the first uh as you see my screen I'm just scrolling by this screen by my mouse and uh whenever I'm just scroll my cursor to my image uh there's some kind of uh uh animations are showing and whenever I'm scrolling to down their animation is invisible right so how you can do in your application your flutter appliation basically so as you see my screen there is one Mouse region wiet is there so what exactly you need to be do so by this mouse cursor widget uh you can just uh Handle by this cursor option there is a child option when where you are just guesture viset is just adding there and uh on tap is also options whenever just want to any kind of options or maybe any kind of uh animation if you want to add on a clicking on this and also there is some kind of on enter on exit and on however option is there basically it help us to whenever you are just scrolling by your mouse it able to updating your state accordingly whenever just entering your particular viset your exit to particular any viset so this options help you right so there is some kind of uh animation is just showing I'm just taking example just see my screen so let's come get just jump to our second option drag and drop right so basically drag and drop is some kind of things is uh very simple like you just in a desktop you just Dr and drop any particular item to any screen so drag and drop is a core intersection for both touch base on a pointer base input uh whenever you scrolling list or daging item there important difference to be considered and even thought the interaction is expected for both type of inputs uh basically a drag handle in generally expected to separated dragable area from scrollable ones and you just Dr to a long pressing uh because of scrolling to dragging both same finger both input is just simultaneously just running there so we can also do this in flutter as well and uh there is option for a scrollable appearance so just adding like uh as you see in uh right corner you can also add this in flutter this is option is also in there and uh then we have option for a visual density option is also there basically uh uh we can say that like uh in due to the different level of Precision offered different input sizes uh whenever just hit Area any different screen size uh by the visual density class flutter permit you to easily adjust the density of your view thought of your application uh such as making button larger and uh of your touch screen uh basically material component that help to your visual density and animation to match your changes according to your visual density of your material by default um both horizontal and vertical density are said to be 0.0 but uh whenever you just can make to set the density to any negative or Point positive value if you want you can just easily adjust your UI by switching between this density I'm just uh taking example exle in my screen as well you just see this and uh then we option for a selectable text uh selectable text is uh quite important like uh lot of time we are just copy any kind of text for any website so if we want to doing same thing for our application as well so this wiget is helping us so it quite simple we just uh using uh selectable text fidget and uh this fidget inside of all the text we just write so by this fidget we can easily make any kind of selectable text fidget so this all the options are help us to making our application as a adaptiveness okay so that's all about my information about responsive versus adoptive design in a flutter so if you like this video just clicking on a like button and also please subscribe if you just helping out me and also just comment below if you just want to add some further more information so that's all about it uh thank you for your time have a good day

Channel: CodingMiles

Views: 504

Keywords: Responsive Design, Adaptive Design, UI Development, Mobile App Design, Flutter, Flutter Tutorial, flutter, dart, Dart, Flutter UI, flutter design, Cross-Platform Development, User Interface Design, Flutter Layout, Mobile App UI

Id: E2aqflQHH64

Length: 17min 20sec (1040 seconds)

Published: Mon Dec 18 2023