Circle Rotating Animation in Flutter with GetX || Flutter || GetX

hi my name is Amar in this video I will discuss how to implement Circle animation in flutter using a text as you can see in the output if I click on the start button then the animation will start and it will continue correct and once I click on the stop button then the animation will stop how to achieve this that portion I will discuss today now here what I have done in this project I have created a images folder and inside the images folder I have taken an image named as logo.jpg and its entry I have made in the pubspic dot EML file as you can see here correct now in the home view here if you can see in the body there is a center widget then we have a column widget in the column as a children I have taken this container widget and in this container widget I have used this attributes to design this particular user interface and as a child of this container here you can see I have taken a circle of tar and in the background image I have used the asset image widget where I have specified the location of the image correct and there is elevated button having the text as start now I will write the corresponding code in the home controller in the home controller what I will do is that here I will create the instance of Animation controller and to do that here I'm writing let animation controller let me give the instance name as animation controller and inside the on init method here I will use animation controller equals to animation controller and here in vsync I will pass this and in duration I will use const duration of milliseconds and here I will pass the value as 5000 okay now here this is not working because in this class which is extending the get x controller here I need to use width single ticker sorry here I need to use get single ticker provider statement correct now after that in the close method I will dispose the animation controller and here I will create a method start animation to start the animation and to stop the animation and to implement this functionality here I will declare one more variable and I will give the variable name as is animating and initially I will set its value as false and I will make it to reactive with the help of dot obs now in the start animation here I will write if animation controller dot is animating means here I am checking whether the animation is happening or not if the animation is happening if it is animating then it will return true otherwise it will return false if it is true that the L if portion will execute otherwise the else portion will execute now in the if portion here I will write is animating the variable which I have created a verb is animating dot value I will make its value as false and here I will stop the animation if it is already animating then I need to stop the animation and I will set the value of is animating as false else here I will use is animating dot value equals to true and here if the animation is not happening then I need to start the animation and to do that here I will use the forward method and here I will use repeat means the animation will continue fine now after that I will move to the home view in the home View what I will do is that I will wrap this container inside OBX okay and after that I will wrap this container with another widget and this widget name will be rotation transition correct and in the rotation transition here I will use dance in turns I will use twin and in Twin I will pass the begin value as 0.0 and I will pass the end value as 1.0 and after that here I will call the animate method and in the animate method here I will pass controller dot animation controller now in this elevated button in the on pressed here I need to call controller dot the method which I have created that is start animation now I need to change the text of this button also if you can see in the output here if I click on start then the text is changed to stop and once I click on stop then the chain and then the text is again changes change to start this functionality I need to implement and to implement it here I will wrap this text with OBX and here I will do a checking controller Dot sorry controller dot is animating dot value then if if its value is true this means the caption will be stop otherwise the caption of the button will be start correct now let me run the project and let me show you the output okay now as you can see this application is generating error improper use of get X here what I have done if I move to home View okay by mistake here what I have done I have wrapped this rotation transition inside OBX and as you can see here I am not using any reactive value correct I am not using any dot OBS value so it is generating error what I need to do is that here I need to remove this OBX from here now let me run it once again now you can see the output now if I click on start then it is animating if I click on stop then the animation is stopped this is how we can achieve Circle animation in flutter using a text I hope you have liked my video if you have liked my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 3,273

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, circle animation flutter, circle rotating animation flutter getx, flutter getx animation, getx animation, how to rotate a image in flutter with getx

Id: LBmFPsl2q50

Length: 7min 36sec (456 seconds)

Published: Mon Oct 03 2022