setState ridisegna lo schermo

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

Premi Aggiungi uno in questa app e osserva la Console: 1, 2, 3. Il numero sullo schermo resta 0. Flutter ha creato lo schermo una sola volta e nulla gli ha detto di ricrearlo.

Un StatelessWidget non cambia mai. Uno schermo che cambia è un StatefulWidget, scritto come due classi:

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 indica solo quale State creare (createState, scritto nella forma con freccia introdotta in Functions That Return Values). _HomePageState svolge il lavoro: conserva i dati dello schermo in variabili in cima alla classe, come _count, e crea lo schermo. Rimane attiva per tutta la durata dello schermo, quindi _count mantiene il proprio valore da una creazione all'altra.

Per cambiare lo schermo, modifica i dati all'interno di setState. Questo dice a Flutter «è cambiato qualcosa, ricrea lo schermo» e Text mostra il nuovo numero:

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

Il trattino basso all'inizio di _HomePageState e _count rende un nome privato: solo questo file può usarlo. Le classi di stato e le loro variabili di solito ne hanno uno.

Sfida

Medio

Fai aumentare di uno il numero sullo schermo a ogni pressione di Add one: inserisci la modifica a _count dentro setState.

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;

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