Hot Reload mantiene lo stato

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 14 di 34.

L'anteprima offre due modi per applicare le modifiche. Esegui avvia l'app da zero. Ricaricamento rapido sostituisce il codice con quello nuovo mentre l'app continua a funzionare, mantenendo lo State: il contatore conserva il suo numero.

Prova: premi il pulsante più alcune volte, cambia il colore del numero e premi Ricaricamento rapido. Il nuovo colore viene mostrato e il conteggio è ancora lì. Mentre definisci lo stile di una schermata, così eviti di dover toccare lo schermo più volte per tornare al punto in cui eri.

Il ricaricamento rapido ricostruisce la schermata con il nuovo codice, ma non crea un nuovo State. Perciò una modifica a un valore iniziale, come int _count = 0; in int _count = 10;, non viene mostrata: quella riga viene eseguita solo quando viene creato lo State. Premi Esegui per vederla.

Lo stesso vale per main e per la trasformazione di un StatelessWidget in un StatefulWidget. Quando una modifica non viene mostrata dopo il ricaricamento rapido, premi Esegui.

Sfida

Facile

Imposta la dimensione del numero a 64 e Colors.deepPurple. Premi il pulsante più alcune volte, poi usa Hot reload e osserva che il conteggio rimane invariato.
Imposta il valore iniziale del contatore a 10. Nota che Hot reload non lo mostra, mentre Run sì.

Provalo tu

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