setState redessine l’écran

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

Appuie sur Add one dans cette application et observe la Console : 1, 2, 3. Le nombre à l’écran reste à 0. Flutter a créé l’écran une seule fois, et rien ne lui a dit de le créer à nouveau.

Un StatelessWidget ne change jamais. Un écran qui change est un StatefulWidget, écrit sous la forme de deux classes :

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

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

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

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage indique seulement quel State créer (createState, écrit sous la forme fléchée présentée dans Fonctions qui renvoient des valeurs). _HomePageState fait le travail : il conserve les données de l’écran dans des variables placées en haut, comme _count, et crée l’écran. Il existe aussi longtemps que l’écran, donc _count conserve sa valeur d’une création à la suivante.

Pour modifier l’écran, change les données à l’intérieur de setState. Cela indique à Flutter « ceci a changé, crée à nouveau l’écran », et le Text affiche le nouveau nombre :

setState(() {
  _count = _count + 1;
});

Le trait de soulignement au début de _HomePageState et de _count rend un nom privé : seul ce fichier peut l’utiliser. Les classes d’état et leurs variables en ont généralement un.

Défi

Moyen

Fais augmenter de un le nombre affiché à l’écran à chaque appui sur Add one : place la modification de _count dans setState.

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: HomePage(),
    );
  }
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}