Elevar o estado

Parte da seção Gerenciamento de estado do Journey de Flutter da Coddy. Lição 4 de 27.

Toque no polegar no celular: o número ao lado dele aumenta, mas a barra superior ainda mostra 0 likes. O botão mantém sua contagem em seu próprio State, e nada mais pode vê-la.

Quando dois widgets precisam do mesmo valor, mova-o para cima até o widget mais próximo que contém ambos. Isso é chamado de elevar o estado. A página possui likes, e o botão se torna um StatelessWidget que recebe o valor e um callback:

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

Agora há uma única contagem em um só lugar. A barra superior, o botão e o botão de redefinição leem e alteram esse único valor, então nunca podem discordar.

Um teste rápido: se um valor é exibido ou alterado em dois lugares, o widget que o possui deve estar acima dos dois.

Desafio

Médio

Faça com que a página seja a única responsável pelas curtidas:

Transforme LikeButton em um StatelessWidget com dois campos: likes e um callback onLike.
A página passa o próprio likes e um onLike que adiciona 1 dentro de setState.

Assim, a barra superior acompanha o botão, e o botão de atualizar redefine ambos.

Experimente você mesmo

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