Flutter est un framework dont la puissance est désormais bien connue. Utilisé souvent de pair avec Dart, il est même devenu le standard pour le développement d’applications cross-platform et vous avez très certainement déjà entendu parler de l’outil ou même déjà utilisé. Dans cet article, nous allons voir ensemble comment optimiser vos applications créées avec Flutter et Dart en abordant des sujets comme la mesure de la performance ou la gestion de la mémoire.
Vous souhaitez devenir des experts de la création d’applications multiplateforme ? Notre formation Flutter et Dart de 3 jours en inter et intraentreprise vous apprendra toutes les compétences nécessaires pour créer vos propres interfaces utilisateurs.
L’équipe Ambient IT
Comment mesurer les performances de mon application flutter ?
Avant de pouvoir optimiser vos performances, il est évidemment important de savoir comment les mesurer.
Avec des outils comme Flutter DevTools, vous pourrez profiler vos applications et identifier les goulets d’étranglement.
Une fois l’outil installé, la commande flutter pub global run devtools permet de l’ouvrir dans votre navigateur par défaut.
Avec l’onglet « Performance », vous pourrez lancer l’enregistrement de vos performances, il vous suffira d’interagir avec votre application pour que l’outil fasse sa magie.
Une fois que vous aurez trouvé les bonnes métriques, vous pourrez vous préoccuper de comment les optimiser.
Comment optimiser mon application Flutter et dart ?
Maintenant que vous savez mesurer les performances, nous pouvons entrer dans le cœur du sujet, comment les optimiser
Utilisation de Const
Utiliser le mot-clé const dans Dart permet la création d’une instance unique d’un objet. Cette fonction marche même si ses propriétés sont identiques à un autre.
Cela permet d’optimiser la mémoire et par extension les performances, car Dart réutilise la même instance dans le but d’économiser les ressources.
class Person {
final String name;
final int age;
const Person(this.name, this.age); // Constructor for const objects
}
void main() {
const Person person1 = Person('Alice', 30);
const Person person2 = Person('Alice', 30);
print(identical(person1, person2)); // This will print 'true' because person1 and person2 are identical const objects
}
ListView.builder ou CustomScrollView
Pour les menus déroulants et autres listes, je vous conseille de vous servir de ListView.builder ou CustomScrollView.
Ce sont des widgets qui ne chargent que les éléments visibles à l’écran et donc améliorent drastiquement les performances par rapport à d’autres outils.
Vous
Utilisez des Widgets
D’ailleurs,ailleurs en parlant de widget, je vous conseille de les privilégier par rapport aux fonctions d’aide pour construire votre UI.
Les widgets sont plus performants, car ils permettent à Flutter de mieux optimiser la reconstruction de l’arbre des widgets.
Choisissez judicieusement entre des widgets stateless et stateful. Ces derniers ne doivent être utilisés qu’en dernier recours car ils sont bien plus demandant en termes de performances.
Animations
Avant de vous lancer dans les animations sur votre interface, utilisez bien la commande RepaintBoundary afin de délimiter les zones qui nécessitent d’être redessinées.
Les animations peuvent ralentir une animation, surtout en cas de mauvaise gestion. Avec des widgets comme AnimatedBuilder
Il est également possible de réaliser une technique appelée caching afin de réutiliser des images ou des animations rendues précédemment :
- Mise en cache des animations implicites. En utilisant AnimatedContainer et AnimatedOpacity, Flutter met automatiquement en cache les animations.
- Mise en cache explicite de l’animation. Technique offrant plus de personnalisations que la précédente, AnimationController avec AnimatedBuilder ou AnimatedWidget permet de réaliser la mise en cache manuellement.
- Accélération matérielle. Flutter utilise le GPU de votre appareil pour effectuer un rendu efficace des animations, ce qui se traduit par des performances plus fluides et une utilisation réduite de l’unité centrale.
- Mise en cache des actifs. Il faut aussi savoir que Flutter met en cache les actifs afin de les réutiliser plus facilement.
Conclusion
Pour faire simple, optimiser votre application Flutter et Dart nécessite une compréhension de plusieurs aspects du framework et du langage.
En suivant ces petits conseils, vous devriez avoir vos premières pistes intéressantes pour commencer à optimiser vos applications en profondeur. Vous serez alors en mesure de créer des applications performantes, fluides et réactives.
N’oubliez pas qu’optimiser votre application, c’est avant tout un marathon et pas un sprint et que vous devrez toujours être à l’affut pour ne rater aucune optimisation possible.
