Fastest Flutter Development | VelocityX 1.0 Released | All in 1 | With Animations Support

[Music] my [Music] [Music] [Applause] [Music] hey what's up people welcome back to another tutorial and in this video again we are going to talk about velocity x and this is version 1.0 and i'm really excited to announce this i just released this version and it has a lot of things and i'm really proud that uh we have reached to a position where a lot of people are using velocity x and lot of new things has been coming and i'm using it almost in every application and i'll receive a lot of messages so i think this video is uh really really helpful for everyone who is doing flutter and trust me uh there are many things which are missing from flutter which has been added to lsctx that's why it has been uh you know going through this 0.1234 and now it has reached 1.0 which means it's now a complete package itself and and yes why you should use velocity x because it's um it helps you in writing uh uis even faster 40 more faster and it supports responsive uis it's a backward compatible as well like you can use it with your existing widgets as well and it works with web android ios whatever you want to use it's free and open source so you don't have to even think about that and there has been some changes on the github as well and let's look at the release notes so this is 1.00 and you can see a lot of things has been added and yeah many of the things has been mentioned here and we will also see a quick demo that how these things work so let's switch it to that and trust me this is this video is not going to waste your time you will definitely love it and uh you will definitely use it as well in almost every application from now so uh let's go back to code and let's see how things work with this new version so i have this demo setup over here and let me delete this i can create it again and here you go so so first of all you have to do is you have to go to your popspec.yml and you have to increase your version of velocity x from 0.5.0 to 1.0.0 if you are not using it then add it manually and then in the demo dot dot i'll show you what it can do so the first thing which we'll talk about is this vx timeline widget okay so that's what we can talk about so vx timeline widget and vx skeleton marquee batch and everything is there so let's do it quickly so timeline is something which you know uh if you are showing a transaction a history or something it can be really handy and the purpose of velocity x is to ease your life using these predefined widgets which does not come up with flutter and this version is specially targeted for some more widgets as well as animations so let's start with the timeline view so i'll create a timeline view quickly and you can see how easy we can do that so timeline view and here i can make a stateless widget let's say and i can call it timeline view just to make our code clean and this rapper will be live so you can check it out so in the timeline view if you see what you have to do you can use vx timeline basically that's a new widget which takes a lot of parameters but the required one is timeline list and uh we can generate a list we can say something like list or generate let's uh generate five items and in the index this uh timeline list takes vx timeline model okay so it has a predefined model which you have to use so i can say vx timeline uh model yes and this model has id heading what you had what heading you want to use so i'm assuming you will have some other list and then you will map it so id let's make it index for heading let's use today's date let's say november 0 4 2020 and for description we can add welcome to vx something like that and yes you are done so you have a timeline view and if you have missed the animation that let me do a hot restart just focus here and you will see an animation we can also uh increase the duration let's say three dot seconds and now if you i if i hot restart then you can see the animation now and uh you can customize it like if you want to show a trailing then you can do it let's say show trailing true then you get an action button over here and there is a callback as well called on item tab so you can use that as well line color heading color custom trailing widget if you want to provide you can do everything with this so this is vx timeline i hope this can be useful for many of the use cases like history and cards and transactions and lot of things so that's one of the widgets with animation and another widget which i'll i can talk about here is skeleton uh so we already have something called a shimmer so if i'll show you here so you can see let's say if i say hi vx dot text dot xl3 dot let's say red 500 all right let's make it gray gray 500 dot make so this is this is normal text which you can see and i can add a shimmer effect dot shimmer if i use but shima is basically to give an effect to this particular widget which is a normal widget which can be an actually an actual data right but a lot of people want to use some loading skeletons which you can do with velocity x using vx0 card and list so there is something called let's say vx 0 card okay you can use something like that and it shows you card i don't know if you can see it properly but let's see if we have is dark so dark more true then you can see right this this is predefined you cannot customize it more so now what you can do is basically you can have a skeleton as well so let's say if i have a container over here or you can use vx box and you can just say dot skeleton okay and you can give it a height let's say height can be 20 width can be 100 and that's it that's all you have to do and you can see this is skeleton let me change its color then you can see it better so i can just say color and i can just say vx dot green 400 and you can see this skeleton right so this is skeleton is nothing but like a placeholder which shows loading and all so this is a new widget this is a new animation which we have added so pretty much excited that you would like to use it in your application now moving ahead uh let's talk about the next one which is vx marquee so if you have seen any news channel okay there is a widget which is running all the time in the bottom and we can do that now in velocity x so this update is maximum covering animations and some other widgets so let's see that so let's say if i say breaking news coming from velocity x let's actually say to string vx maybe mark yes and now you can see i have to give it some actually height or um let's add some height over here otherwise it won't work so maybe 10 percent height is fine yes so let's increase it to 20 or 10 is fine so you can see the this is how you can use a marquee widget it works with the string you don't even have to add a text it's a extension method you can use vx marquee as well and you can provide your text and you can add a text style over here as well so there is a property called ratio of blank to screen scroll access text style so pretty much everything you can do over here as well so if it's a normal text style which you use so let's increase the font size to 20 and you can see it right so this is this is how marquee effect works so this is another new cool animation kind of widget which you can use um coming again to vx badge so badge is something which you know i use a lot of times a lot of places uh we required to use some kind of badge or something right so for that i have got you covered and we have something called uh let's say let's do one thing now we already have a widget over here this orientation dot portrait okay so what we'll do uh let's go here this orientation dot portrait where it is so this is the context dot orientation and let's add a badge over here so you can just say dot badge or you can use vx badge it's totally your choice if you want to use extension methods you can use it if you want to use it as a widget so you can use it so if you are if you are following this declarative ui pattern then also it's fine if you want to use this dot way of writing it then also you can do it so dot badge and you can see we have a badge on the top over here and by default it's uh it's a round but you can change it let's say if you want to add a count i can add a count let's say 100 and i can change the color of the badge let's say colors dot red and you can see dot 100 over here and if you limit it so if limit is true then it will just show 99 plus something like that and let's increase its size as well because it's looking a very very smaller so let's make it 20 and yes this is looking better so yeah i'm in and let's make the count as five this is looking good as as of now i think and yeah you can do a lot of customization with this let's say if you want uh so there is type so you can use vx badge type so batch type can be uh let's say ellipse so it will ellipsize it and then you can just make it a point point means that there will be just this dot nothing else okay so you can do that as well so this is a badge which you can do pretty good you can try it vx badge you can use it now coming to toast i am like i'm really uh into toast and all but before that uh i'll also show you that some more extension in terms of so we used to have dot click dot you know md click and that is useful when you have to do multiple click operations let's say you want to implement uh single click double click and long press all together then you can use click dot or dot md click or something like that but if you just want one single tap or just uh normal stuff then now you can do that so let's go to this circular image so this is uh this this image image dot circle let's let's say we want to apply something on here so we can now directly say on tap on ink tab which includes ink well on double tap and on feedback tab as well which also gives vibration so that these are the new widgets which has been added so let's say on tap okay so on tap we can do something so now we can use something called vx toast okay so vxtost and you can just use dot show it takes a context and it takes a message uh let's say welcome to vx toast and that's all you have to do and now if i'll click on this image you can see welcome to vxtost on the bottom you can change the position as well so there is a property called position as well you can see show time color text color pd horizontal which means padding background color everything you can control so let's say um position i can set vx position batch position i think toast position and i can make it top and now if i click on this image you can see welcome to vx toast if you change the background color let's say colors dot red if you click here then this is pretty much good right and another way of doing it can be you can directly use your context okay this is one way of doing it you can directly use your context also and you can just say contacts dot showtos toast okay and you can pass the message over here and that's it like this is the another way of doing it so if i click over here you can still see the toast similarly you can say um this is toast but let's say if you want to have a loading kind of thing so you can say vs vxtost dot show loading okay or context dot show loading something like that so what it does is basically it says let's say if i add a loading over here uh what it will do it will give me a callback as well which i can use to you know let's say if this is the callback uh let's say close okay so i can say future dot delayed and i can pass the duration let's say two seconds after two seconds i want to close this loading so now let's let's click here then let's see what happens so you can see this loading symbol over here and after two seconds it is closed so some something like that you can do you can again customize it as well you can give padding and all so it's totally customizable and loading can be done easily now using velocity x and yeah toast if you want to show a toast then you can do it and let me show you by context how you use it so you can say context dot show loading and you can pass the message so this this this is pretty much it like this is similar but uh it's your preference how you want to use it so yeah basically with velocity x you have always two ways of doing it most of the time and now coming back to another thing so there has been new extension added for scroll controller by which you can you know go to top bottom and all those things i'm not gonna cover that in this video on tap awning tab i have already told you now let's talk about vx test field and then we will talk about with animation and all so um this new vx test text field i i was not thinking about adding it but then text field sometimes you know i have been using similar text field a lot of times and that that is like that takes a lot of thing to customize with the material text field which we get so now what you can do you can have let's say if i give it some padding here then we will get some space okay so now after breaking news i will add a text field over here so you can use something called vx text field okay vx text field does not have any extension method so you have to use it this way only and now you can see we have a text field okay so this this is normal uh text field also works like this but but now there are some things which you can do so first of all um there is something called border type okay and you can use vx text field border type and they are basically one border type is underline which you can see right now another border type can be round a line okay so round line if you see then it it becomes rounded with just one line of code so if you want to use that and even if you go to vx border type you can see none round line and underline are three things and if you say none then there is none like no border at all so this is just a normal text but that's not it that's not it that's not just what it offers it also have a property called uh is password okay if you say is password is true so then you see this this i icon on the right which you can customize again and if i write something like this then you can see the cross button as well right which does not come directly with the normal text field so you can click on this button and now if i write it again and if i click on this particular thing then you can see this works okay so yeah these are some more additions which has been done so it makes your life a little bit easier then it has you know this clear button if you don't want it then you can hide it icon keyboard type and everything which text field offers is also there so i mean yeah it's it's your call if you want to use it it's if you don't want to use it then you can ignore it but i generally use it in my application so that's why i thought about showing you and yes it's it's pretty damn good and even if you go to dark mode okay this works in dark mode as well let me just show you quickly without wasting a lot of your time so brightness dot dark let's try that and if i move to dark mode you can see this still works in dark mode and looks pretty good i mean i i love the dark mode version more so let's stick to the dark mode and let's give some padding here as well looks good looks good to me right so i i hope you will love this text field as well uh next thing let's talk about the animations okay so i already have uh so this demo app is already there in velocity x documentation so you can check it out it has the animation so um let me show you that in fact and uh if i show you that then you can see how animation works but so basically you can use animated box with velocity x and you can perform some animations for example i'll show you one of the examples so i have another window over here with velocity x and i'm gonna show this example running on the mobile app so let's let's uh just give me a moment and uh i should be able to run it okay so i'll select the device here pixel 4a and i'll run it and let's see how that works i know this font is not visible a lot but let's let me zoom it a little bit so yes so here you can see animated box example so what's happening in this example is nothing but we are using uh normal random values for width height and color and for border as well and then you are we are using vx animated box which is animated container to be honest and what it does is basically this which i'm gonna just show you so if you see this you can see this container over here which is which is changing its color its position its everything and the code which we have written so we have said vx animated box dot seconds like the animation duration is seconds which is 5 fast out slow in is the curve type which we are using and we are setting width height and color and rounded property so this is uh like a easy way to do it so this is the easiest thing to do and then you can see this animated text okay so this is what i'm gonna just demo now because this is something which you will find a lot more interesting so i'm just moving this window somewhere else and let's remove this as well and let's see this how the how to work with it with the animation normal animation and trust me this will make your life easier so let's let's say animation view something like that and let's create a widget over here so i can just say a stateful widget this time and i'll call it animation view okay so uh and we will have a text so let's say we have something called an animated text okay so animated text and we can just say uh dot dot text dot xl4 dot black dot white dot white uh and dot make centered so you can see we have animated text over here now we want to have some animation okay we want to add some animation so what will be the steps i have reduced the steps um the normal proce the way of doing it is typically a little bit difficult so now you can do it easily so what you have to do is first of all you have to add a mix in so we can say with single ticker provider state mix in that's one thing and then uh let's uh let's override init state and that's that's all you have to do and it will not work directly but what you can do uh now you can use something called with animation so there is something called uh with animation or you can use with repeat animation okay so for that i think uh repeat animation so it's it's not giving us uh the shortcut directly but if you use it once then it should work yes so with repeat animation is something which you can use or you can use with animation so both this method works so repeat is basically it will repeat itself again and again and with no animation just works once okay so let's say with repeat animation and it takes a v-sync so we can just say this okay and then it takes a callback so in the callback it it will basically give you the animated uh animation value and the controller value which we will use for sure what take what else it wants ah it wants a tween as when okay so for tween we can say let's say if you want to give it a tween you can just say tween begin with 0.0 and with maybe and with 1.0 we will change it we will change it and i'll show you how that works and that's that's more or less you have to do with repeat animation you don't have to do anything and uh yeah there is repeat period upper bound lower bound which you can do but uh that's that's not very necessary so now uh how the animation would work right let's close this so how animation will work um let's let's have a value called anim okay so we can just say anime final anim okay and double double it should be double not final double anime so double anime by default let's make it 1.0 okay or let's make it yeah 1.0 is the normal value and now the begin value let's start with 0.1 and end it with 2.0 because we want to scale this text okay now what you can do this is more or less you have to do and in the callback you are getting this animation value so you have to just say this animation this anime value will be equal to this animation value so basically what is happening we added this single ticker provider mix in we have added this double anim which is 1.0 and then we have added repeat animation which takes a vsync gives you call back and then it asks for a tween there is a animation property as well custom animation if you want to provide it and you can also provide the curve so right now i haven't provided that but it will take something in default and once you set the anime scroll to animation value then you have to call set state so that that's why we have made it a stateful widget and now guys what you have to do you have to just say dot scale and you can provide the scale value so scale value which can be uh let's say any value and and now if i do a hot restart once because it's so you can see right so this is the repeat animation but this is going only in one direction right so uh you can also say something called is re repeat reversed then i if i make it true then you will see if i do hot restart then it will go like this and you can see this animation how much how much lines of code just three to four lines of code and we are scaling it right so scale is nothing it's another extension method which velocity x offers which which in the background uh uses transform dot scale right so this is one way of doing it you can provide your custom animation and let's change the curve so you can just say let's say curves dot uh curve start fast out slow in then the animation will change let's do a hot restart and then we will see see the fast one and the slow fast and slow fast and slow so a lot of things which we can do here and uh i think this is the easiest way i can do it you don't have to deal with any animation controller or as such and this is this is done like now if i use with animation then obviously there is there will be only once the animation will happen only in forward and nothing else will happen so you can use with animation you can use with repeat animation and then you also get some more properties like duration initial value with with animation with repeat animation you get more values like if you want to set a lower bound upper bound or repeat period that what should be the period of that repetition right so you can do that i hope that you will enjoy this particular way of writing animations and so as you can see we can do a lot of different kind of animations and there are different widgets as well which is now available with velocity x there is a new animated height viewpager which you can see in the demo example and uh it is really good like it it animates uh with page view and it also adds just the height so that is something which i i'll show you but i have two widgets which i definitely want to highlight uh if i if you have used you know stepper in flutter so um usually because i have done swift ui development as well xamarin as well so there um stepper is something else okay and in flutter stepper is something different so if you want to achieve that stepper where we have plus minus button and we can step basically so we can do with velocity x now and i really love this widget i use it at a lot of places so if i want to show you then i i can show you here after the text field what i'll show i can have something called vx stepper again this is another widget you cannot have you don't have a extension method for this and let's add some padding as well and you can see we have now minus and plus button over here and minus is by default disabled and if i press plus and then you can see and the good part here is that this uh this is also an input text so you can just say 100 okay you can say 1000 but 1000 is not supported i have disabled it you can just add a maximum 999. so um so this yeah and you can totally customize it and if you don't want to have a let's say this input field here so you can just say disable input to true and uh you can pretty much customize it as like this is another button this is another button so you can change their color so and you can also change the text color you can set minimum maximum let's say if you say step is 5 then if i'll click on plus then 5 10 15 this is this is how it will work so everything is kind of configurable you can configure it and another thing which is missing from flutter is basically the rating bar so you can now use something called vx rating as well so you can say max rating and on rating update what will happen similarly it also gives you a callback this is tapper also gives you a callback so you have this on change which basically you can use and if we see this vx rating we got this five ratings i'll add some padding over here as well and this this you can change the size as well you can change the image as well so you can see normal and selected image you can pick anything from asset and you can supply over here let's say max rating is 10 then you can say 10 and if i make it 20 then you will see that now it has been divided according to 20 okay so this is what you can do um and uh yeah if you let's say if you want to change the color let's say if i say green over here normal color this is selected but if you see the normal so it should be selected rather that will look much better so selection color you can see we can make it green but yes red was looking better we can increase the size as well let's make it 40 and this is this is much better and again i use it a lot of places but even if you want to use it you can use it so um velocity x does not you know try to build every widget again uh which is there in flutter but rather something which is not there in flutter to make your life even easier so that's vx rating is one of the examples of that and uh similarly now you can do navigations or routing using velocity x as well and uh for that i'll i'll show you the demo which we have already like i have uh which you can find on the github repo as well so if you see this demo let me just uh decrease the zoom of this a little bit reset zoom and let's make it a little smaller okay now if you see this demo okay let me increase the demo size i won't take much time over here and uh so basically you have now you using extension method you can do something called let's say if you see this tap me okay so this is the tap me widget and this widget needs to be a separate widget uh this is essential to make it work so you can do context.navigator.push you can use a page which is a widget and then you can say dot vx preview route so vx preview route is nothing but similar to let's say you can also use here material page route okay which you might have used already if if i use that let's say if i use material page route then what will happen if i click on tap me it will move to another screen but it has a different animation okay just just just focus on the animation and if i use cupertino route so if you see this is this is how cupertino appears okay from the right to left okay and now we have something called vx preview route which is good for using images and enlarging them so you can use it for uh for kind of uh if you want to kind of zoom if you want to enlarge then maybe this route can be useful because it performs some animation as well so if i click over here then you can see the animation which looks much better right oh this is has been selected so if you see again this is the animation which you get which is pretty good according to me so yeah this is this is also something which you can do and also um this this this is what i have covered here as well and these are all the uh existing widget which used to come i was talking about the vx animated page viewer right so if i show you again here then uh here we go where we have this vx animated page view so you can check the link here and it uses vx animated height view and it takes a page view builder what it does is that if you see this image okay this looks fine this is a page viewer but if you scroll then you can see height is changing okay and it is adjusting by itself and it performs a cool animation as well so this is what you can do with vx animated height view this is one or more widget and let's see what else is there so we have material extension added expand background color corner radius on feedback tab which i already told you offset preferred size even silver box adapter extension as well one more thing let's talk about mouse region okay so that's that's pretty cool and i definitely want to show you that so what i'll do i'll go back to my demo this demo and let's uh let's set it to 100 okay this is fine 121 okay so now uh this this is uh what you can see right so uh now let's say we have this uh inr one three two six four something like that so what we can do after this we can just add on over okay so on hover on mouse hover is there on mouse enter is there so let's do let's try on hover okay so on mouse hover and it gives you an event okay and this event gives you so much detail so let's print some of the details so uh let's try to print event dot uh maybe it's delta or distance something uh let's let's try delta so if i try to do do that let's open this debug console let's clean it up and now if i go to and hover on here then you can see the position is coming so this hover effect is there as you can see similarly i can perform something like on mouse enter and similarly i'll get an event and i can print rather than event let's print entered okay this is really cool and now you can see uh i have i have received enter okay so you can see entered is here and enter exit once only work once on whoever works many times right so that's what you can do and um to be honest if you want to perform multiple things all together then rather than doing it one by one because it's not a good practice you can just say on mouse region okay so on not on mouse just you can say mouse region and mouse region can give you a mouse cursor on enter on exit on hover even opaque and all those things so yes pretty much interesting thing which you should try and it will make your life easier if you are targeting web anyhow so that's that's also a nice update i just wanted to say and few things are missing from here but uh i think you can explore and you can see how many things are there so i'll just show you one more thing maybe um which is like keep alive and all those things you might have used material you must have used so i don't i think we have got the main things covered already so yeah guys this is this is pretty much the velocity x 1.0 update which comes with a lot of features and obviously existing features are already there like if you go to the github repo or even the documentation the documentation is still not complete guys i am working hard on it and if you see the 1.00 is updated and i have i'm bringing more people if you are interested you can also join for documentation because it's all open source and if you see here then we have like something called timeline animation even swiper is kind of interesting if you see over here right so this is these are all the things which you can do i will create separate videos for all of these for vx responsive and all for that i need the thumbs up from your side let me know in the comments what you think about velocity x and will you use it in your project or not and uh yes let me share uh more things on my channel so subscribe to the channel and yes uh again guys lot of other updates would be coming soon with this and trust me this will definitely make your life easier and also uh there are a lot of people who are now using it in production so i'm pretty much sure that when you will use it you will fall in love with this and it will definitely make your fast flutter development even faster so it's always a long video but i hope you enjoyed this video you learn a lot of things and it will definitely help you in achieving so many things so thanks for watching and i'll catch you in the next one bye bye take care and i'll come with more felicity explorers please let me know in the comments your thoughts

Channel: Codepur

Views: 15,958

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, flutter course, mtechviral, velocityx flutter, velocityx, flutter animation, flutter animation tutorial, flutter toast, flutter swiper, flutter timeline, flutter stepper, flutter ratings, flutter shimmer, flutter marquee, flutter badge, flutter mouse, flutter routes

Id: G0fGsI-pEOY

Length: 36min 45sec (2205 seconds)

Published: Wed Nov 04 2020