RepaintBoundary : un Widget Flutter pour optimiser les mauvaises performances visuelles 👩‍💻 Tutorial

Sur un code apparemment simple, Flutter redessine parfois des éléments, alors qu’il ne le devrait pas. Ce problème d’optimisation peut être détecté à l’aide des flags debugRepaintRainbowEnabled et debugRepaintTextRainbowEnabled à mettre à true, juste avant le runApp.

Les Dart/Flutter DevTools permettent également de mieux comprendre l’origine, en utilisant les onglets Performance et CPU.

La solution se trouve auprès du Widget RepaintBoundary, qui permet d’indiquer que le Widget enfant doit être dessiné dans une Display List différente. Concrètement une Display List est une suite de commande envoyée au processeur graphique (GPU). Le RepaintBoundary permet d’indiquer que pour un Widget donné, il faut créer une Display List différente, de telle sorte à ne plus la mélanger avec le reste.

⛳️ Flags pour débogguer :
debugRepaintRainbowEnabled = true;
debugRepaintTextRainbowEnabled = true;


📆 Le programme :

00:00 Introduction
00:13 Un problème d’optimisation
00:48 Installation
02:47 Un exemple plus complexe
03:54 Le performance overlay
04:35 Comprendre le problème avec les DevTools
06:55 Comment corriger le problème
07:23 Qu’est-ce que le RepaintBoundary ?
08:37 Corriger le premier problème
09:22 Que faut-il en retenir ?
09:39 Conclusion


👨‍🏫 Liens utiles :

Widget Repaint Boundary
https://api.flutter.dev/flutter/widge...

Code du Widget complexe
https://gist.github.com/g123k/3dec9ab...

Display List
https://www.easytechjunkie.com/what-i...

⚠️ N’hésitez pas à liker la vidéo pour que d’autres personnes puissent la découvrir.
💙 Si vous n’êtes pas encore abonnés, n’hésitez pas à le faire activer la cloche 🛎 avec toutes les notifications activées !


Retrouvez des tutoriaux Flutter et Android sur la chaîne DevCafé : https://devcafe.fr/youtube

Retrouvez-moi aussi avec mes deux newsletters :
Flutter Digest 💙 : https://flutter-digest.com/
Android Croissants 🥐 : https://android-croissants.com/

#flutter #optimisation #tutorial