State nach oben verschieben

Teil des Abschnitts State Management der Flutter-Journey von Coddy. Lektion 4 von 27.

Tippe auf den Daumen auf dem Telefon: Die Zahl daneben steigt, aber in der oberen Leiste steht weiterhin 0 likes. Die Schaltfläche speichert ihren Zähler in ihrem eigenen State, und sonst kann niemand darauf zugreifen.

Wenn zwei Widgets denselben Wert benötigen, verschiebe ihn zum nächstgelegenen Widget, das beide enthält. Das nennt man Hochheben des Zustands. Die Seite verwaltet likes, und die Schaltfläche wird zu einem StatelessWidget, das den Wert und einen Callback erhält:

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

Jetzt gibt es einen einzigen Zähler an einer Stelle. Die obere Leiste, die Schaltfläche und die Zurücksetzen-Schaltfläche lesen und ändern alle diesen einen Wert, sodass sie niemals unterschiedliche Werte anzeigen können.

Ein kurzer Test: Wenn ein Wert an zwei Stellen angezeigt oder geändert wird, muss das Widget, das ihn verwaltet, über beiden liegen.

Aufgabe

Mittel

Mache die Seite zum alleinigen Besitzer der Likes:

Wandle LikeButton in ein StatelessWidget mit zwei Feldern um: likes und einem onLike-Callback.
Die Seite übergibt ihr eigenes likes und ein onLike, das innerhalb von setState 1 hinzufügt.

Dann folgt die obere Leiste dem Button, und die Aktualisierungsschaltfläche setzt beide zurück.

Probier es selbst

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