Flutter Spinning Animation Without Plugin

Let’s learn about flutter spinning animation without plugin. Animation could be scary for beginners.

But three simple steps to follow for animation.

1. create animation controller
2. create animation object
3. use the animation object in your widget

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'dbestech',
        theme: ThemeData(
          primarySwatch: Colors.indigo,
        ),
        home: const HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  State<HomePage> createState() => _HomePageState();
}

// Don't forget "with TickerProviderStateMixin"
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {

  // Create a controller
  late final AnimationController _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: false);

  // Create an animation with value of type "double"
  late final Animation<double> _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.linearToEaseOut,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('dbestech'),
      ),
      body: Center(
        child: RotationTransition(
          turns: _animation,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Wrap(
              children: [
                Container(
                  width: 150,
                  height: 150,
                  decoration: const BoxDecoration(
                      color: Colors.amber, shape: BoxShape.circle),
                ),
                Container(
                  width: 150,
                  height: 150,
                  decoration: const BoxDecoration(
                      color: Colors.indigo, shape: BoxShape.circle),
                ),
                Container(
                  width: 150,
                  height: 150,
                  decoration: const BoxDecoration(
                      color: Colors.red, shape: BoxShape.circle),
                ),
                Container(
                  width: 150,
                  height: 150,
                  decoration: const BoxDecoration(
                      color: Colors.yellow, shape: BoxShape.circle),
                ),
              ],
            ),
          ),
        ),
      ),
      // This button is used to pause/resume the animation
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.moving),
        onPressed: () {
          if (_controller.isAnimating) {
            _controller.stop(); // Stop the animation
          } else {
            _controller.repeat(); // Start the animation
          }
        },
      ),
    );
  }


}