Le rechargement à chaud conserve l’état

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

L’aperçu propose deux façons d’appliquer vos modifications. Run démarre l’application depuis le début. Hot reload remplace votre code par le nouveau pendant que l’application continue de fonctionner, tout en conservant l’état : le compteur garde sa valeur.

Essayez : appuyez plusieurs fois sur le signe plus, changez la couleur du nombre, puis appuyez sur Hot reload. La nouvelle couleur s’affiche, et le compteur conserve sa valeur. Lorsque vous mettez un écran en forme, cela vous évite de devoir appuyer plusieurs fois pour revenir à votre point de départ.

Hot reload reconstruit l’écran avec votre nouveau code, mais ne crée pas un nouvel état. Ainsi, une modification de la valeur initiale, comme int _count = 0; remplacé par int _count = 10;, ne s’affiche pas : cette ligne ne s’exécute que lorsque l’état est créé. Appuyez sur Run pour la voir.

Il en va de même pour main, ainsi que pour la transformation d’un StatelessWidget en StatefulWidget. Si une modification ne s’affiche pas après Hot reload, appuyez sur Run.

Défi

Facile

Régle la taille du nombre sur 64 et la couleur sur Colors.deepPurple. Appuie plusieurs fois sur le bouton plus, puis utilise le rechargement à chaud et constate que le compteur reste inchangé.
Fais commencer le compteur à 10. Remarque que le rechargement à chaud ne l’affiche pas, contrairement à l’exécution.

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}