Demonstrates the use of RepaintBoundary

repaint_boundary.dart

import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  // Setting this is the same as enabling the feature in your IDE.
  debugRepaintRainbowEnabled = true;
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isRepaintActive = false;

  void onToggleRepaint(bool newVal) => setState(() => isRepaintActive = newVal);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <Widget>[
        Column(
          children: <Widget>[
            const Text("RepaintBoundary?"),
            Switch.adaptive(
              value: isRepaintActive,
              onChanged: onToggleRepaint,
            ),
          ],
        ),
        SizedBox(
          height: 100,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              isRepaintActive
                  ? const RepaintBoundary(child: RotatingWidget())
                  : const RotatingWidget(),
              const StableWidget(),
            ],
          ),
        )
      ],
    );
  }
}

class RotatingWidget extends StatefulWidget {
  const RotatingWidget({Key? key}) : super(key: key);

  @override
  State<RotatingWidget> createState() => _RotatingWidgetState();
}

class _RotatingWidgetState extends State<RotatingWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Tween<double> _animation;
  double rotation = 0;

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

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    _animation = Tween<double>(begin: 0, end: 1);
    _animation.animate(_controller).addListener(() {
      setState(() {
        rotation = _controller.value * math.pi * 2;
      });
    });
    _controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      angle: rotation,
      child: const Text("I'm spinning!"),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      height: 100,
      width: 100,
      child: ColoredBox(
        color: Colors.orange,
        child: Center(
          child: Text('StableWidget'),
        ),
      ),
    );
  }
}