Animations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:
- A pub package
- Animated Builder Widget
In this article, we will be working with the Animated Builder widget. A Hinge animation is a type of animation where an element can turn over with a sudden movement. To implement the same follow the below steps:
- Create a dart file (say, hinge_animation) inside the lib folder of the project.
- Add a FloatingActionButton to play the animation and a text to implement the animation inside the hinge_animation.dart file.
- Now create a tween with a CurvedAnimation using the _rotationAnimation property.
- Now use the Animation Controller to handle and create the instance of the animation.
Let’s explore these steps in detail.
The hinge_animation.dart file:
After adding the text, the FloatingActionButton, the AnimationController, and the curved animation the file would somewhat look like below:
The main.dart file:
This is the main structure of all flutter applications. After the above hinge_animation.dart file is completed we just need to import the same in the main.dart file as shown below:
- Flutter - Radial Hero Animation
- Flutter - Physics Simulation in Animation
- Flutter - Animation in Route Transition
- Flutter - Lottie Animation
- Flutter - Circular reveal Animation
- How to add TextSwitcher with animation in Android using Java
- How to add Slide animation between activities in android?
- How to make Heart Fill animation in Android
- How to add fading TextView animation in Android
- How to add Lottie Animation in an Android app
- How to insert Slide From Bottom animation in RecyclerView in Android
- BubbleEmitter animation in Android with Examples
- Create an Instagram/Twitter Heart Like Animation in Android
- Bounce Animation in Android
- Getting Started with Cross-Platform Mobile Application using Flutter
- Difference between React Native and Flutter
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Container class in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.