Explore Hinge Animation In Flutter
Flutter makes it a lot simpler to deal with these animations. Likewise, there are numerous approaches to include animations in Flutter. You can go for packages which can be found in the dart pub, or you can utilize Animated Builder widgetwhere you can go for each detail of your animation.
For this post, I will utilize Animated Builder Widget. If you are uninformed of this, Animated Builder Widget allude to this archive here. You will presently require two additional widgets on the off chance that you need to implement animations utilizing this widget.
Animation Controller Widget — mainly characterizes the duration of the animation.
Animation Widget — mainly characterizes the type of animation and animation style
In straightforward terms, we utilize these two widgets to characterize and deal with our animations. Ensure you are trying these animations in a Stateful Widget. Additionally, remember to include SingleTickerProviderStateMixin in the class definition. This deals with our animation time.
In this article, we will Explore Hinge Animation In Flutter. We will also implement a demo of Hinge animation using the Animated Builder Widget in your flutter applications.
Table Of Contents::
Hinge Animation
An Element can turn over or cause to turn over with a sudden quick movement. We will Now, into more complex stuff. Here, I have combined multiple animations into one single animation. We call this an animation sequence. Take a good look at how to characterize this hinge animation.
Demo Module::
This video shows how to create a hinge animation in a flutter and show how to hinge animation will work in your flutter applications with sequence animation, and then they will be shown on your device.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called hing_animation.dart inside the lib folder.
On this page, we will create a FloatingActionButton for playing animation and a text. When the user can tap the FloatingActionbutton, the text will contain an animation sequence, and then they will show hinge animation and show it in your devices.
The following code makes a tween for the _rotationAnimation property. It constructs a CurvedAnimation, determining a bounceInOut curve. See Curves for other accessible pre-characterized animation Curves.
_rotationAnimation = Tween(end: 0.15, begin: 0.0)
.animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.0,
0.5,
curve: Curves.bounceInOut
),
),
);
Animation controller and Animation define an instance of the class AnimationController for the animation controller and three instances of the class Animation to handle animations (double to get a progressive value from 0 to 1).
AnimationController _controller;
Animation _rotationAnimation;
Animation<double> _slideAnimation;
Animation<double> _opacityAnimation;
Animation initializing override the initState method and define the parameters for the animation. For this situation, the duration is set to 2000 miliseconds.
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 2000),
);
_rotationAnimation = Tween(end: 0.15, begin: 0.0)
.animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.0,
0.5,
curve: Curves.bounceInOut
),
),
);
_slideAnimation = Tween(begin: 100.0, end: 600.0).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.5,
1.0,
curve: Curves.fastOutSlowIn)
,
),
);
_opacityAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.5,
1.0,
curve: Curves.fastOutSlowIn),
),
);
}.
If it’s not too much trouble, note that when characterizing this animation, I have utilized three separateAnimation Widgets. I have utilized just a single Animation Controller for those three Widgets. I have passed various values for everyInterval Widget .That’s how you characterize a sequence of animations.
Now, let’s explore how to use this sequence animation.
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('Flutter Devs', style: TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(
300,
150,
500,
_opacityAnimation.value)
),),
),
),
),
),
Now, we will add floating action button
In this button, we will add _controller.forward() on onPressed() method for animation foreward.
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterFloat,
floatingActionButton:
FloatingActionButton(
child: Icon(Icons.play_arrow),
backgroundColor: Colors.green[300],
onPressed: (){
_controller.forward();
},
),
You will now run the code and show how Hinge Animation will work on your flutter applications.
Code File
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HingeAnimation extends StatefulWidget {
@override
_HingeAnimationState createState() => _HingeAnimationState();
}
class _HingeAnimationState extends State<HingeAnimation> with SingleTickerProviderStateMixin{
AnimationController _controller;
Animation _rotationAnimation;
Animation<double> _slideAnimation;
Animation<double> _opacityAnimation;
@override
void initState() {
// TODO: implement initState
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 2000),
);
_rotationAnimation = Tween(end: 0.15, begin: 0.0)
.animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.0,
0.5,
curve: Curves.bounceInOut
),
),
);
_slideAnimation = Tween(begin: 100.0, end: 600.0).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.5,
1.0,
curve: Curves.fastOutSlowIn)
,
),
);
_opacityAnimation = Tween(begin: 1.0, end: 0.0).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(
0.5,
1.0,
curve: Curves.fastOutSlowIn),
),
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.green[300],
automaticallyImplyLeading: false,
title: Text("Flutter Hinge Animation Demo"),
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('Flutter Devs', style: TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
color: Color.fromRGBO(
300,
150,
500,
_opacityAnimation.value)
),),
),
),
),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterFloat,
floatingActionButton:
FloatingActionButton(
child: Icon(Icons.play_arrow),
backgroundColor: Colors.green[300],
onPressed: (){
_controller.forward();
},
),
);
}
}
Conclusion :
In the article, I have explained the basic architecture of Hinge Animation; you can modify this code according to your choice. This was a small introduction to Hinge Animation from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Hinge Animation in your flutter projects. This is a demo program that shows how to create a hinge animation in a flutter and show how to hinge animation will work in your flutter applications with sequence animation, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Find the source code of the Flutter Hinge Animation Demo:
flutter-devs/flutter_hinge_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Explore Lottie Animation In Flutter
Learn How To use Lottie Animation In YouFeel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
