<p>![](../../../Uploads/3c62e17a-d94c-4682-b2bf-775a01ddeddf.jpgwidth="50%height="auto](</p> <p>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](One of the most appealing thing about Flutter, which attracts most beginners and developers in general, is that it allows to create complex animations with ease. Especially in case of Android, where you would have to scratch your head hard, constantly switching between XML Layouts and Native Java Code, to create complex fluid animations, Flutter lets you do the same thing with just a few lines of code đź’™. color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( _MyHomePageState(); }</p> <p>class _MyHomePageState extends State with SingleTickerProviderStateMixin {</p> <p>@override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; return Scaffold( body: Container( width: size.width, height: size.height, child: Stack( children: [ Positioned( right: 30, bottom: 30, child: Stack(</p> <pre> children: [ CircularButton( color: Colors.blue, width: 50, height: 50, icon: Icon( Icons.add, color: Colors.white, ), ), CircularButton( color: Colors.black, width: 50, height: 50, icon: Icon( Icons.camera_alt, color: Colors.white, ), ), CircularButton( color: Colors.orangeAccent, width: 50, height: 50, icon: Icon( Icons.person, color: Colors.white, ), ),
CircularButton(
color: Colors.red,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: () {
// Trigger Animation Here
},
),
],
),
)
],
),
), ); </pre> <p>} }```"); background-size: 1px 1px; background-position: 0px calc(1em + 1px); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](*<a href="T">https://api.flutter.dev/flutter/widgets/Transform/Transform.translate.htmlcd dq lg lh li ljtarget="_blankrel="noopener nofollowbox-sizing: inherit; color: inherit; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,"); background-size: 1px 1px; background-position: 0px calc(1em + 1px); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);</a>ransform.translate()*lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](”*lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](. **lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( *color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](This widget requires an offset property for which we will be using “[https://api.flutter.dev/flutter/dart-ui/Offset/Offset.fromDirection.htmlcd dq lg lh li ljtarget="_blankrel="noopener nofollowbox-sizing: inherit; color: inherit; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,"); background-size: 1px 1px; background-position: 0px calc(1em + 1px); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);](<em>lfbox-sizing: inherit;](Offset.fromDirection(direction, distance)</em>)*lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](” . *color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](This will allow us to move the child widget to the respective Transform in a particular direction at a given angle given in Radians. You can easily convert degrees to radians by using the function: color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](We will also be wrapping the Main Floating Action Button with Transform but unlike other 3 buttons, we will only be passing a “*lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](Matrix4.rotationZ ()” *color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](to it as a value of transform property. At this point our build function will look something like this:color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](</p> <p>[ Positioned( right: 30, bottom: 30, child: Stack(</p> <pre> children: [ Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(270), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.blue, width: 50, height: 50, icon: Icon( Icons.add, color: Colors.white, ), ), ), ), Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(225), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.black, width: 50, height: 50, icon: Icon( Icons.camera_alt, color: Colors.white, ), ), ), ), Transform.translate( offset: Offset.fromDirection(getRadiansFromDegree(180), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value))..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.orangeAccent, width: 50, height: 50, icon: Icon( Icons.person, color: Colors.white, ), ), ), ),
Transform(
transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors.red,
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: () {
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},
),
),
],
),
)
],
),
),
);
</pre>
<p>} color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](In this code, you can see that we have passed “*lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](degOneTranslationAnimation” (Animation Object) *color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](to pass value to Transform.translate and scale of Matrix4. This will help us animate the value from <em>lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](0.0</em>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( to <em>lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](100</em>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( for translate and <em>lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](0.0</em>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( to *lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](1.0 *color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](for scale. We also have to initialize the Animation and related AnimationController as below: color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( (begin: 180.0, end: 0.0) .animate(CurvedAnimation(parent: animationController, curve: Curves.easeOut)); super.initState(); animationController.addListener(() { setState(() ); }); }</p> <p>@override void dispose() { animationController.dispose(); super.dispose(); }
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](Here, we are using the Tween from <em>lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](0.0</em>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( to <em>lfbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](1.0</em>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( , we will be using its raw value for Scale , but for Translation we will have to multiply this by 100 or any other relevant factor to get the translation value.
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](At this point, if you run the app, the results will look something like:color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](</p>
<p>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](</p>
<p>![](../../../Uploads/9da4a56f-0711-4091-8c38-a474e1c39df0.gifwidth="50%height="auto](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](This looks cool,no doubt but it lacks the fluidness which we have in our target animation. To add fluidity to this animation we will have to create a separate animation instance for all the three menu buttons.
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](The required fluidity cannot be achieved by a simple tween so insted , we will have to use “<a href="TweenSequence">https://api.flutter.dev/flutter/animation/TweenSequence-class.htmlcd dq lg lh li ljtarget="_blankrel="noopener nofollowbox-sizing: inherit; color: inherit; -webkit-tap-highlight-color: transparent; background-repeat: repeat-x; background-image: url("data:image/svg+xml;utf8,"); background-size: 1px 1px; background-position: 0px calc(1em + 1px); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px; background-color: rgb(255, 255, 255);</a>color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](”. TweenSequence is easy to use, and we need to pass a list of TweenSequenceItems to it. Our new Animation Initializations will look something like the code below:color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
[
TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.2), weight: 75.0),
TweenSequenceItem(tween: Tween(begin: 1.2,end: 1.0), weight: 25.0),
])
.animate(animationController);
degTwoTranslationAnimation = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.4), weight: 55.0),
TweenSequenceItem(tween: Tween(begin: 1.4,end: 1.0), weight: 45.0)
])
.animate(animationController);
degThreeTranslationAnimation = TweenSequence([
TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.75), weight: 35.0),
TweenSequenceItem(tween: Tween(begin: 1.75,end: 1.0), weight: 65.0)
])
.animate(animationController); color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](You can see that we have passed different values to TweenSequence of all the three animations. This is because each of the button has to have some delay to add fluidity to animation. The magic happends with the “weight” that we are passing here. Weight basically represents the time that a particular tween should take. color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](By passing the values like this, animation for Button at 270 degree will complete fast, 225 degree will finish after that and 180 degree will finish last. Even the scale of these buttons will get affected by these tween values.color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](Once everything is done. Our final code will look something like this:color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( _MyHomePageState(); }</p> <p>class _MyHomePageState extends State with SingleTickerProviderStateMixin { AnimationController animationController; Animation degOneTranslationAnimation, degTwoTranslationAnimation, degThreeTranslationAnimation; Animation rotationAnimation;</p> <p>double getRadiansFromDegree(double degree) { double unitRadian = 57.295779513; return degree / unitRadian; }</p> <p>@override void initState() { animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 250)); degOneTranslationAnimation = TweenSequence([ TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.2), weight: 75.0), TweenSequenceItem(tween: Tween(begin: 1.2,end: 1.0), weight: 25.0), ]) .animate(animationController); degTwoTranslationAnimation = TweenSequence([ TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.4), weight: 55.0), TweenSequenceItem(tween: Tween(begin: 1.4,end: 1.0), weight: 45.0) ]) .animate(animationController); degThreeTranslationAnimation = TweenSequence([ TweenSequenceItem(tween: Tween(begin: 0.0,end: 1.75), weight: 35.0), TweenSequenceItem(tween: Tween(begin: 1.75,end: 1.0), weight: 65.0) ]) .animate(animationController); rotationAnimation = Tween(begin: 180.0, end: 0.0) .animate(CurvedAnimation(parent: animationController, curve: Curves.easeOut)); super.initState(); animationController.addListener(() { setState(() ); }); }</p> <p>@override void dispose() { animationController.dispose(); super.dispose(); }</p> <p>@override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; return Scaffold( body: Container( width: size.width, height: size.height, child: Stack( children: [ Positioned( right: 30, bottom: 30, child: Stack( children: [ Transform.translate( offset: Offset.fromDirection( getRadiansFromDegree(270), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)) ..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.blue, width: 50, height: 50, icon: Icon( Icons.add, color: Colors.white, ), ), ), ), Transform.translate( offset: Offset.fromDirection( getRadiansFromDegree(225), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)) ..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.black, width: 50, height: 50, icon: Icon( Icons.camera_alt, color: Colors.white, ), ), ), ), Transform.translate( offset: Offset.fromDirection( getRadiansFromDegree(180), degOneTranslationAnimation.value * 100), child: Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)) ..scale(degOneTranslationAnimation.value), alignment: Alignment.center, child: CircularButton( color: Colors.orangeAccent, width: 50, height: 50, icon: Icon( Icons.person, color: Colors.white, ), ), ), ), Transform( transform: Matrix4.rotationZ(getRadiansFromDegree(rotationAnimation.value)), alignment: Alignment.center, child: CircularButton( color: Colors.red, width: 60, height: 60, icon: Icon( Icons.menu, color: Colors.white, ), onClick: () { if (animationController.isCompleted) { animationController.reverse(); } else { animationController.forward(); } }, ), ), ], ), ) ], ), ), ); } }
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](All Done, ✌. Isn’t this amazing! …🤓 With just a few Animation Tricks, we have created a relatively complex animation in Flutter. If you want to watch this in a video format, for a better undertanding of what is happening, you can check out the Video Tutorial for this article here:
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](</p>
<p>kl ldbox-sizing: inherit; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-weight: 700; color: rgba(0, 0, 0, 0.84); font-size: 21px; font-style: italic; letter-spacing: -0.084px;](bhbox-sizing: inherit; font-style: normal;](Note:bhbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;]( There is currently a reported but with Transform Widget that it does not translate the gesture detection region along with the button.But this tutorial will help you in learning the fundamentals of doing such cool animations. Once the fix there is, i will update the code on github and put the same updates in the article. Thank you!
bhbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
bhbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](
bhbox-sizing: inherit; color: rgba(0, 0, 0, 0.84); font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.084px;](</p>