VelocityX Flutter Workshop - 1

hi everyone welcome to my stream hi finally we are here after a long time and i thought like let's start something uh so um so i thought about creating some stuff on my own library which is velocity x and i i did some update recently on it so uh first of all please let me know if you can hear me uh properly and if my uh video is also coming fine so let me know and let me just also use my headphones so that i can hear myself at least okay sounds good one second okay all good awesome awesome so uh we will explore velocity x what it is and how it can help you with the flutter 2.0 as well uh flutter two point just got announced and uh this is the first time i didn't make any video on flutter uh the reason is very simple that i didn't uh i was going through some issues and uh that's why i didn't create something okay let's uh go to the topic now uh let me try to share my screen uh screen too okay okay so uh i hope you can see this screen and i hope everything is visible here um so this is a one of our application where we are not doing much we just have a home page so and our homepage is blank as of now so first of all i will uh i will just import uh material dot dot as you can see here material dot dot and then we will create a stateless widget called home page and that's it and then we will just import this here in home page uh in in a main.dart and that's it now how you can use velocity x should be the first question so you have to go to your pubspec dot eml first and waiting for your video since flutter 2.0 launched yeah i know i know and here we will have to add a dependency of velocity x so um how we can add the velocity x dependency velocity x not supporting firebase latest dependencies uh we have updated like i have updated velocity x yesterday only so you can take a look so uh we will add velocity x here so we can say velocity x and the version which we are going to use is the null safety version which is 2.4.0 dash null safety dot zero so this is the latest version which i released yesterday only and it has a lot of good features uh which uh uh you will like i hope uh thank you boggy bogey and naveen thanks so now our dependency is installed now what we have to do is we go back to main.dart we go to home page and this is the container let's try to run this application and see what we get with this right so i'll just press f5 and here i have the simulator running on the right hand side as well so uh so yeah null safety is supported by default on velocity x for not last today only it it is being supported for more than a month or more than two months i think maybe yeah i mean a couple of months uh it's been there uh now um now let me just also check one more thing in the meantime it is running let me check how much people are watching just to make sure i set the right expectations uh okay so 40 people are watching and i hope you will enjoy this workshop uh i'm sure you will enjoy it a lot so so uh don't go anywhere okay time to update ya so now you can see our app is running it has a blank screen right and uh now uh what we will do uh we will do one thing uh rather than okay let's go to main.dart first and let's remove this banner called debug show check the banner and all so it should be inside material app and let's make it false and now you can see the banner is gone now we will go back to home page and you remember how we use our scaffold so we will use script like this only then we will have an app bar where we can just say abbar and in the title we will just say a text we are using text right now but we will remove it by the way uh are you teaching flutter 2.0 yes it is a part of flutter 2.0 and this time i will name it let's say velocity x and one more thing which i want to mention here is that uh this particular velocity x package now also supports the state management so a lot of you asked that uh we need state management support as well and it it is fun trust me if i'll have time i'll try to show you as well so this is the home page and uh now we have this velocity x written over here let's also change the color from blue to t like i like feel much for some reason so this is the velocity x which we get now um now what we will do uh in the body part of this app and let me know if the font is visible okay please write yes uh the font is fine if you think font is fine otherwise i can increase it even more the font can be increased that's not a problem okay now uh in body uh let's say in the center we have a text okay and the text is flutter 2.0 is live okay this is the text now um but it's little small okay visible and little small so let's make it 28 now so that should be more than sufficient i guess because it's a little bit small so now it should be fine okay so let's say the text is flutter 2.0 is live and this is how we write like we haven't started using velocity x yet okay so flutter 2.0 is live and uh now what we can do uh when we have to add styling to our text there is lot of repetition which we have to do right so we will add style like this okay style uh text style let's say i have to give some color as well so i will say colors dot red then i have to make it bold so i'll say okay one thing is font weight dot bold font weight dot bold and then let's say we have to increase the size as well so font size uh 30.0 and then sometimes it comes to our mind of can we also use uh the uh theme material text theme which comes with velocity x so we will just scrap for this and then we will use theme dot of context dot text theme and then we will say dot headline let's say one and then it will be like this and then we will copy with and then we will all again say our color let's say color start red so it's it's a kind of a work right which we see uh good morning from brazil good morning uh eric uh can you give me link how i connect php php is not what i'm teaching okay now let's go back to velocity so this is what we generated uh using how many lines of code like three to four five lines of code this is a very small sample now let's see how velocity x works so uh we will import velocity x dot dart something like this and now let's just copy this text and remove this from here okay so this text we have removed now what we will write rather we will just paste the string okay and then we can just say dot text dot make make is means completion and you will see we will get again this flutter 2.0 is live here right now um hi yugina yugin yugin if i'm not pronouncing it wrong hi eugene or eugene from ukraine oh wow so flutter 2.0 is live uh text is there now this is this is the only thing you have to write to make a text and it's very simple now the real beauty comes now uh let's say i want to give it some color which is red so i can say red and velocity x has lot of uh inbuilt colors which is the extended color palette now uh where we can say let's say red 500 and you will see red red color there now let's say we have we need the same headline so we can say dot headline one and we will pass the context here and you can see the same thing which we wrote last time but now you can see the text uh the code and uh you can also remove this center from here now let's say we remove this center and now rather than make we can just say make center and then you just get the same result so uh hello from kenya algeria hi oma hi alex great to see people from a lot of places and uh really happy that uh finally after a long time we are doing this and it's it's it's going to be fun so as you can see this is the only thing you have to write and how now this is not about the lines but this is about the number of words which you are using so one is a string then second is text then red color headline one and make center uh you can also remove just like headline one you can use like headline two similarly you can use headline three four and all those things which whichever is there offered by flutter theme then you can also use caption for example and you will get caption uh you can use something called excel sizes okay like excel 2 for excel is a normal size uh xl2 is a bigger size xl3 is even bigger xl4 is even bigger xl5 is even bigger xl6 is even bigger and let's say after that one more thing which you will see uh from oh hello from india as well oh my mother none hello from maldives hi pincharoo uh okay so now you can see xl6 up to xl6 we can go and there is one more thing which you will see we didn't get any overflow issue right the text all like by itself expanded to next line and that is also uh done by velocity x so you don't have to bother about overflow anymore with text so it it just auto sizes itself so uh that's also one thing then if you want to prefer like excel six is the maximum but if you want to create make it even bigger then you can also give some size to it so um let's try giving it some size let's say um 20 so it will increase the size even more you can also say 30 and you can also say 40 and you will see like even i say 50 text is there let's say 100 and then also our app is not broken it is taking the maximum space available but no overflow nothing like that it is all looking good like even you don't have to bother and you can i can show you the debug console there is no error as such here you can say there is you can see that there is no error as such and we just we are just reloading nothing else so uh this is the beauty of velocity x one thing which you can do is uh uh you can also say dot cent or center which means center align so it will align the text in center as you can see um and let's back let's go back to headline one uh which looks fine and this is the center align text what else you can do uh you have like you can make it bold so dot bold and it will be bold and uh uh this is this is all you have to do nothing else so dot bold uh there is one more thing which you can use i'll just tell you uh and then you can just say fade then you will see fade effect although you cannot see it here because uh we are not in that situation you can say ellipses ellipses is basically like this three dots and uh okay so yeah you can see what if i want to ellipse instead of overflow that is the question i was already explaining this ellipses you can say and you can also slay over line and you can see we have a line so all these properties are here with just one one thing and uh i think there are a lot of things you can still explore okay you can say underline okay uh and uh now you can see there is an underlying okay one more thing which i want to share it has some string properties as as well which you want to get with flutter widgets uh like you can just say dot upper case and it will make it the entire thing uppercase let's remove our line so uppercase is a string property which we can directly apply to velocity x text similarly we have a lowercase so it will make everything lower case so all these things velocity x offers inside the text itself and you can pretty much do lot of stuff as you can see we can and and one thing which you have to remember their order is important let's say you have already specified red 500 but then um then you want to change the color of the color of this so if you say amber 500 let's say here then you will see that it will take the latest one so whatever the order is very important whatever you write at till the end that will become that will overwrite the previous one so amber 500 is here right also one thing is that velocity x is pretty much compatible with your existing widgets for example let's try the same thing for a normal text so let's say you have already a text where you were saying flutter uh not flutter but no velocity x okay this is a normal text where we as we are seeing no velocity x on the top right you can still apply all the things to this widget let's say you can just say dot text here and then you can just say dot uh let's say this time we will go with uh let's say we have a lot of colors let's say 500 dot make center and you can see we got the same text but with velocity x so it can apply to anything and uh yes it is declarative and under the hood the reason for imperative is just to make life easier nothing else like i am not a big fan of imperative styles but here what we want to do is basically we just want to reduce our work because even if you extract lot of widgets to have a common place to carry all the visits you you can still not customize them much and uh it's it's always like you can forget about those widgets as well after couple of months that i created this extracted widget so velocity x just makes your life easier by all these things so here also we can just say xl5 and by the way if you are already wondering that this is uh amazing then i i'm saying you this is not amazing yet i will show you how uh how you can just uh like do more than this what you are seeing it can you use this to define themes yes you can use it uh one more thing uh someone has asked oma has asked how to make conditions so uh font uh okay i'll come to that we are using velocity x 1.4.1 which is also fine uh you can use that uh no you don't have to use the latest version it's totally fine but if you need latest feature then obviously latest version uh you you need to use how to make conditions okay so conditions are there let's say for example you want to add a condition for color so rather than saying 500 you will say dot color and then it will ask you for the color so you can say if true let's say if true then use vx dot can 500 otherwise use vx dot red 800 something like this red we have the color in hex as well so you can see red hax 900 so let's see something like this so you can add conditions like this similarly for size also you can add condition you can also specify some things like maximum font size what can be the maximum spawn size for this text so let's say if i say maximum font size can be only 10 so you will see this time it will show error because i have already tried to make it excel five and uh that's why it will not work uh let's try to make it 16 yeah now it will work and then uh if you will if you will try to add any size after it xl6 also then uh what what is happening access six is basically increasing your text size because of scale factor so that's what you have to understand uh but if you try to give size um it should not work i guess yeah you can see size is 20 30 will also not work 40 will also not work why because the maximum font size is 16 similarly you can give the minimum font size there are a lot of properties which velocity x offers i don't even remember all those all of them when i was writing some of them uh it's been uh some time so but you can find documentation and you can check it out now let's let's go to uh the main main part okay so we will say now using velocity x and uh let's say we have a text here and then we can say make right now um let's make it centered uh and let me just take some question as well are there all the features of text widget in velocity x or something extra uh there are all the features and maybe something extra as well uh but if you feel that something is missing then please let me know you can create an issue or you can open a pr as well and i'll be happy to add it i have tried to add all the common things which i have used in my project set least and which i i see or i feel that it is essential for all the projects um so uh your internet is not working properly i think it's working fine for me but maybe it's not working for some people maybe okay uh let me know if internet problem is there uh i can take a look now using velocity x and this time i will give it color for example we can give a fushia color fusia 600 for example and let's make it excel's headline only headline one uh let also make it center add line one is too much headline six is fine five let's try five okay now we have this thing uh let's also try to make it bold we will change the color later okay now uh lots of buffering i think so that it is happening with you only uh i didn't see any any more complaint which one is better to use text widget or velocity it's totally your choice if text widget works fine with you you can use it but if you feel that you uh you have more productivity using velocity x text widget then also uh video quality is where there is no option of change video quality uh the people who are watching and on linkedin please uh try to uh go to my youtube uh because there you will be able to control it better i let me just share the uh youtube link as well so that you can see there um i'm trying to share the link can you make a detailed video on a detailed roadmap to learn flutter from scratch sure sure i'll do that okay now what we will do guys we will convert it to a card okay uh using a container and then we will do some great stuff there okay which is very new so please keep watching this one so now what we have to do uh we can do one thing let me just uh okay okay one second so this is the youtube url okay uh you can copy from here and uh uh please just uh join that also i will be uh i will be coming to flutter india event tomorrow so be there um and uh it is like flutter engage extended event which will be um which will be executed by the flutter india team where there are a lot of communities involved so be there uh okay now now now let's go back to the main thing so you can see we have this text and now we will convert it to a card not a card but we can do more good stuff with that so what we can say after this text so this make is a make or make centered is a is a thing which will probably you can say that it is used to say that okay this is the end of this widget okay so now after that what you can say you can say dot box dot make okay what it will do it will wrap it inside a box okay but you might be wondering where is the box you cannot see it right so if you will give the color to this box you can see it so let's say if i say red 500 then now you can see the box right it is everywhere the box is there now the thing is uh and if you remove the centered widget then you will see the box just in the center like this right and then we can just say the box to be centered so it will come like this this is much better right and now our fusia text is looking very bad so let's try to make it uh okay let's do one thing uh let's change the scaffold background so scaffold background color we will say let's say gray hundred or grade 200 let's say okay this is looking much better and now the box color we can give white so let's say white and now it is looking better and the fushia will make it black okay this is looking good now let's see what what we will do uh now box is white let's give some padding to a box now how you will how usually you give padding you just wrap it with padding then you have to do a lot of stuff like you have to specify as in sets dot all or a particular padding if you want to give so let's say we have to give 16 padding so what you can say dot p16 and uh you can see the padding okay now now there is a beauty okay what i want i want to give rounded corner to this box let's increase the size of this box also so box size i will say dot size uh let's say width i can say uh 300 and height let's say 100 and this is looking good but what if i just center the text like align center if i can do then oh this is looking much better right uh let's increase the size width by 400 in fact 400 not 300 was fine height should be 200 okay this is the box now guys uh okay now what we can do uh yeah i was not doing well so i i'm good now so that's why i'm back to business okay now we will do we want to give some rounded thing here so if you remember in container we have to give decoration then we say rounded uh border radius and all that what you can do with velocity x you can just say here dot rounded that's all you have to do and you can see we have a rounded corner uh this card which looks much better right this can be great if we can give some shadow to it right so we can just say dot shadow and we have a shadow here you can see but you know this shadow is more like elevation and elevation looks uh great but what if we can just give us outer shadow which can make our life even easier right so outer shadow can be a really good thing so we have an option called outer shadow so if you will apply outer shadow this will look much much better and let's say let's try to give outer shadow excel and this is now popping up very very well better than elevation right so this is the beautiful stuff which you can do um thank you sir to spawned me thanks thanks uh will you give full demonstration of elastics i'll try to explain as much as i can in some short time then we will have more workshops for velocity x uh today is the basic one which so that all of us can understand the basics of it okay so now you can see how how good it is looking right like this is definitely good right now using velocity x this box then the shadow and how much lines of code we have written we have just added couple of words that's it nothing else now let's say rather than giving it a white color we want to give some gradient right why it is good but uh gradient can be even better right so what we can do we can say dot there is some property called gradient from gradient from 2 and gradient wire okay so if you see gradient then gradient from from 2 2 and wire these are the new things which has been added so let's say we use gradient from 2 so what we can say for from we can say a color let's say vx orange 400 and we can go to vx let's say rows 500 okay and orange let's replace orange with amber 400 in fact and now if you will just and you can see the result and that's that's the beauty we have created it's much cleaner it's much easier to do and similarly you can uh if you want you can apply directly the linear gradient by saying dot linear gradient and you can give all the properties and if you want to specify your own gradient or if you want to uh if you want to like create some sort of uh your own gradient or logic then you can say dot with gradient and with decoration is also there lot of other options are also there so uh one thing one question came uh why you haven't used colors.amber 400 because there is a difference like the material colors have a different specification and velocity x colors have a different specification if you will see uh like rather than this let's try to add color start to be amber 400 uh you will see amber ah dot shade 400 right you will see a difference and you can see there is a color difference here that's why i am not using this but i like the colors of velocity x more that's why i have created it because it is inspired from tailwind css and tailwind css color system is much better and it has a lot of options for example uh in gray also you have lot of option you have for example you have true gray you have warm gray you have cool gray and you have normal gray so lot of option let's say we use warm gray 500 and now you will see all the colors which you will use with velocity x will give you a different feel itself and it's a good thing so this was gradient from two for let let's say you just have a from okay gradient from so you just want to say vx dot red uh red 700 then you will see it will automatically create a from color uh and let's say we change it from gradient from to gradient to and now we can just say vx dot blue 800 then you will see that it will automatically create this color for you so all these things can be done with the this small piece of code uh now what if you want to okay now we are actually running it on on this device which is an ios device right what if we want to run it on web and what if we want to do some more wonderful stuff so let's close this and let's select okay we have a chrome option here so let's try with chrome um uh we why you are not concentrating your lights flutter with dart um let's try dart is always there and there are a lot of people contributing i try to be active as much as i can so it's not a thing like i am not concentrating i am concentrating on all those things but obviously my time has some limitations okay now moving ahead so what we can do uh we didn't get any option for mac os right for this project so we have but we have a chrome so let's run it on chrome as well right so what we can do uh we can go to terminal uh let's clear uh some stuff and let's say flutter run the chrome and let's run it on chrome as well and let's see what happens and how we can improve like how we can use the power of letter 2 along with velocity x and by the way there are more properties which you can explore if you will just say dot uh there are like colors are there so many things you will find a lot of these things in documentation these are all the colors because there are a lot of colors uh and we will go to vx device and vx responsive and one more widget which i'll be adding very soon that can help you with the a lot of stuff like uh uh like when you are dealing with different uh okay i didn't show you the new morphic thing right i you can make your design neomorphic as well by the way and one more thing guys like outer shadow we have another option called inner shadow so you can you have to what you have to do is you have to just say that dot uh vx or dot inner shadow and then you have to apply all the necessary things like what should be the baller and all it will give inner shadow to your widget as of now it won't give yeah you can see we have some inner shadow but we haven't specified any color and all those things so that's why i didn't came so now we can see we have uh our app running on web it should be there in a in a second uh okay it's saying that web tooling is unable to correctly establish a connection for some reason and so our app didn't run let's try with the with the the vs code itself let's do f5 from here and sometimes while doing this streaming it will not work so don't uh worry about that okay i hope you are enjoying so far so let's uh let's continue so inner shadow is something which you can use uh inner shadow is not available in flutter directly so that's also you can do with velocity x uh it's a separate widget you can also wrap your widget using vx inner shadow so either you can use extension methods or you can use uh these widgets uh which velocity x offers how to maintain hierarchy uh hierarchy you can maintain like basic idea is extract your widgets as much as you can or you can also change the line length uh you can like by default your line length is 80 you can make it 120 and that will make your hierarchy even better uh yes velocity x now supports null safety uh okay let's see if it is running waiting for connection from debug services on chrome so i think because of live streaming the chrome thing is somehow not working what we will do uh we will go to our coreport.dev and output.dev and what we can do here i'll show you what we are going to do uh we are going to do some more stuff oh my internet connection seems like it is getting a little bit slower for some reason so we will run uh plutter we'll search for flutter uh and flutter quick dev settings and from here what we can find is we can find uh the mac os enable option okay i'm not signed up unfortunately did our app run or what happened okay let's see i don't think see our app is still not running i guess okay we we got some issues let's close all these things so that we don't have any rendering issues okay so i haven't subscribed so what i have to do uh let's say flutter enabled os desktop i think that is what you have to enter to enable mac os so that we can run it there and once oh flutter enable is not a command can you can someone remember the what was the command i just forgot the command uh you build again it will work i don't know why it is not working for some reason my firewall is creating some problem according to this let's try one more time guys one more time hope for the best and uh flutter config i remember but uh what we used flutter config mac os that's desktop right something like that the command i forgot even i have written it at multiple places flutter config enable mac os desktop maybe this is the command let's try if this works then it works yes it worked but it is saying me to uh restart it and then also what we have to do we have to write flutter create dot right so we will just say flutter create dot once so that it can enable [Music] mac os okay let's close this once sometimes it's it takes some time flutter yeah enable that's what i wrote oh ah i missed it i missed some things here okay let me just try it again because the mac os folder is still not there okay enable dash dash enable okay correct you are right my friend i am wrong here uh you need to restart so let's restart it once uh let's do it let's come back and uh let's open and it's been fun by the way i hope you are enjoying velocity x demonstration are you guys enjoying it or you guys are just it's you feel it's boring please let me know in the comments i'm just waiting for comments i have to show a lot of things for very responsive ui as well and for a lot of things but time is not in favor of us i think let's say cd example clutter create dot it should create um the mac os mac os folder for us until it will create the mac os folder we won't be able to okay now we got mac os yes finally so now we will run on mac os and that will help uh us a lot why don't you use uh why don't you use android studio i use android studio as well kelvin it's just like uh sometimes i used android studio sometimes i use vs code sometime i use intellij it's totally like but but i i mostly like vs code because i my most of the projects i work are on like very much compatible with vs code even if it is a web project even if it is uh some other stuff so now we are launching on mac os and now everything will be faster yes boo boomer gamer yeah bro we have done it so this command worked don't worry uh thanks vibhan is saying there is lot more things guys this is not even five percent of velocity x which i have shown you uh it's a library used with flutter yeah it's a library used with flutter if someone is asking that question okay now we are finally launching in mac os finally finally and uh i'm sure you will love it once we will go to the main things and that can help you in building great uis uh because now there are a lot of things which which needs uh which needs your kind of uh rewriting when it will come to web or even desktop so yeah i will see that we'll see that why it is taking a lot of time this time because it's a new project so sometimes it takes time my previous projects just works like a charm it's just when you click it just starts but it's time it's creating maybe a lot of dependencies or downloading something like it was downloading darwin related stuff one thing is that it's very tough to wear this headphones for a long time it's just painful till the time you can ask your questions if you have any questions please show responsive we will i'll show you responsive don't worry just wait for it to build otherwise i cannot show you m1 chip yes i am using m1 chip um okay so in the meantime you can ask your questions uh so that we can utilize this time it's a live uh video so expect some delays and uh we will still try to do lot of stuff after running this application okay let's do one thing let's try one more time terminating it and starting again sometimes these things happen like this um okay okay good vibes yeah great uh live share uh live will be available after this video on the channel itself by the way if you haven't subscribed to this channel please subscribe please like the video if you enjoy my content if you learnt something out of it if you don't learn anything if you don't enjoy then obviously you can ignore it but if you do then please like and please share with your friends and uh yeah that really helps and i'm back on the channel i haven't been pushing a lot of videos recently because of a lot of issues i was going through i'll definitely share all of these things very soon okay so our mac os app finally ran but uh it got some other issues uh okay build db something maybe we have to run flutter clean and then it should fix the problem so flutter clean one more time guys uh okay someone said path mystery okay let's take his question his question is what is make versus make centered make is basically you just say completion of your widget and make centered means you complete your widget and wrap it with center so make center just wraps your widget with the center widget that's it so if you'll go inside make center let me just take you to make center then you will see make centered is nothing but center and your widget that's it that's that's what it is doing it's just a hack and not a hack i would say it's a it was pre-planned and uh sometimes you have to center things a lot so uh that can be really useful so make is uh that much usable and uh with center so make centered that then comes into the picture uh are you seeing comments yes i am seeing comments i know you you are from web era can you please tell us flutter web out of 10 marks our flutter web has a certain use case i would say i won't say that everyone can use flutter web for all kind of scenarios uh but um yeah i can show uh some yeah so i was talking about flutter um uh what i was talking about web right flutter web so flutter web is basically a good platform but it's not for all the scenarios maybe if you are willing to make an application like an admin panel where you have some sort of apps related stuff then maybe you can use velocity uh sorry flutter web and if you are wondering uh to make something like a website where lot of animations are there you can try flutter web but maybe if you want seo and all those things so right now flutter web might not be a right choice if you want something for documentation then again flutter web might not be a right choice but if you are making a single page app where like you have a mobile app already and you want you don't want to lose your users because they don't have android phone or ios phone then or maybe they don't want to install the app then maybe you can publish a web version as well that's our advantage you get with flutter web um by the way if you want to run learn dart basics or flutter basics then you can go to codepool.dev and there you will find dart playbook and flutter track for beginners that's absolutely free so please you can check it out and i think that will help you a lot in learning okay guys i think we have given sufficient time for it to run and it's not running for some reason so what i'll do i'll go back um uh i'll go back to mobile version and we will try to uh esculet can work with web sql uh sqlite how you want to make it work is a different question finally it rain guys okay after a long time when we were about to give up it finally worked this is the life of a programmer when you've tried when you are about to give up things work and that's when i say don't ever give up okay now we can see now you are using velocity x and the good part is that even if you go to any space you can see we are not seeing any overflow issue guys okay now uh what we can do we can do some more stuff with this this is looking really good uh we don't need simulator anymore so simulator just go away okay now what we can do guys ah let's do one thing let's give it some space like a mobile okay now what we can do rather than saying we said we said that size is 300 into 200 right rather than what we can say we have introduced a new widget a new uh option here size pct pct is percentage okay so what you can say you can pass the context you can say bits percentage how much width your ui should take on any screen right so let's say our ui is taking 50 percent so i'll say 50 how much height percent you want to take it so i would say just 10 percent of height now if you will do this and you will do a hot reload you will see this is what we get okay height is 10 let's make it to 20 and then ah this is this is what we made but this time this is a percentage thing right so now what will happen now if i'll expand my widget then you will see some beauty so it's taking always 50 percent of the width and even if you go like this then also you'll see it is always take 50 percent of the width similarly it will always take 20 percent of the height and yeah up to up to end and even if you go big then also it takes that so this is fully responsive as such uh you don't have to face any issue and now i will show you some more things which you can do to make your uh web ex like what i should say um to make it more responsive let's make it simple so what you can do is uh let's let's wrap it with the column okay so we can use something called we stack we stack and column is one or the same thing you just can specify this like this and you get the same result but on the top so we can make it center we have to center the v stack so you can just say okay dot centered also you can use if you want to center something by the way so this is this is what we have now what we will do we will have another widget here uh which will on mobile screen it will show that it i am mobile and when it comes to web it will show i am web okay or i am not mobile okay so you can use something called vx device so what is vx device it gives you two choices what happens most of the time we uh we have two ways of doing dealing with responsive designs either we can make it a different for different different screen sizes or we can take a decision for small screen and bigger screens so if you want to take the second approach where you have a small screen let's say a mobile screen and one big screen let's say a tablet web or desktop then uh you can use vx device but if you have more use cases let's say if you have medium small extra small large extra large all these sort of configuration you need then you you can use something called vx responsive now how that works let me tell you so vx device for mobile we can say uh i am mobile dot text dot make for example this is what we get right and for web i will say i am not mobile dot text dot make okay don't judge anything else i just this is just for fun oh it's looking very bad by the way let's wrap it with the box and let's make it a little bit more crazy box dot let's say we say indigo 200 dot make what we get okay and similarly so indigo and for web we will use dot red 200 and you can see right now what it will say it is saying i am not mobile if you can see here let's make it a little bit bigger as well dot excel 5 dot xl5 and also let's give some padding of 16 p16 and on the top as well we want to give some padding so let's say p16 okay now we will see uh yeah i am not mobile you can see that right also we can add padding to this vx device itself so vx device here we have and let's add some padding from top and bottom p16 and yeah and also make it centered in fact make centered uh okay looks good and now guys you can see uh it didn't work yeah it worked but it will not center because we are not giving column the center so let's move back to make that should be fine okay now you can see i am not mobile because uh we are using a larger screen than mobile it is not a mobile screen but if you'll go to mobile screen let's say and you can see it is saying i am mobile now it is a mobile kind of screen and if if you go big it will say i am not mobile all the time so you have two uh options over here either you can choose mobile or not mobile or whatever right uh i have a question abhishek please ask do we have any certification no we don't have any certification for flutter yet uh will this be available as a video on youtube after stream yes polyes it will be there uh what is best state management solution for flutter no there is no best state management solution you will use whatever works for you so that's it will be the answer but uh if you're using velocity x you can use the inbuilt uh like solution as well for state management if you want i can show you that as well apk size is 6mb on install flutter app size goes to 25 mb uh that is like the data size is different and whatever app you will use uh the data keeps increasing the things which you do inside your app so that is pretty much normal okay so this was vx device now let's see vx responsive as well okay so what we will do uh we will change this from vx device to vx responsive the only difference will be now there is no mobile so we can make it let's say small and similarly we will get large right and we will get similarly properties uh like there are a lot of properties like it so uh either you have to specify all the properties or you can say fallback fallback means if you don't specify something it will go to fallback so for fallback we can just copy this and we can just say i am i am fallback and what you can do rather than red you can also say dot color vx dot random color so random color also you get with vx so now you will see that it is right now saying i am fallback all right uh if i'll change too small okay it's changing its color by the way it's random because i am fall back i am fall back i am fall back i am mobile okay so this means it is large let's go to small oh this is not small where is my small we have to find out the exact size otherwise it will not work i am mobile so this is mobile this is small because so ah because we are not covering extra small as of now that's why it is not showing so now let's do that okay rather than saying i am not mobile we will say i am large and for small we will say i am small and we can have more options like for example let's copy it and we can have something called extra small so extra small also we can use basically our mobile screens is the screens are somewhere between extra small and small so we can say extra small similarly we can add something called medium so medium is also there medium is mostly tablets so i am medium we can say and then we can also say something like large extra large large we have already so i can we can say extra large now uh we will see now it will not say i am see i am extra small it is saying i am not fall back it is not saying that uh and now if we go i am small okay this is this time it is saying i am small now it is saying i am medium then it is saying i am large and now it is saying i am extra large so all these things if you want this kind of experience then you can use this as well now there might be one more case let's say you have already one widget here now using velocity x right and this this one does not this one is not using vx device or anything right but what you want uh this black color which we are using right you want to say for mobile i want to use white color but for web i uh or for mobile i want to use black color but for web i want to use white color how you will do that so you can say dot color right you can use something called context and using context you get lot of other things like context gives you accent color canvas color card color directly in velocity x and here you can say is mobile there is a property there is a boolean flag which say is mobile is it mobile then you can say colors dot black for example and if it is not mobile then we will say colors dot white something like this now if you will just refresh it then you will see now using velocity x is black but now if i increase the size you can see now it became white as soon as i increased it now if i go back it is black again so this is also one of the things which you can do there are more other stuff now let's say we said i am extra small what we can say after dot make you can also say dot marquee dot marquees might not be directly available here uh what we can do in fact we can wrap it with a vx marquee and that will also make your life easier for example and that will give some animation to it basically but let's let's uh move it right now it's we don't need it okay what else we can do right uh please complete one page designed with vx we will do it we will do it i have already created some videos on velocity x designs you can check that as well what is the package name that you you use package name is velocity x only uh how to work on background that's this is not a video about that please don't ask uh questions which is not uh relevant to this stream uh we will make it um you can ask it on other stream where i'll do and ask me anything kind of thing which emulator are you using i am not using any emulator i am just using this uh this particular thing which is our desktop environment it is a desktop app uh someone asked how about md window you can use it so there is context dot is mobile there is an md window as well so context dot if you will say md window size then you can give mobile window size so if you will check it if mobile window size dot uh mobile window size directly you want to specify obviously uh let's try to do something uh we can print it right now just to check if it is working right so here in the build you can just say print we context dot md so md is basically material design and based on material design there are some things like columns how many columns are there in your screen how many cutter what is the cutter size uh device type what is the device type which is the device size and window size in fact using context you can check the orientation as well so empty window size uh if you want to know then you can use context and it will give you the size here so you can see here if you can see md window size is mobile window size dot extra small and that's what it is printing here as well i am extra small uh velocity x for production level application there are not just me there are other people also who are using velocity x for production by the way i am extra small that's doesn't sound right yes this this is bad english i am extra small is definitely not sounds good it's just for demonstration it should be just extra small i am is just we were using something else so we just replace few words so extra small should be fine right so let's let's make it okay if you just want it to happen then i am happy to do the change that's the least i can do right now okay medium okay anything else which you want me to explain in last five minutes i can explain then in the next workshop we will see all other beautiful things which you can do uh that is this desktop type app is used in beta or stable uh i am using right now flutter stable as you can see here flutter 2.0.1 so you have to enable sometimes so if it is not enabled in your app then you have to enable it uh sim slip like shift ui exactly because flutter velocity x is inspired from shift ui and television css so some things will be taken from swift ui some things are taken from tailwind some things are flutter only so it's a combination of all those and then having some more utilities uh by the way you can create a lot of great stuff this is just a sample okay by the way we had an app bar right what about using a vx app bar so let's just say vxf bar and now there is nothing different right it is the same thing but you know what now what you can do you can have something called search option here so if you say search bar and if you'll say true then if you refresh it then you will see there is a search bar now on the top can you see no let me just show you so this is the search bar if you will click here uh let's click okay it it is opening this search here and you can enter something over here and that also can be very useful for your application right so this is also offered by velocity x there are n number of things which you can do with velocity x if you will just say see this uh there is a documentation which i have been doing it's it's still not 100 complete but it is 70 complete eighty percent complete where you will find all the things like for example if you go to docs uh let me just go to a bigger version of it then you can see we have customization colors these are not all the colors we we will add all the other colors which were added recently yesterday so these are previous colors but we have added even more colors now uh layout you can see what you can use for padding all these things are there flags box as well card as well list as well scroll as well okay by the way for scrolling you can just say at the end of your column or v stack you can just say dot scroll vertical or horizontal whatever you want to say so i can say scroll vertical and that should be fine now uh you can use typography shapes okay i haven't shown you the shapes yet okay i'll show you shapes quickly and then we will finish it responsive layout also super vx is also another series where you will find vx wiper vx animator vx platform vx toast vx stepper vx rating all the things which flutter does not offer directly and then you have extensions as well lot of extension build context string extension bool extension integer extension list extension which are not there in documentation and list last but not the least is state management also which velocity x now offers so it is a combination of so many things okay vibhanshu is asking one question device preview with more about animation we will do more stuff with velocity x about animations as well uh yes nike rahul if you are a beginner if you want to learn flutter you can go to code poor youtube channel 30 days of flutter is almost completed so you can check it out i want to get the height of a parent inside a child how can i get it using media query or any other ways vivancio there is a video of mine on m tech viral youtube channel uh where you are watching this video uh just write how to get a size of a widget something like that in your search bar my video will definitely come and you can watch that and you can get the height from there so all the things whichever will come to your mind i might have already made a video on it okay guys so one thing which i definitely want to show you after this is vx shapes and there are a lot of shapes you can draw with vx so for example after responsive we will see how about creating a circle so how simple it can be you can just say vx circle and you will find a circle somewhere and you can can you see the circle right isn't it awesome uh similarly uh okay so what if i want to change the color of the circle right so if you have background color as well so let's say vx dot amber 700 for example and you know what there is one more thing which you can do which i'll just show you let me just hot reload okay this is what we got uh it's not a good circle let's use some other color emerald emerald is the new color which has been added in velocity x so let's use that color and this color looks nice uh let's give some padding this time we will give padding of 8 for example just to try things out and let's say if you want to half this circle okay this is a full circle what if you want just half of it then you can what you can do is you can just say dot dot clip half it should be clip half right clip and then you will see something like it's isn't it good uh okay now uh this is vx circus similarly you have lot of other options you can use vx arc vx badge vx bevel so let's see vx capsule there is something called vx capsule as well which gives you capsule like space capsule like size and all right which is again really good you have something called vx triangle as well which gives you a triangle sort of uh shape which can be very useful there is something called vx ticket as well ticket shape which which which can give you and that will also look good you could draw an android logo that way i already have a video of drawing android logo with this thing so you can check it out on my channel itself and now you can see we have a ticket shape here after the triangle right and all these things you can use like there are a lot of things ah similarly let's say on the top we wanted to have uh let's say an arc so vx arc we can use definitely height let's say we give a 200 and child um do we need a child let's say off stage let's let's add a container so you can use vx box like this as well vxbox dot color let's say teal 500 and dot make okay so this is another way of using vx arc and then you will see we will probably get an arc or we are having some issue here why because we haven't given any height of the box i guess so we can also say with height size basically or you can also say square okay if you want same size for width or height so let's say if we say 200 will we get an arc yes so you can see we got an arc of 200 uh let's do a size in fact rather than square so i'll say size context dot screen width i want the entire width of the screen and height i can make it 200 for example now what you will see you will see something like this and uh if we change the arc height then you can get even better results like this like this and uh if you want half of it let's say arc type you can specify so vs vx arc type and you can say convex or convey so that it will be either this or this so it is by default convex let's try convey and you can see this right so it's pretty much great if you want to try it vx arc similarly there are other things as well you can do you can also say vx edge okay so vx edge and if you just want from right so you can say vxh dot right and it will give the arc like this or if you want yeah i mean there are a lot of things which you can do with this so uh i hope you enjoyed this right um and that's it i guess from this workshop it's been already more than an hour or so so uh if you enjoyed then please let me know in the comments and uh i will do more workshops of velocity x where we will create some good designs as well so please like the video if you enjoyed and press the uh press the subscribe button if you are not the subscriber already and if you want more stuff on something then please let me know in the comments as well and i'll see in the next video um if you really want flutter 2.0 video still then also let me know i can create another video on flutter 2.0 whatever the new things which were added what are the uh some things which you might have not seen in in maybe in the official announcement there are some things which miss uh during the announcement so i can uh party saying thanks for this beautiful wonderful workshop thank you part uh gaurav it's really true love okay awesome waiting for next videos yes we will do it soon just spin that has donated 100 rupees thank you just spindle whatever you donate to this channel by the way uh goes to basically it goes to uh the development of the channel or the utilities which we use for the channel uh so thanks for that also you can check codeput.dev which is another my website where you can also take some subscription if you want to support me uh where you have lot of content available to consume most of them are free or membership content and some of them are paid as well uh where you have state management course you have animation course and or lot of other stuff so check velocity x oh sorry what happens what happens sometimes is basically you just uh say those things which are in your mind right so it's codeput.dev the link you can see here uh codepool.dev you can check it out and uh take the subscription i hope you will enjoy it it's right now running on discounts although if you don't need it don't buy it that's not a compulsion uh but there are a lot of other stuff you can it can definitely help you in learning so much great stuff so i hope that you will definitely try it out at least and uh and yeah that's it guys and i this is now it's time for my walk and uh yeah i'm just about to take some break so thanks for watching again check out codeput.dev like the video if you haven't liked it yet we will do more workshops we will do lot more other stuff and these workshops will also go on codeput.dev some podcast will also go on codeput.dev um as of now i don't give any one to one session suggest minded but we will see in future if i am basically planning few things here and there i'll let you know in the channel itself if something will come in future so thanks guys see you next time bye bye take care

Channel: Codepur

Views: 5,517

Keywords:

Id: OXIsrtDAA2k

Length: 74min 24sec (4464 seconds)

Published: Fri Mar 12 2021