Hot Reload conserva el estado

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 14 de 34.

La vista previa tiene dos formas de incorporar tus cambios. Ejecutar inicia la aplicación desde cero. Recarga en caliente sustituye el código por el nuevo mientras la aplicación sigue en ejecución y conserva el Estado: el contador mantiene su número.

Pruébalo: pulsa el signo más unas cuantas veces, cambia el color del número y pulsa Recarga en caliente. Se muestra el nuevo color y el contador sigue ahí. Mientras das estilo a una pantalla, eso te evita tener que volver a pulsar hasta donde estabas.

La recarga en caliente vuelve a construir la pantalla con tu nuevo código, pero no crea un Estado nuevo. Así que un cambio en un valor inicial, como pasar de int _count = 0; a int _count = 10;, no se muestra: esa línea solo se ejecuta cuando se crea el Estado. Pulsa Ejecutar para verlo.

Lo mismo ocurre con main y al convertir un StatelessWidget en un StatefulWidget. Si un cambio no se muestra después de la recarga en caliente, pulsa Ejecutar.

Desafío

Fácil

Haz que el tamaño del número sea 64 y usa Colors.deepPurple. Pulsa el signo más unas cuantas veces primero, después usa la recarga en caliente y observa que el contador se mantiene.
Haz que el contador empiece en 10. Observa que la recarga en caliente no lo muestra y que Ejecutar sí.

Pruébalo tú mismo

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),
          ],
        ),
      ),
    );
  }
}