O Hot Reload mantém o estado

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

A prévia tem duas maneiras de aplicar suas alterações. Run inicia o app do zero. Hot reload substitui seu novo código enquanto o app continua em execução e preserva o State: o contador mantém o número.

Experimente: pressione o sinal de mais algumas vezes, mude a cor do número e pressione Hot reload. A nova cor aparece, e a contagem continua lá. Enquanto você estiliza uma tela, isso evita que você tenha que tocar várias vezes para voltar ao ponto em que estava.

Hot reload reconstrói a tela com seu novo código, mas não cria um novo State. Portanto, uma alteração em um valor inicial, como int _count = 0; para int _count = 10;, não aparece: essa linha só é executada quando o State é criado. Pressione Run para vê-la.

O mesmo vale para main e para transformar um StatelessWidget em um StatefulWidget. Quando uma alteração não aparecer após Hot reload, pressione Run.

Desafio

Fácil

Defina o tamanho do número como 64 e a cor como Colors.deepPurple. Pressione o botão de mais algumas vezes primeiro, depois use o recarregamento a quente e veja o contador permanecer.
Faça o contador começar em 10. Observe que o recarregamento a quente não mostra esse valor, mas a execução mostra.

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;

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