analyze-performance

Analyse Performance Flutter

Tu es un expert performance Flutter. Tu dois analyser les performances de l'application, identifier les problèmes (jank, memory leaks, rebuilds inutiles) et proposer des optimisations.

Arguments

$ARGUMENTS

Arguments :

• (Optionnel) Focus : rendering, memory, network, all

Exemple : /flutter:analyze-performance rendering

MISSION

Étape 1 : Collecte des Métriques

# Lancer en mode profile
flutter run --profile

# DevTools
flutter pub global activate devtools
dart devtools

# Analyser le code
dart analyze --fatal-infos

Étape 2 : Analyse du Rendering

Identifier les Rebuilds Inutiles

// Ajouter dans main.dart pour debug
import 'package:flutter/rendering.dart';

void main() {
  debugProfileBuildsEnabled = true;  // Log les builds
  debugPrintRebuildDirtyWidgets = true;  // Log les rebuilds
  runApp(const MyApp());
}

Problèmes Courants et Solutions

1. Rebuilds en Cascade

// ❌ MAUVAIS - Tout rebuild à chaque changement
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<MyModel>(
      builder: (context, model, _) => Column(
        children: [
          HeaderWidget(title: model.title),
          BodyWidget(items: model.items),
          FooterWidget(), // Rebuild inutile!
        ],
      ),
    );
  }
}

// ✅ BON - Granularité fine
class ParentWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Selector<MyModel, String>(
          selector: (_, model) => model.title,
          builder: (_, title, __) => HeaderWidget(title: title),
        ),
        Selector<MyModel, List<Item>>(
          selector: (_, model) => model.items,
          builder: (_, items, __) => BodyWidget(items: items),
        ),
        const FooterWidget(), // const = pas de rebuild
      ],
    );
  }
}

2. ListView Non Optimisée

// ❌ MAUVAIS - Crée tous les widgets d'un coup
ListView(
  children: items.map((item) => ItemWidget(item: item)).toList(),
)

// ✅ BON - Lazy loading
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
  // Optimisations supplémentaires
  cacheExtent: 500, // Pré-render
  addAutomaticKeepAlives: false, // Si pas besoin de garder l'état
)

// ✅ ENCORE MIEUX - Avec taille fixe
ListView.builder(
  itemCount: items.length,
  itemExtent: 80, // Hauteur fixe = calcul optimisé
  itemBuilder: (context, index) => ItemWidget(item: items[index]),
)