Reputation: 101
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),
),
],
),
);
}
}
Without any RepaintBoundary
, the app repaints completely on every button click, which is expected:
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?
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)
Upvotes: 2
Views: 162