setState zeichnet den Bildschirm neu

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 11 von 34.

Drücke in dieser App auf Add one und beobachte die Console: 1, 2, 3. Die Zahl auf dem Bildschirm bleibt bei 0. Flutter hat den Bildschirm einmal erstellt, und nichts hat Flutter mitgeteilt, dass er erneut erstellt werden soll.

Ein StatelessWidget ändert sich nie. Ein Bildschirm, der sich ändert, ist ein StatefulWidget und wird mit zwei Klassen geschrieben:

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 gibt nur an, welcher State erstellt werden soll (createState, in der Pfeilnotation aus „Funktionen, die Werte zurückgeben“ geschrieben). _HomePageState erledigt die Arbeit: Die Daten des Bildschirms werden in Variablen am Anfang der Klasse gespeichert, etwa in _count, und der Bildschirm wird erstellt. Der Status bleibt so lange bestehen wie der Bildschirm, daher behält _count seinen Wert von einem Erstellen zum nächsten.

Um den Bildschirm zu ändern, ändere die Daten innerhalb von setState. Damit wird Flutter mitgeteilt: „Das hat sich geändert, erstelle den Bildschirm erneut“, und Text zeigt die neue Zahl an:

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

Der Unterstrich am Anfang von _HomePageState und _count macht einen Namen privat: Nur diese Datei kann ihn verwenden. Statusklassen und ihre Variablen haben normalerweise einen solchen Unterstrich.

Aufgabe

Mittel

Lass die Zahl auf dem Bildschirm bei jedem Drücken von Add one um eins steigen: Führe die Änderung an _count innerhalb von setState durch.

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