Widgets const

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 15 sur 34.

const devant une valeur signifie : elle est fixe lorsque vous écrivez le code et ne change jamais. const Text('Score') affichera Score tant que l’application est en cours d’exécution.

Pourquoi le dire à Dart ? Lorsque setState reconstruit l’écran, Flutter peut ignorer chaque widget const, car il sait que rien à l’intérieur n’a changé. C’est pourquoi les éditeurs de code de Flutter, comme VS Code et Android Studio, soulignent un widget qui pourrait être const et suggèrent de l’ajouter. À partir de maintenant, les applications de ce cours utilisent const lorsque c’est approprié.

const s’applique aussi à l’intérieur : pour un widget, tout ce qui se trouve entre ses parenthèses est également const. Vous ne l’écrivez donc qu’une fois, sur le widget le plus extérieur qui ne change jamais :

const Column(
  children: [
    Text('Score'),
    Icon(Icons.star),
  ],
)

Une variable peut changer, donc elle ne peut jamais se trouver à l’intérieur de const. Placez Text('$_score') dans cette colonne et Dart refuse de compiler, avec l’erreur "Not a constant expression". Pour corriger le problème : retirez const de la colonne et placez-le sur chaque enfant qui ne change pas :

Column(
  children: [
    const Text('Score'),
    Text('$_score'),
  ],
)

Défi

Moyen

Le score augmente lorsque tu appuies sur le bouton plus, mais l’écran ne l’affiche jamais. Sous Score, ajoute Text('$_score') en taille 48. Tu devras déplacer const de Column vers les widgets qu’elle contient et qui ne changent jamais.

Essayez vous-même

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _score = 0;

  void _goal() {
    setState(() {
      _score++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Game')),
      body: Center(
        child: const Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(Icons.sports_soccer, size: 64),
            Text('Score', style: TextStyle(fontSize: 24)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goal,
        child: const Icon(Icons.add),
      ),
    );
  }
}