Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
In this article, we are going to learn about how we can shake effect in flutter.
Below is the demo of how our widget will look.
Check out more about our Flutter app development.
1. We are first going to create an animation controller class.
We are going to need an AnimationContoller to achieve the effect that we want, so we will create a separate abstract state class.
AnimationContoller
2. Create a Custom Shake Widget
This widget will be responsible to shake our other widgets.
This requires multiple params:
child: This is the widget that we want to shake
child
duration: Shake duration.
duration
shakeCount: How many times our widget should shake.
shakeCount
shakeOffset: Shake distance of the widget.
shakeOffset
3. Use the animation with AnimatedBuilder and Transform.translate (to translate our widget back and forth)
AnimatedBuilder
Transform.translate
4. Add a status listener to reset our AnimationController.
AnimationController
This is important as we want to show this error multiple times and if we do not reset our controller then we will not be able to see this effect again.
5. Add a shake() method.
shake()
This method will be responsible for the shake effect. This method should be public.
6. We will use GlobalKey to control the shake effect (or to shake our widgets).
GlobalKey
Flutter provides GlobalKey that we can use according to our needs with or without the state.
In this case, we will be needing the state so that we can initiate the shake during any taps.
That’s it, now shake any widget that you want, just properly manage keys, and also don’t forget to dispose of them once you are done.
In this article, we have learned how we can achieve shake effect in flutter.
Hope you have liked this. Head over here to learn more about flutter.
Reference: https://codewithandrea.com/articles/shake-text-effect-flutter/
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
Name
Email
Subject
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.