Flutter Hinge Animation with Example

Hinge animation is a type of animation in which an object or widget swings open or closed like a door on a hinge. In this blog post, we will explore how to create a Hinge Animation in Flutter using the Transform widget.

Step 1: Creating the Widgets

First, we will create a widget that we want to animate using the hinge animation. In this example, we will use a Container widget.

class HingeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      width: 200,
      height: 200,
    );
  }
}​

In this code, we have created a HingeWidget that displays a blue Container with a width and height of 200 pixels.

Step 2: Adding the Animation

Next, we will add the hinge animation to the HingeWidget. We will use the Transform widget to rotate the widget around a pivot point to simulate the hinge animation.

class HingeWidget extends StatefulWidget {
  @override
  _HingeWidgetState createState() => _HingeWidgetState();
}
class _HingeWidgetState extends State<HingeWidget>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(milliseconds: 1000), vsync: this);
    _animation =
        Tween<double>(begin: 0, end: 1).animate(CurvedAnimation(
            parent: _controller,
            curve: Interval(0.0, 0.8, curve: Curves.easeOut)));
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.status == AnimationStatus.completed) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
      child: AnimatedBuilder(
        animation: _controller,
        builder: (BuildContext context, Widget child) {
          return Transform.rotate(
            angle: _animation.value * math.pi,
            alignment: Alignment.bottomRight,
            child: Container(
              color: Colors.blue,
              width: 200,
              height: 200,
            ),
          );
        },
      ),
    );
  }
}​

In this code, we have added the HingeWidget to a StatefulWidget. We have created an AnimationController and an Animation<double> to control the hinge animation. We have also created an onTap function to start and stop the animation when the widget is tapped.

We use the Transform.rotate widget to rotate the widget around a pivot point. The angle of rotation is controlled by the animation value, which is between 0 and 1. We have set the alignment to Alignment.bottomRight to simulate the hinge pivot point.

Conclusion

we have explored how to create a Hinge Animation in Flutter using the Transform widget. With this animation, you can create engaging user interfaces that will keep your users entertained and engaged.