Responsive Design in Flutter | Build Adaptive UIs for Any Screen |മലയാളത്തിൽ | #flutter

[Music] resp as always applications okay multiform framework crame okay then Android appil then uh you can have website then uh you can create Mac Linux and windows software L IP then iPhones okay then Android device then you can have obviously smartphones okay then uh you can have large screens like smart TV obviously you have varment system like Android not considering we are simply considering these three things you have taet and large screen form I use the word form factor okay form fact factor that means what is shape [Music] andly screen how can you render the uh UI according to the users screen size respons build that responsiveness you can achieve that responsiveness it is very simple you can have media you can use this thing media okay and media off context off context and then dot size okay and uh this is actually uh returns something called SIUE height size okay and these are dou up to 700 he 400 370 mob and mayy depending upon the device you're going to get inside this variable okay you can bring some some sort of responsive resp so let's jump into the code I have already created an application application and you know how to add asset and I have an SVG folder because I'm going to use an SVG image I have some SPG simply okay then uh and it is created using figma you can try try to create you can try it on create anyg stands for scalable vector vector graphics are created by it's not created by pixels it is created by lines without losing okay and I have used some [Music] C and what the of the then the F if you want to use medium you have to write and if you want to use some other family write again okay I think it is clear and this is all about your set folder then come under Li screen and Li Li folder it's not screen I have created a screen folder because different set of like Mobile screen and we are going to create uh these three set of uis uh set of UI so I have created three folders nothing inside this then I have a page called homepage I don't want this test let me delete the test okay it's not this test and this is actually so let me delete that okay we don't need that okay so uh do refactor okay I have used some that okay [Music] anyway F I cleared everything in from this main do and you know how to do this okay simply I just call the homepage that is inside the homepage okay this is a home home page nothing just I have some exp okay and this is what we are going to build okay I have a design for mobile and this is what we want to render uh on the mobile device and same website same same app what if it is in a tablet and use this if it is if he's viewing [Music] okay and I have devices running here mobile device like mobile phone then uh other one is uh your pixel okay uh okay let me minimize this thing because and and after adding all these things pbet okay run the pbet command or you can run that command from here or you can simply click here okay so I think subscribe and don't forget to comment and we have started a telegram channel for exclusive support you can join that channel and I'll uh give you the link in the description okay then uh rep Okay so uh you can type something like size then create a size uh instance of that variable and I'm going to call the media quy media Cy media q y quy and off cont size okay and in this variable you you'll get uh the size of this screen let me print the size [Music] okay pixel 7 mobile okay and let me start the emulator here there is nothing in this scold okay it is running now your app is launching see this is the size of the screen screen and the width is 411 and the height is 86 7.4 and I told you this is a double value and if you want to get the height only you can have size. height if you save it you'll get that value only exactly precise scre the height and if you want to get the width okay and width should be uh this thing and based on this height and width you can uh you can decide which you want to R I'll show you how to do that okay then we going to use something called layout Builder okay see uh let me delete this thing okay or let me com I don't want to return a scold I want to return a layout build okay and flutter Builder is always going to build something [Music] lay bu is going to build AET okay and always remember Builder is going to build a bdet and that bdet is going to attach to the your tree actually the your exact location on that screen on that tree EXA location scold don't forget that okay then [Music] Contra this is just a variable constraint going to get [Music] the [Music] Med media break points if you are viewing this in a mobile small Mobile [Music] screen whatever it [Music] is we can consider it as a small screen or mobile small Mobile screen three nor screen mob 41400 that is a okay 950 desktop normal 1920 but you can if you if you want to precisely Target different [Music] Medias I'm going to check if constraints Max withd call the max greater than [Music] I'm going to give this desktop small 9 you have to render render I'm going to have desktop layout okay and always going to create a file called desktop desktop underscore layout layout underscore page okay p and this is a uh material import here then this is a stateless widget and call dck Top layout and this is going to return es scafold okay and let me give a color to this scold scold background color see let me have it red okay okay now you don't have or you can have El if elsif L constraints Max 950 and I'm going to call 600 600 we have to consider this as a tablet so return tablet layout okay and this class class I'm going to have a file called tablet uncore layout underscore page okay then import for material then you can call the stateless widget and call tablet layout okay and this is going to return a scaffold as always scold then I'm going to have a color background color say this should be gray okay now import this class here tablet layout okay then in you can have else condition return a mobile layout I'm not consider every every break points I'm just generalizing things I'm going to have a new file mobilecore layout uncore page okay so Mobile screen import material then it's a stateless or Stat or St mobile layout okay so this is going to return as cold okay then uh let me give a color background color see uh which color you want purple okay so I just add purple color then homage mobile okay now your constraints are ready and let's reboot this thing now you can see you got a purple okay and let me run this on a website okay I'm going to run this okay okay and okay so let's wait for that now your web is launching here and and now it is red okay because 950 9 5 let's check that inspect inspect okay now you can see should be a mobile thing 600 now it is ablet okay up50 something let me [Music] okay me take this is no not this okay pixel C this is a tablet and let me run that and take the tablet here so okay let's try that this is what we want to build I'm not going to at this color and all these things because try to make things comp comp okay let's create a new folder here called util and this is some I'm going to create something called my button okay my button widget because that is a component that's why I'm going to call this as widget okay so this is going to return material design and this is a stateless class I'm going to call this as my button okay then you need a Buton I'm going to call a container okay give a height height see 48 177 and if you want to control these things double uh you can height you can give height double height then uh let's replicate this thing double width okay double width okay then pass that value in the Constructor and this dot this width this height okay and I'm going to make this final okay final then WR final okay now everything is clear and you have to call the you want box decoration calling and Border radius and I need circular if you want circular you can give circular and if you want to control the radius and you know radius is always of type double I'll show you how this works okay don't worry then call that radius value I'm not going to make this final okay then default equal Z and and circular border radius do circular this should be radius and I just make itable okay default value and you can make this as okay no I don't want that okay Double Radius and you have to remove this thing okay because final okay so I think everything is clear and you can get rid of this thing no you can do that okay then color you have to add color uh color then uh if you want you can have a variable called color okay then I'm going to have final color color color and make thisable then this do color okay then uh put sem and now should be Center widget and again child should be a text and you can have that text here okay text and that should be final string you can [Music] have text call the text here text let's try to remove this thing okay now uh you don't have you have an error here this is a required parameter we going to build this we are going to build okay need and you can get it from the I'll show you how to do that mobile and this is a scold let me remove this don't worry remember same code repeat don't do that and follow the drive principle that is don't repeat yourself okay let's come back mobile layout lay and the body should be a container okay and I'm going to fetch the uh media and I'm going to have the height SI width size do width okay then the child should be a column okay and I'm going to have I want it to be in Center so main AIS alignment cross AIS alignment center okay and I'm going to have a container okay container asset okay provide the path assets SL SBG SL logo do SVG okay then save it this thing okay pixel select the phone from here and reload this uh let me reboot it okay now now you can see you have the image and it me this I need something like and you can write the text here custom text and custom text custom I have already created a video about that custom container custom and that is very important make everything component do that this is just try to do that okay so have text here text okay and the text is we provide P Quality Water so I'm going to have that we provide best quality water okay [Music] so I want the font F call that Clash display you can call that font family let me run it again now you can see we provide best quality water and we reduce the size that's why it is like this and let me reload this thing and that and run it again you have to get a bigger thing I want a sized box okay I want a sized box then come down and put a because this is in a column okay [Music] my create create account I want a 47 he the color should be color I want an orange color okay and let me save this and run it again you have a button here okay and if you want want some and this should be and some other color orange orange do 200 sh and that comp height of 10 okay now you can see and I think I have an extra okay so rerun it okay now you have your mobile and what if this is in a [Music] [Music] tablet and con buildu come to tablet layout and let me copy my this thing I'll show you okay remove this replace this thing and I think you have to import my button my Buton and one moreel and select this pixel C and reboot this okay you okay it's rebooting okay now okay now you can let me make this as okay then save it now you have an error and I'm going to have a container again container child you can provide main accessment we don't want height here we want width here okay [Music] now okay now what is the error and what I have an extra okay and maybe alignment alignment let's fix [Music] that main access alignment center now you can see div you can have div by something called 42 now you have a bigger text okay let me run this on it which device let me CH [Music] okay size and now it is in [Music] ablet okay you can can see the size of the text is increasing CL this okay [Music] Bigg and this is what we achieved okay I don't know why maybe this me remove that family pH family okay mobile layout and why that happens [Music] [Music] I'm going to have this respons text we provide best quality okay so large screen layout you have to to try that I'm going to do I'm going to do that I'm not going to do that I'm not I'm going to do I'm not going to do that okay so is very easy [Music] thing defitely I'll give you [Music] the I'll share the link in the description and video like here uh subscribe here okay and don't forget to subscribe I need more subscription and need more comments need more likes to move forward I have a lot of I am planning to do lot of videos [Music] [Music] [Music] but see I'm running my own startup we have 100 students there and you guys are always welcome and I think we are the uh affordable uh training we are providing affordable things it is very cheap two month FL and I think that is enough for learning Bas and land in a good job okay I took to five years because we have two mon course we have already six [Music] month andity okay and but one thing I guarantee you'll get the skill set okay because we are the leading of students okay anyway thank you for watching and video com share like subscribe okay I need your support okay so thank you thank you for watching

Channel: FlutterFly

Views: 1,663

Keywords: Flutter, Malayalam, Datepicker, Timepicker, Form Elements, Mobile App Development, UI Components, Flutter Tutorial, Malayalam Tutorial, App Development, Flutter Forms, User Interface, Coding in Malayalam, App Development Tips, Programming Tutorial, UI Design, Flutter Development, Flutter Widgets, brototype

Id: cIS69OSBxWs

Length: 54min 23sec (3263 seconds)

Published: Thu Nov 02 2023