setState redesenha a tela

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 11 de 34.

Pressione Adicionar um neste app e observe o Console: 1, 2, 3. O número na tela continua sendo 0. O Flutter criou a tela uma vez, e nada o instruiu a criá-la novamente.

Um StatelessWidget nunca muda. Uma tela que muda é um StatefulWidget, escrito como duas classes:

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 apenas informa qual State criar (createState, escrito na forma de seta apresentada em Funções que retornam valores). _HomePageState faz o trabalho: mantém os dados da tela em variáveis no início da classe, como _count, e constrói a tela. Ele existe enquanto a tela existir, então _count mantém seu valor de uma construção para a próxima.

Para mudar a tela, altere os dados dentro de setState. Ele informa ao Flutter "isso mudou, construa novamente", e o Text mostra o novo número:

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

O sublinhado no início de _HomePageState e _count torna um nome privado: somente este arquivo pode usá-lo. Classes de estado e suas variáveis geralmente têm um.

Desafio

Médio

Faça o número na tela aumentar em um a cada toque em Add one: coloque a alteração de _count dentro de setState.

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