Flutter: How to Make Spinning Animation without Plugins

Last updated on September 11, 2021 A Goodman Loading... Post a comment

This article shows you how to create spinning animation by using the built-in RotationTransition widget in Flutter.

A Quick Note

The RotationTransition widget is used to create a rotation transition. It can take a child widget and an animation that controls the rotation of that child:

RotationTransition(
   turns: _animation,
   child: /* Your widget here */
}

You can create an infinitely spinning animation as follows:

// 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.linear,
);

To stop the animation, just call the stop() method:

_controller.stop()

To start the animation, use the repeat() method:

_controller.repeat()

For more clarity, please see the example below.

The Complete Example

The app we are going to build contains a floating action button and a widget that is a combination of four circles with four different colors. In the beginning, the widget rotates infinitely by itself. However, you can stop and restart the animation by using the floating button.

App Preview

The Code

The full source code in main.dart with explanations:

// main.dart
import 'package:flutter/material.dart';

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

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

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

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.linear,
  );

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

You can find more information about the RotationTransition class in the official docs (flutter.dev).

Conclusion

You’ve built your own spinning animation without using any third-party packages. If you would like to learn more about animation and other interesting stuff in Flutter, take a look at the following articles:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles