Flutter Hinge Animation (original) (raw)

Last Updated : 23 Jul, 2025

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:

Dart `

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HingeAnimation(), ); } }

Step 2 : Create a new Stateful class called HingeAnimation

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

**main.dart:

Dart `

// Create a stateful widget class HingeAnimation extends StatefulWidget { @override _HingeAnimationState createState() => _HingeAnimationState(); }

class _HingeAnimationState extends State{

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.

Dart `

// Animation setup late AnimationController _controller; late Animation _rotationAnimation; late Animation _slideAnimation; late Animation _opacityAnimation;

@override void initState() { super.initState(); // Initialize the AnimationController _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 2000), );

// Setup the rotation animation
_rotationAnimation = Tween<double>(begin: 0.0, end: 0.15).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.0,
      0.5,
      curve: Curves.bounceInOut,
    ),
  ),
);

// Setup the slide animation
_slideAnimation = Tween<double>(begin: 100.0, end: 600.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.5,
      1.0,
      curve: Curves.fastOutSlowIn,
    ),
  ),
);

// Setup the opacity animation
_opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.5,
      1.0,
      curve: Curves.fastOutSlowIn,
    ),
  ),
);

}

@override void dispose() { // Dispose the controller when the widget is disposed _controller.dispose(); super.dispose(); }

Step 4 : Use those in Scaffold body

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

Dart `

AnimatedBuilder( animation: _slideAnimation, builder: (BuildContext context, Widget? child) => Container( width: 200, height: 150, padding: EdgeInsets.all(0), margin: EdgeInsets.only( left: 100, top: _slideAnimation.value, ), child: RotationTransition( turns: _rotationAnimation, child: Center( child: Text( 'GeeksForGeeks', style: TextStyle( fontSize: 25, fontWeight: FontWeight.bold, color: Color.fromRGBO( 300, 150, 500, _opacityAnimation.value, ), ), ), ), ), ), ),

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.

Dart `

// The button to trigger the animation floatingActionButtonLocation: FloatingActionButtonLocation.miniCenterFloat, floatingActionButton: FloatingActionButton( child: Icon(Icons.play_arrow), backgroundColor: Colors.green[300], onPressed: () { _controller.forward(); }, ),

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

Complete Source Code

**main.dart:

Dart `

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: HingeAnimation(), ); } }

// Create a stateful widget class HingeAnimation extends StatefulWidget { @override _HingeAnimationState createState() => _HingeAnimationState(); }

class _HingeAnimationState extends State with SingleTickerProviderStateMixin { // Animation setup late AnimationController _controller; late Animation _rotationAnimation; late Animation _slideAnimation; late Animation _opacityAnimation;

@override void initState() { super.initState(); // Initialize the AnimationController _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 2000), );

// Setup the rotation animation
_rotationAnimation = Tween<double>(begin: 0.0, end: 0.15).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.0,
      0.5,
      curve: Curves.bounceInOut,
    ),
  ),
);

// Setup the slide animation
_slideAnimation = Tween<double>(begin: 100.0, end: 600.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.5,
      1.0,
      curve: Curves.fastOutSlowIn,
    ),
  ),
);

// Setup the opacity animation
_opacityAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
  CurvedAnimation(
    parent: _controller,
    curve: Interval(
      0.5,
      1.0,
      curve: Curves.fastOutSlowIn,
    ),
  ),
);

}

@override void dispose() {

// Dispose the controller when the widget is disposed
_controller.dispose();
super.dispose();

}

// The animation widget @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.green[300], foregroundColor: Colors.white, automaticallyImplyLeading: false, title: Text("GeeksForGeeks"), centerTitle: true, ), body: AnimatedBuilder( animation: _slideAnimation, builder: (BuildContext context, Widget? child) => Container( width: 200, height: 150, padding: EdgeInsets.all(0), margin: EdgeInsets.only( left: 100, top: _slideAnimation.value, ), child: RotationTransition( turns: _rotationAnimation, child: Center( child: Text( 'GeeksForGeeks', style: TextStyle( fontSize: 25, fontWeight: FontWeight.bold, color: Color.fromRGBO( 300, 150, 500, _opacityAnimation.value, ), ), ), ), ), ), ),

  // The button to trigger the animation
  floatingActionButtonLocation:FloatingActionButtonLocation.miniCenterFloat,
  floatingActionButton: FloatingActionButton(
        child: Icon(Icons.play_arrow),
        backgroundColor: Colors.green[300],
        onPressed: () {
          _controller.forward();
        },
  ),
);

} }

**Output: