Remonter l’état

Fait partie de la section Gestion d’état du Journey Flutter de Coddy. Leçon 4 sur 27.

Appuie sur le pouce à l’écran : le nombre à côté augmente, mais la barre supérieure affiche toujours 0 likes. Le bouton conserve son compteur dans son propre State, et rien d’autre ne peut le voir.

Lorsque deux widgets ont besoin de la même valeur, remonte-la jusqu’au widget le plus proche qui les contient tous les deux. C’est ce qu’on appelle remonter l’état. La page possède likes, et le bouton devient un StatelessWidget qui reçoit la valeur et une fonction de rappel :

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

Il n’y a maintenant qu’un seul compteur, à un seul endroit. La barre supérieure, le bouton et le bouton de réinitialisation lisent et modifient tous cette même valeur, ils ne peuvent donc jamais être en désaccord.

Petit test : si une valeur est affichée ou modifiée à deux endroits, le widget qui la possède doit se trouver au-dessus des deux.

Défi

Moyen

Fais de la page l’unique propriétaire des mentions J’aime :

Transforme LikeButton en StatelessWidget avec deux champs : likes et un rappel onLike.
La page transmet son propre likes, ainsi qu’un onLike qui ajoute 1 dans setState.

La barre supérieure suit alors le bouton, et le bouton d’actualisation réinitialise les deux.

Essayez vous-même

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