Flutter repaint behaviour - confusing

98 Views Asked by At

I am trying to understand the behaviour of Flutter handling repaints, and using RepaintBoundary, with the help of the inspector. I have been looking at a simple example shown here: https://docs.flutter.dev/tools/devtools/inspector#highlight-repaints. With the code in the example I can reproduce the same behaviour perfectly fine: only the CircularProgressIndicator repaints, and not the entire app.

Now, I played a bit around with the standard counter app:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: const Center(
        // I tried WITHOUT (1) and WITH (2) this RepaintBoundary
        child: RepaintBoundary(
          child: MyCounter(),
        ),
      ),
    );
  }
}

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

  @override
  State<MyCounter> createState() => _MyCounterState();
}

class _MyCounterState extends State<MyCounter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.grey[200],
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$_counter',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
          IconButton.filled(
            onPressed: _incrementCounter,
            icon: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}
  1. Without any RepaintBoundary, the app repaints completely on every button click, which is expected: enter image description here

  2. When adding a RepaintBoundary around MyCounter, i get the repaint border around the MyCounter, as expected. However, what confuses me is that the entire app still repaints as well, maybe not on every click but at least every second click. Why is that the case? Can it be that touch events make the entire app repaint anyway? enter image description here

Can anyone provide explanations about this?

(I am on Flutter 3.12.0 (beta) btw., but I don't think that that has any influence in this case)

0

There are 0 best solutions below