Flutter - Hinge Animation

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.

Steps to Implement Hinge Animation

Step 1 : Return Material App in main.dart() file

First, create MyApp() in StatelessWidget and in it return MaterialApp(). Now in MaterialApp() give the title of the app and add debugShowCheckModeBanner as false which will remove the debug banner in the app.

main.dart:

Step 2 : Create a new Stateful class called HingeAnimation

Create a stateful widget class with title as "GeeksForGeeks", backgroundColor, foregroundColor, and many more in appbar.

main.dart:

Step 3 : Initialize Animation controller and Animation values

Define each animation controller & animation values using and initialize them in initState(), because the framework will call this method exactly once for each state object it creates.

Step 4 : Use those in Scaffold body

using AnimatedBuilder widget, we can apply those animations in scaffold body because it creates an animated builder.

Step 5 : Add a FloatingActionButton in HingeAnimation class

Add a FloatingActionButton to play the animation and a text to implement the animations inside the HingeAnimation class.

To know more about FloatingActionButton in flutter refer this article: Flutter – FloatingActionButton

Complete Source Code

main.dart:

Output: