Explore Spinning Animation In Flutter
Animation is an intricate procedure in any mobile application. Despite its intricacy, Animation improves the client experience to another level and gives a rich user interaction. Because of its extravagance, animation turns into a basic piece of present-day mobile applications. Flutter structure perceives the significance of Animation and gives a straightforward and natural system to develop a wide range of animations.
In this blog, we will be Explore Spinning Animation In Flutter. We will implement a demo program and make a spinning animation without using any plugin in your flutter applications.
Table Of Contents::
Introduction:
The below demo video shows how to make a spinning animation in a flutter. It shows how the spinning animation will work without using any plugin in your flutter applications. When the code is successfully run, we will show four rectangle boxes that will rotate clockwise that is a spinning animation, and the user will stop/play the animation when pressing the floating action button. It will be shown on your device.
Demo Module :
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
First, we will create an AnimationController and add a _controller variable is equal to the AnimationController() method. In this method, we will add the duration for five seconds and vsync was this. Also, adding reverse animation was false.
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
)..repeat(reverse: false);
We will create an animation with the value of type “double” and an _animation variable is equal to the CurvedAnimation() method. In the method, we will add a parent as _controller and the curve was linear.
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.linear,
);
We will add dispose() method. In this method, we will add _controller.dispose().
@override
void dispose() {
_controller.dispose();
super.dispose();
}
In the body, we will add RotationTransition() widget. In this widget, we will add turns was _animation variable. It’s child property, we will add padding, and it’s child property we will add four Containers with height, width, colors, and box-shape was a rectangle.
RotationTransition(
turns: _animation,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Container(
child: Wrap(
children: [
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.amber, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.green, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.indigo, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.red, shape: BoxShape.rectangle),
),
],
),
),
),
),
We will create a FloatingActionButton(). In this button, we will add a stop icon and onPressed method. In this method, we will add if _controller isAnimating then stop the animation and else start the animation.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.stop),
onPressed: () {
if (_controller.isAnimating) {
_controller.stop(); // Stop the animation
} else {
_controller.repeat(); // Start the animation
}
},
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:flutter_spinning_animation_dem/splash_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: Splash());
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: const Duration(seconds: 5),
vsync: this,
)..repeat(reverse: false);
late final Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.linear,
);
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text('Flutter Spinning Animation Demo'),
),
body: Center(
child: RotationTransition(
turns: _animation,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Container(
child: Wrap(
children: [
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.amber, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.green, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.indigo, shape: BoxShape.rectangle),
),
Container(
width: 140,
height: 120,
decoration: BoxDecoration(
color: Colors.red, shape: BoxShape.rectangle),
),
],
),
),
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.stop),
onPressed: () {
if (_controller.isAnimating) {
_controller.stop(); // Stop the animation
} else {
_controller.repeat(); // Start the animation
}
},
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the Spinning Animation in a flutter; you can modify this code according to your choice. This was a small introduction to Spinning Animation On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Spinning Animation in your flutter projects. We will show you what the Introduction is?. Make a demo program for working on Spinning Animation without using any third-party plugins. In this blog, we have examined the Spinning Animation of the flutter app. I hope this blog will help you in the comprehension of Spinning Animation in a better way. 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.
Feel 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.
