Flutter Tutorial - On Hover Effect & Hover Animations | Flutter Web App

how to add hover effects and hover animations to texts buttons or any other widgets in flutter if you are new here subscribe to my channel and make sure to watch this video till the end therefore i have created here a simple button on the right side which is here this outline button and we also can give it here some more styles so we can give it here for example a border around and this looks then like this and we also can set here next to the border a different shape for our button and this makes our button here more rounded and lastly i also want to set some padding so that we have a better button with more padding and space inside all right and now every time if we hover here over our button then we want to scale this button a bit up to achieve this we want to wrap here our whole button inside of another widget on hover button and inside of this widget we go then to the build message and here we return then this chart that we also have put inside of the constructor next wrap your child widget inside of the mouse region widget and with this we can then detect if our widget gets then the cursor and therefore you have here the property on enter so if we later enter with our cursor the widget then we are going inside of this method and we want to call that another method on enter it and we want to set the flag to true and secondly you also have then a method on exit so if we are here on this widget and we exit with the coda our widget then we are going here inside and then we want to call again this method only we put here this time the false flag inside let's also create this on android message where we get every time the state if we have hovered over our button or not and we want to save then this harvard state in our state and finally based on this hybrid state we want to scale then our button up or down to achieve this we simply wrap here our button widget which is here this child widget inside of an animated container you also define here then the duration how long this animation should take so in this case 200 milliseconds and finally you have here this property transform where you can then scale this widget up or down let's now create this transform field and here if you supply the matrix identity then this is a neutral state so nothing is changed to our button and here on this you can then call also a scale message to scale this button up and rescale this button by 110 percent up and finally we choose then based on this harvard state the average transform or we'd simply choose here the matrix identity without the scaling effect then let's now also try it out so if i hover here with the mouse cursor then you see we have here every time the scaling effect and if you like you can also make then the scaling effect larger so now i set it here to 150 percent and then you see that also the scaling effect is bigger instead of the scaling animation you can also supply here other transformations for example here this translate here you can modify the x-coordinate the y-coordinate and the set coordinate and we modify here then the y-coordinate by 8 pixels and now if i hover here over this widget you see that it is animating by 8 pixels every time up and you also can supply here than the other coordinates for example here the x-coordinate and now it is moving up and also to the right side let's also look at a second case where we create a hover effect for normal text widgets let's get started by defining all the text where we want to create our hover effect and within the build method we create then here a list view where we display then all of these text within our item builder therefore let's go here into the item builder and here we get then every time one specific text and based on this text we want to create then simply a text widget and this looks then like this so we have here five simple text and you also can wrap it inside of a container so that it is all left aligned and finally you can wrap around your text widget this on hover button widget that we have created before in this case i have created a copy which i named then on hover tags let's also try it out so if i hover here over the text then it is basically scaling up and this is exactly the same effect which we had before for our button if we hover over our text then we also want to color them and secondly we also want to make this animation more smooth because right now if i go here over it then this has no smooth animation therefore let's go here inside of the on hover text widget and here where we have our harvard transform i also can supply here then a translate effect so that we move this text a bit by 8 pixels to the right side and now if i hover here over this text it is also moving a bit to the right side next if we hover here over our widgets we want to make this effect more smooth and therefore you can go here inside of this animated container and here i add then this sprung over them and to make use of this you need to go to your pops back drama file and here i have included then this sprung package under my dependencies and with this you have real physic animations if you hover over your text and of course you can also modify here the sprung so you can set another stiffness another velocity and so on right now if we hover here over our text then we have every time the same mouse cursor and if you want to change it then you can simply go to the mouse region and here you have this property cursor where you can then set another system cursor and with this if i hover here now over a text then you see that we have another cursor and lastly we also want to modify then the color of our text if we hover over this widget to achieve this color text is pretty simple so we go here up to this final widget where we put every time our text widget inside and instead we want to create here a builder and here we want to set then our is harvard state inside and we also replace here the child by this buildup and finally we go here inside of our build message and instead of the child we return then a builder and here inside we put then this is harvard state of our state and lastly we go then back to the tax page which is calling our on hover text and instead of this type property we set then this time this builder inside and now based on this is harvard state we can then change our text style color and therefore we determine here a new color we set it by default to white and in case we hover over this text then we want to set this text to an orange color and lastly we put then this color here inside of our text style and with this if i hover here over this text you see we have an orange color and by the way if you want to get here this whole source code of this example then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel you

Channel: HeyFlutter․com

Views: 26,356

Keywords: android, animation tutorial, button hover animation, button hover effect, flutter, flutter animations, flutter button transform, flutter hover animation, flutter hover effect, flutter hover slide, flutter mouse event, flutter mouse region, flutter transform, flutter tutorial, flutter tutorial for beginners, flutter widgets, hover, hover effect, ios, mobile, text hover effect, web dev tutorial, webdev

Id: NqvJEtcQweU

Length: 7min 17sec (437 seconds)

Published: Sun Jun 27 2021