~ Smooth ANIMATED Button Press • Flutter Tutorial ♡

[Music] hey what up welcome back to another quick flutter tutorial in this one i want to show you a cool animation technique when you press a button now if you've seen any of my videos you know i love neomorphism and someone actually requested this video so harsh bat my boy i hope you're watching now if you haven't already done so go check out my tutorial for neomorphism for more details about this design aesthetic but just to give you a quick rundown in my scaffold i've got a background color of gray with a strength of 300 and just in the middle i've got this new button standing for new morphic button and so in the file essentially it's just a basic container and inside i've just got a heart icon and the important stuff here for the neomorphism is the color of the actual button is the same as the background color as we had in the home page and so the trick here is to use some shadows so we're going to have a dark shadow on the bottom right and a lighter shadow on the top left which simulates this feeling of having a light from the top left shining down on our button and gives us this nice 3d effect so from this point what i want to do is to make this button tappable right so let's wrap this container in a widget called a gesture detector and on the on tap we want something to happen now i want to be able to reuse this button so if we come up to the top here let's create a final on tap and create the constructor for this one and so what this does is if you come back to the home page where we want to use the new morphic button inside the brackets here you can now see that we have this option to specify what we want to happen when we tap this button right so let's say when we tap this we want to create a method called button pressed so let's come up to the top here and create this method and we are actually also going to need a boolean to know whether it's pressed or not okay to keep track of it so let's create this boolean i'm going to call it is button pressed and initially we'll set it to be false and so if we do tap this button we're going to trigger this method and let's set the state and do some if statements so currently if the button is not pressed then let's make the button pressed to be true and vice versa for the other one so if we tap the button and it's already pressed then we want to say is button pressed false so this way we're just going to flip back between button being pressed and button being not pressed now this information of is button pressed this boolean we want to pass this through to our new morphic button file so let's create this boolean in this one as well so that we can reuse this let's require this one so that we have to specify it in our homepage and so now you can see there's a red squiggle there because we have to specify is button pressed and conveniently we also named it is button pressed cool so to see this actually working is button pressed let's try to change something up so currently my heart icon is a red color and so just to illustrate how this works let's say in the color depending on if the button is pressed or not if it is then let's say i want to return a green for example and if not let's return the same red so now if we go to our button you can see if we click around it's going to switch between green and red and so green is very ugly for a heart so i'm going to change this to red but make it kind of a very light red awesome so with this logic i'm going to do the same thing for the shadows depending on if the button is pressed if it is pressed then don't show any shadows otherwise show our shadows for the neomorphism okay and just to put some comments here just to make it clear no shadows if the button is pressed okay let's see if this works awesome so it's working now you can see it feels really stiff like it feels like it's not a very smooth transition and so that's when we're going to change this container into a animated container and we can specify the duration of this animation so this one you can control to whatever number you want but let's just say 200 milliseconds and now if you click on these you can see there's a real nice effect here going on this technique i'm showing you is not specific for neomorphism obviously you can just do it for really anything in the container when it comes to the decoration and one more extra touch i want to make is the border so for the border if the button is pressed let's give it a gray with a strength of 200 and otherwise let's give a gray with a strength of 300 so just to be clear here our button color is also 300 so when the border is 300 you won't be able to see it but if the button is pressed we just want to make a border slightly lighter so here let's see how that looks now if you press it you can see just that little slide outline just just to show the user that this is a button cool so that's it like i said before this animation technique is not specific to neomorphism but i'm just applying it to this new morphic button and i think it looks really cool so play around with it let me know if you have any problems but other than that thanks for watching and i'll catch you guys in the next one laters [Music] you

Channel: Mitch Koko

Views: 22,289

Keywords:

Id: IwPfP07MkdI

Length: 6min 11sec (371 seconds)

Published: Fri Feb 18 2022