Solleva lo stato

Fa parte della sezione Gestione dello stato del percorso Flutter di Coddy. Lezione 4 di 27.

Tocca il pollice sul telefono: il numero accanto aumenta, ma la barra superiore mostra ancora 0 likes. Il pulsante mantiene il proprio conteggio nel suo State, e nessun altro può vederlo.

Quando due widget hanno bisogno dello stesso valore, spostalo in alto fino al widget più vicino che li contiene entrambi. Questa tecnica si chiama sollevamento dello stato. La pagina è proprietaria di likes e il pulsante diventa un StatelessWidget che riceve il valore e una callback:

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

Ora c'è un unico conteggio in un unico posto. La barra superiore, il pulsante e il pulsante di ripristino leggono e modificano tutti lo stesso valore, quindi non possono mai essere in disaccordo.

Una verifica rapida: se un valore viene mostrato o modificato in due posti, il widget che ne è proprietario deve trovarsi al di sopra di entrambi.

Sfida

Medio

Fai in modo che la pagina sia l'unica proprietaria dei Mi piace:

Trasforma LikeButton in un StatelessWidget con due campi: likes e una callback onLike.
La pagina passa il proprio likes e un onLike che aggiunge 1 all'interno di setState.

Così la barra superiore segue il pulsante e il pulsante di aggiornamento azzera entrambi.

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