Mix of animations - Football bouncing on Earth Animation using flutter

<p>Here is the code for Football bouncing on Earth Animation using flutter.</p> <p>Here is how the animation will look like.</p> <p>![](https://fluttercentral.com/Uploads/dc1756cd-a6b9-4a36-9d3a-a8af82b8d066.gifwidth="50%height="auto](</p> <p>Here is the full code from main.dart file. Make sure you add the necessary images before running. You can get them from the internet by googling.</p> <p id="4ec9b0;](MyApp());" color:="" color:=>args) </p> <p id="4ec9b0;](Key?" color:= color:="" key=>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget ) : color: #569cd6;](super(key: key); color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #569cd6;](const color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold(body: color: #4ec9b0;](MyStatefulWidget()), ); } }</p> <p id="4ec9b0;](Key?" color:= color:="" key=>color: #569cd6;](class color: #4ec9b0;](MyAnimatedWidget color: #569cd6;](extends color: #4ec9b0;](StatefulWidget ) : color: #569cd6;](super(key: key); color: #569cd6;](@override</p> <p>color: #4ec9b0;](_MyAnimatedWidgetState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAnimatedWidgetState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyAnimatedWidgetState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin { color: #569cd6;](late color: #569cd6;](final color: #4ec9b0;](AnimationController _controller = color: #4ec9b0;](AnimationController( duration: color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](60), vsync: color: #569cd6;](this, upperBound: color: #b5cea8;](360, lowerBound: color: #b5cea8;](0) ..color: #dcdcaa;](repeat(); color: #569cd6;](@override</p> <p id="dcdcaa;](initState();" color:=>color: #569cd6;](void color: #dcdcaa;](initState() color: #569cd6;](@override</p> <p id="dcdcaa;](dispose();" color:="" _controller.color:=>color: #569cd6;](void color: #dcdcaa;](dispose() color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](AnimatedBuilder( animation: _controller, builder: (context, child) => color: #4ec9b0;](Transform.color: #dcdcaa;](rotate( angle: -(_controller.value), child: color: #569cd6;](const color: #4ec9b0;](Image( image: color: #4ec9b0;](AssetImage(color: #ce9178;]('assets/football.png'), ), ), ); } }</p> <p id="4ec9b0;](Key?" color:= color:="" key=>color: #569cd6;](class color: #4ec9b0;](MyStatefulWidget color: #569cd6;](extends color: #4ec9b0;](StatefulWidget ) : color: #569cd6;](super(key: key); color: #569cd6;](@override</p> <p>color: #4ec9b0;](State color: #dcdcaa;](createState() => color: #4ec9b0;](_MyStatefulWidgetState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_MyStatefulWidgetState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](TickerProviderStateMixin { color: #569cd6;](late color: #569cd6;](final color: #4ec9b0;](AnimationController _controller = color: #4ec9b0;](AnimationController( duration: color: #569cd6;](const color: #4ec9b0;](Duration(seconds: color: #b5cea8;](2), vsync: color: #569cd6;](this, )..color: #dcdcaa;](repeat(reverse: color: #569cd6;](true); color: #569cd6;](@override</p> <p id="dcdcaa;](dispose();" _controller.color:= color:=>color: #569cd6;](void color: #dcdcaa;](dispose() color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](const color: #4ec9b0;](double bigLogo = color: #b5cea8;](100; color: #c586c0;](return color: #4ec9b0;](LayoutBuilder( builder: (color: #4ec9b0;](BuildContext context, color: #4ec9b0;](BoxConstraints constraints) { color: #569cd6;](final color: #4ec9b0;](Size biggest = constraints.biggest; color: #c586c0;](return color: #4ec9b0;](Stack( children: [ color: #4ec9b0;](PositionedTransition( rect: color: #4ec9b0;](RelativeRectTween( begin: color: #4ec9b0;](RelativeRect.color: #dcdcaa;](fromSize( color: #569cd6;](const color: #4ec9b0;](Rect.color: #dcdcaa;](fromLTWH(color: #b5cea8;](150, color: #b5cea8;](100, bigLogo, bigLogo), biggest), end: color: #4ec9b0;](RelativeRect.color: #dcdcaa;](fromSize( color: #4ec9b0;](Rect.color: #dcdcaa;](fromLTWH( color: #b5cea8;](150, biggest.height - bigLogo - color: #b5cea8;](180, bigLogo, bigLogo), biggest), ).color: #dcdcaa;](animate(color: #4ec9b0;](CurvedAnimation( parent: _controller, curve: color: #4ec9b0;](Curves.bounceOut, )), child: color: #569cd6;](const color: #4ec9b0;](Padding( padding: color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](all(color: #b5cea8;](8), child: color: #4ec9b0;](MyAnimatedWidget()), ), color: #569cd6;](const color: #4ec9b0;](Positioned( bottom: -color: #b5cea8;](220, right: color: #b5cea8;](0, left: color: #b5cea8;](0, child: color: #4ec9b0;](EarthAnimation(), ), ], ); }, ); } }</p> <p id="4ec9b0;](Key?" color:= color:="" key=>color: #569cd6;](class color: #4ec9b0;](EarthAnimation color: #569cd6;](extends color: #4ec9b0;](StatefulWidget ) : color: #569cd6;](super(key: key); color: #569cd6;](@override</p> <p>color: #4ec9b0;](_EarthAnimationState color: #dcdcaa;](createState() => color: #4ec9b0;](_EarthAnimationState(); }</p> <p>color: #569cd6;](class color: #4ec9b0;](_EarthAnimationState color: #569cd6;](extends color: #4ec9b0;](State color: #569cd6;](with color: #4ec9b0;](SingleTickerProviderStateMixin { color: #569cd6;](late color: #4ec9b0;](AnimationController _controller; color: #569cd6;](@override</p> <p id="dcdcaa;](repeat();" class=".color:" color:= _controller="color:" color:="" duration:="" color:="" color:="" color:=>color: #569cd6;](void color: #dcdcaa;](initState() color: #569cd6;](@override</p> <p id="dcdcaa;](dispose();" color:= _controller.color:="">color: #569cd6;](void color: #dcdcaa;](dispose() color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](RotationTransition( turns: _controller, child: color: #569cd6;](const color: #4ec9b0;](Image( fit: color: #4ec9b0;](BoxFit.fill, image: color: #4ec9b0;](AssetImage(color: #ce9178;]('assets/earth.png'), ), ); } } ` Thanks,Srikanth</p>