Elevar el estado

Parte de la sección Gestión del estado del Journey de Flutter de Coddy. Lección 4 de 27.

Toca el pulgar en el teléfono: el número que aparece junto a él aumenta, pero la barra superior sigue mostrando 0 likes. El botón mantiene su propio recuento en su propio State, y nadie más puede verlo.

Cuando dos widgets necesitan el mismo valor, súbelo al widget más cercano que contenga a ambos. Esto se llama elevar el estado. La página es propietaria de likes, y el botón se convierte en un StatelessWidget que recibe el valor y una función de retorno:

LikeButton(
  likes: likes,
  onLike: () {
    setState(() {
      likes++;
    });
  },
)

Ahora hay un único recuento en un solo lugar. La barra superior, el botón y el botón de reinicio leen y cambian ese mismo valor, así que nunca pueden estar en desacuerdo.

Una prueba rápida: si un valor se muestra o se cambia en dos lugares, el widget que lo posee debe estar por encima de ambos.

Desafío

Intermedio

Haz que la página sea la única propietaria de los «me gusta»:

Convierte LikeButton en un StatelessWidget con dos campos: likes y una función de retorno onLike.
La página pasa su propio likes y un onLike que suma 1 dentro de setState.

Después, la barra superior sigue al botón y el botón de actualizar restablece ambos.

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$likes likes'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                likes = 0;
              });
            },
          ),
        ],
      ),
      body: const Center(
        child: LikeButton(),
      ),
    );
  }
}

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  int likes = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: const Icon(Icons.thumb_up),
          iconSize: 40,
          onPressed: () {
            setState(() {
              likes++;
            });
          },
        ),
        Text('$likes', style: const TextStyle(fontSize: 32)),
      ],
    );
  }
}