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/widgets/RepaintBoundary-class.html

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

Display List https://www.easytechjunkie.com/what-is-a-display-list.htm

⚠️ 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 ... https://www.youtube.com/watch?v=fSa10M4GD6Y