Optimiser les performances Flutter : build(), keys, et const Widgets

L'optimisation des performances est un enjeu crucial pour toute application mobile, et Flutter ne fait pas exception.Une application lente ou peu réactive peut nuire à l'expérience utilisateur et entraîner une désinstallation. Pour éviter cela, il est essentiel de comprendre les mécanismes internes de Flutter et d'utiliser les bonnes pratiques pour minimiser les ralentissements.

Cet article propose une amélioration des performances en se concentrant sur trois aspects fondamentaux :

• Le cycle de build()
• Les clés (keys)
• Les widgets const

I. Le cycle de build() : comprendre pour mieux optimiser  

Le processus build() est au cœur du rendu dans Flutter. Lorsqu’un état change ou qu’un widget est reconstruit, la méthode build() est appelée. Une mauvaise gestion de cette méthode peut causer des ralentissements notables.

A. Quand le build() est-il déclenché ?  

1. Lors de la première création du widget.
2. Lors d’un appel à setState().
3. Lorsqu’un parent est reconstruit.

B. Techniques pour réduire l’impact de build()  

1. Utilisation de const dans le constructeur : permet de créer des instances immuables.
2. Fractionner le build : découper l’UI en sous-composants pour réduire la zone d’impact.
3. Eviter les calculs lourds dans build() : déléguer ces tâches à des fonctions pré-calculées ou des méthodes séparées.

Exemple : Optimisation avec des sous-composants

class OptimizedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Header(),
        Content(),
        const Footer(),
      ],
    );
  }
}

Ici, seuls les widgets non-const seront reconstruits, réduisant l’impact sur les performances.

II. Les clés (keys) en Flutter : gestion avancée  

Les keys permettent de conserver l’état d’un widget lors d’une mise à jour de l’interface utilisateur. Ne pas les utiliser correctement peut entraîner des comportements inattendus.

A. Pourquoi utiliser des clés ?  

• Maintenir l’état des widgets dans des listes réordonnables.
• Garantir la cohérence des données lors de changements dynamiques.

B. Différents types de clés et leurs usages  

C. Exemples de code pour chaque type de clé  

GlobalKey  

Les GlobalKey permettent d’identifier un widget de manière unique dans l’ensemble de l’arborescence de widgets. Elles sont utiles pour accéder à l’état d’un widget ou pour effectuer des opérations sur ce dernier depuis n’importe quel endroit dans l’application.

Exemple :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  void _showMessage() {
    _scaffoldKey.currentState?.showSnackBar(
      SnackBar(content: Text('GlobalKey en action !')),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(title: Text('Exemple de GlobalKey')),
        body: Center(
          child: ElevatedButton(
            onPressed: _showMessage,
            child: Text('Afficher un message'),
          ),
        ),
      ),
    );
  }
}

ValueKey  

Les ValueKey sont utilisées lorsque vous avez des éléments uniques dans une liste ou une collection. Elles sont utiles pour conserver l’état des éléments même après un réordonnancement.

**Exemple : ReorderableListView avec ValueKey**
```dart
ReorderableListView(
  children: List.generate(5, (index) {
    return ListTile(
      key: ValueKey(index),
      title: Text('Item $index'),
    );
  }),
  onReorder: (oldIndex, newIndex) {},
)

ObjectKey  

Les ObjectKey utilisent un objet comme identifiant. Cela permet de conserver l’état des widgets basés sur une instance d’objet spécifique.

Exemple :

import 'package:flutter/material.dart';

class Person {
  final String name;
  Person(this.name);
}

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final List<Person> people = [
    Person('Alice'),
    Person('Bob'),
    Person('Charlie'),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Exemple de ObjectKey')),
        body: ListView.builder(
          itemCount: people.length,
          itemBuilder: (context, index) {
            return ListTile(
              key: ObjectKey(people[index]),
              title: Text(people[index].name),
            );
          },
        ),
      ),
    );
  }
}

UniqueKey  

Les UniqueKey sont générées de manière aléatoire à chaque instanciation. Elles sont utiles lorsque vous avez besoin d’une clé toujours unique, même si les objets sont identiques.

Exemple :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Exemple de UniqueKey')),
        body: ListView(
          children: List.generate(5, (index) {
            return ListTile(
              key: UniqueKey(),
              title: Text('Item aléatoire ${index + 1}'),
            );
          }),
        ),
      ),
    );
  }
}

III. Widgets const : pourquoi et comment ?  

L’utilisation du mot-clé const dans vos widgets Flutter peut considérablement améliorer les performances de votre application. Lorsqu’un widget est déclaré comme constant, il est instancié une seule fois lors de la compilation, et non à chaque rendu. Cela signifie que même si l’interface utilisateur est mise à jour, les widgets const ne sont pas reconstruits, ce qui réduit la consommation mémoire et améliore la réactivité de l’application. Les widgets marqués comme const sont également partagés en mémoire lorsqu’ils sont identiques, ce qui optimise davantage l’empreinte mémoire.

A. Avantages des widgets const  

• Réduction de l’empreinte mémoire.
• Moins de calculs lors du rendu.
• Stabilité accrue lors des mises à jour.

Exemple : Widget sans et avec const

// Sans const
Text('Hello', style: TextStyle(fontSize: 18));

// Avec const
const Text('Hello', style: TextStyle(fontSize: 18));

B. Analyse comparative : avec et sans const  

C. Pour quels widgets en Flutter ?  

Les widgets qui bénéficient le plus de cette approche sont ceux qui sont naturellement immuables, c’est-à-dire dont les propriétés ne changent pas au cours de l’exécution. Parmi eux, on trouve les widgets textuels comme Text, RichText, SelectableText, mais aussi les widgets de conteneur tels que Container, Padding, et Center. Les widgets de mise en page comme Row, Column, ou encore les widgets de style comme Icon, CircleAvatar, et Divider sont également des candidats idéaux.

En adoptant systématiquement les const pour ces types de widgets, vous limitez les reconstructions inutiles, contribuant ainsi à des interfaces plus fluides et plus performantes.

IV. Outils de profilage et meilleures pratiques avancées  

A. Utilisation de Flutter DevTools  

Flutter DevTools est une suite d’outils de performance et de débogage pour les applications Flutter et Dart. Elle offre plusieurs fonctionnalités pour analyser et optimiser les performances de votre application :

• Vue Performance : Permet de diagnostiquer les problèmes de performance et les saccades de l’interface utilisateur en affichant des informations sur le timing et les performances des activités de votre application. ( docs.flutter.dev)

• Profiler CPU : Enregistre et profile une session de votre application pour analyser en détail l’activité du CPU. Cela aide à identifier les méthodes coûteuses en termes de performances. ( docs.flutter.dev)

• Vue Mémoire : Affiche des informations sur l’utilisation de la mémoire de votre application et aide à identifier les fuites de mémoire potentielles. ( flutteruniversity.gitbook.io)

B. Bonnes pratiques supplémentaires  

1. Utiliser des listes immuables : Préférer List.unmodifiable() pour éviter les changements non contrôlés.

2. Eviter les fonctions anonymes dans build() : Préférer des méthodes nommées pour réduire les calculs.

3. Recycler les widgets : Utiliser des ListView.builder() pour les listes volumineuses.

4. Tester la performance avec l’outil DevTools : Analyser les traces de build pour détecter les goulets d’étranglement.

Exemples de mesures de performance

• Rebuild tracker : Utiliser un widget personnalisé pour suivre les reconstructions.
• Profilage avec Flutter DevTools : Identifier les animations et widgets gourmands.

5. Minimiser les reconstructions de widgets : Évitez les reconstructions inutiles en utilisant des widgets const lorsque c’est possible et en extrayant la logique des méthodes build() vers des fonctions séparées.

6. Utiliser des clés appropriées : L’utilisation de clés (Key) permet à Flutter de conserver l’état des widgets lors des mises à jour de l’interface utilisateur, évitant ainsi des reconstructions complètes.

7. Éviter les hiérarchies de widgets profondément imbriquées : Des hiérarchies complexes peuvent nuire aux performances. Simplifiez la structure de votre interface utilisateur en aplatissant les hiérarchies de widgets lorsque c’est possible.

8. Utiliser des widgets efficaces : Privilégiez l’utilisation de widgets tels que ListView.builder pour les longues listes, car ils construisent les éléments à la demande, améliorant ainsi les performances.

9. Minimiser l’utilisation de saveLayer() : Cette opération est coûteuse en performances. Utilisez-la avec parcimonie et uniquement lorsque nécessaire. ( docs.flutter.dev)

V. Conclusion  

L’optimisation des performances dans Flutter repose sur une compréhension approfondie du cycle de vie des widgets, l’utilisation judicieuse des const et des keys, ainsi que l’application de bonnes pratiques de développement. En combinant ces techniques avec les outils de profilage fournis par Flutter, vous pouvez créer des applications performantes et réactives.

🔗 Ressources utiles  

• Documentation officielle Flutter
• Codelabs Flutter
• Dépendances et packages