Incorrect diagnosis of RepaintBoundary usefulness in Widget inspector DevTool

Open ashilkn opened this issue 8 months ago • 1 comments

Description

I was watching this part of a talk at by Craig Labenz where he explains about RepaintBoundary and gives an example of where not to use it. Later, he explains how to use the Widget inspector DevTool to diagnose whether a RepaintBoundary is useful.

I ran the code snippet and the DevTool says it's useful. That has to be a bug, right?

Code sample

import 'package:flutter/material.dart';

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(body: Center(child: Body())),
    );
  }
}

class Body extends StatefulWidget {
  const Body({super.key});

  @override
  State<Body> createState() => _BodyState();
}

class _BodyState extends State<Body> {
  Color color = Colors.red;
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 200,
      height: 200,
      child: GestureDetector(
        onTap: () => setState(() {
          if (color == Colors.red) {
            color = Colors.blue;
          } else {
            color = Colors.red;
          }
        }),
        child: ColoredBox(
          color: color,
          child: RepaintBoundary(child: ColoredBox(color: color)),
        ),
      ),
    );
  }
}

DevTool screenshot (see highlighted area):

This is after 10 taps on the tappable widget.

May 09 '25 10:05 ashilkn