AnimatedBuilder in Flutter - Mini App: Build & Ship

Build: Rotating Square Animation

This screen shows a square that continuously rotates using AnimatedBuilder. It demonstrates how to animate a widget smoothly with Flutter's animation system.

Target UI

---------------------
|                   |
|      ■            |
|                   |
|                   |
|                   |
|                   |
---------------------

Use AnimatedBuilder to animate a square rotation.

The square should rotate continuously clockwise.

Use an AnimationController and Tween for rotation.

The square should be centered on the screen.

Add a button to start and stop the rotation.

Starter Code

Flutter

import 'package:flutter/material.dart';

class RotatingSquareScreen extends StatefulWidget {
  @override
  State<RotatingSquareScreen> createState() => _RotatingSquareScreenState();
}

class _RotatingSquareScreenState extends State<RotatingSquareScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    );
    _animation = Tween<double>(begin: 0, end: 2 * 3.14159).animate(_controller);

    // TODO: Start the animation looping
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rotating Square Animation')),
      body: Center(
        // TODO: Use AnimatedBuilder here to rotate a square
        child: Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // TODO: Start or stop the animation
        },
        child: const Icon(Icons.play_arrow),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class RotatingSquareScreen extends StatefulWidget {
  @override
  State<RotatingSquareScreen> createState() => _RotatingSquareScreenState();
}

class _RotatingSquareScreenState extends State<RotatingSquareScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 4),
    );
    _animation = Tween<double>(begin: 0, end: 2 * 3.14159).animate(_controller);

    _controller.repeat();
  }

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

  void _toggleAnimation() {
    if (_controller.isAnimating) {
      _controller.stop();
    } else {
      _controller.repeat();
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Rotating Square Animation')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Transform.rotate(
              angle: _animation.value,
              child: child,
            );
          },
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleAnimation,
        child: Icon(_controller.isAnimating ? Icons.pause : Icons.play_arrow),
        tooltip: _controller.isAnimating ? 'Pause' : 'Play',
      ),
    );
  }
}

We create an AnimationController that runs for 4 seconds and loops continuously using repeat(). The Tween animates from 0 to 2π radians, representing a full rotation.

The AnimatedBuilder listens to the animation and rebuilds its child with a rotation transform. This way, the square rotates smoothly.

The floating action button toggles the animation on and off by starting or stopping the controller. The icon changes accordingly to show play or pause.

This example shows how AnimatedBuilder helps separate animation logic from widget building, making animations efficient and easy to manage.

Final Result

Completed Screen

---------------------
|                   |
|        ■          |
|                   |
|                   |
|                   |
|                   |
---------------------
[FloatingActionButton: Play/Pause Icon]

The blue square in the center rotates continuously clockwise.

Tapping the floating action button pauses or resumes the rotation.

The button icon changes between play and pause accordingly.

Stretch Goal

Add a slider to control the rotation speed dynamically.

💡 Hint

Use the slider's value to update the AnimationController's duration and restart the animation.