Flutter Neumorphism Animation

you will learn how to create an animated rotation neuromorphism button this can be used in your app bar to display a menu this button can do three things first the rotation second the animated icon third the animated shadow because you can see that the shadow always stay at the same location let's start coding first we need to create the neuramorphism container for this i will start with a custom black color and a custom white color if you need you can take the same colors after this we will create a double turns that we will set as 0.0 the boolean is clicked will be false and that's all we need for now inside the scaffold we have a nap bar and a body center this is how the application is looking currently inside the scaffold you will need to create a background color which we will use the custom white color this is a mix between white and gray in the center we will create a child animated rotation inside we have a curve ease out expo the animation will start fast and will stop slowly the turns will be the double that we have created at the beginning and the duration will be one second in the child we will have a gesture detector when we press on it this will trigger a if else condition and if it's currently clicked then we will set state and say that the turns is now equal minus one out of four this is one quarter of a rotation and otherwise we will set state and say that the turns is equal to plus one quarter of a rotation at the end of this condition we will reverse the value of the is clicked the child of the gesture detector will be a container and now it's time to create the neuramorphism design with the container we start with a box decoration inside we have the border radius circular 25 the color will be the custom white color and we need a list of box shadows so we will have the first box shadow this one will have a blur radius of 30 enough set of 20 20 and the color will be gray the second box shadow will have the same blur radius the offset will be -20 minus 20 and the color will be white inside the child of the container we will create a sized box the height and the width will be 150 and the child will be a center for now at the moment we have an animated rotation neuromorphism button but we still have a problem you see on the right bottom corner we have the black shadow and on the left top corner we have the white shadow but when we click on it the black shadow and the white shadow has changed position so we will create an animation to make sure that the white shadow and the black shadow stay at the good location but first we will create the animated icon inside the button i will show you how to create your animated icon inside the button inside the same code we will create under the is clicked a late variable animation controller called controller we will need to initialize this one so we create an override in its state we define that the controller is equal to an animation controller this one have a duration of 800 milliseconds and you need to have the v-sync this to have access to this one you will need to create the width ticker provider state mix in after the extend state now we are ready to create the override dispose because you need to make sure to dispose the controller when you don't need it anymore now we can go inside the ui inside the if else condition if the button is clicked then we will reverse the controller and otherwise we will forward the controller let's create the animation icon inside the center widget of our sized box we will have a child animated icon the icon will be an animated icon that menu close the progress will be the controller that we just created the size will be 100 and the color of the icon is the custom black color if you restart your application you will see this animated icon when you click on the button okay but we still have a problem with the location of the shadow when we click on the button right now we will make sure that the white shadows stay on the left top corner and the black shadows stay on the right bottom corner for this we will find our container that have the decoration box decoration this is the one that creates the neuromorphism design and we will replace the container by an animated container the curve will be a ease out expo and the duration will be one second inside the box shadow you will need to say if it's clicked then the offset will be 20 minus 20 otherwise it will be 2020 and for the white shadow if it's clicked then the offset would be -20 20 otherwise it would be -20-20 and with this you have created a neuromorphism animated rotation button and you can see that the white shadow and the black shadow stay at the good location if you need the code i will send it to you by email the link is in the description if you want to push your flutter animation skills to the next level in the following weeks i will release a complete flutter animation course the pre-sale of the course will be available only for 7 days so if you want to get notified when the course pre-sales start you can add your email with the link in the description and i will make sure to send you an email for the discount thank you for watching bye

Channel: Flutter Mapp

Views: 32,971

Keywords: Flutter, neumorphism animation, flutter neumorphism animation, flutter widgets, flutter tutorial, flutter neumorphism, flutter neumorphism ui, flutter neumorphism design, rotated animation flutter neumorphism, neumorphism flutter, flutter animation rotation, flutter rotation animation, flutter animated button, flutter neumorphism button

Id: 6kwcLgdiDLM

Length: 5min 9sec (309 seconds)

Published: Thu Apr 14 2022