setState vuelve a dibujar la pantalla

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

Pulsa Add one en esta app y observa la consola: 1, 2, 3. El número en la pantalla sigue siendo 0. Flutter construyó la pantalla una vez y nada le indicó que la construyera de nuevo.

Un StatelessWidget nunca cambia. Una pantalla que cambia es un StatefulWidget, escrito como dos clases:

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 solo indica qué State crear (createState, escrito en la forma de flecha de Functions That Return Values). _HomePageState hace el trabajo: mantiene los datos de la pantalla en variables al principio, como _count, y construye la pantalla. Existe mientras exista la pantalla, así que _count conserva su valor de una construcción a la siguiente.

Para cambiar la pantalla, cambia los datos dentro de setState. Esto le indica a Flutter «esto ha cambiado, vuelve a construir», y Text muestra el nuevo número:

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

El guion bajo al principio de _HomePageState y _count hace que un nombre sea privado: solo este archivo puede usarlo. Las clases de estado y sus variables suelen tener uno.

Desafío

Intermedio

Haz que el número en la pantalla aumente en uno cada vez que pulses Add one: coloca el cambio de _count dentro de setState.

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;

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