Hot Reload behält den Zustand

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

Die Vorschau bietet zwei Möglichkeiten, deine Änderungen zu übernehmen. Run startet die App von Grund auf neu. Hot reload übernimmt deinen neuen Code, während die App weiterläuft, und behält den State bei: Der Zähler behält seinen Wert.

Probier es aus: Drück ein paar Mal auf das Pluszeichen, ändere die Farbe der Zahl und drück auf Hot reload. Die neue Farbe wird angezeigt, und der Zählerstand bleibt erhalten. Wenn du einen Bildschirm gestaltest, musst du dich so nicht durch Tippen erst wieder zu der Stelle zurückarbeiten, an der du warst.

Hot reload erstellt den Bildschirm mit deinem neuen Code erneut, aber es erzeugt keinen neuen State. Deshalb wird eine Änderung des Startwerts, etwa von int _count = 0; zu int _count = 10;, nicht angezeigt: Diese Zeile wird nur ausgeführt, wenn der State erstellt wird. Drück auf Run, um den neuen Wert zu sehen.

Dasselbe gilt für main und dafür, ein StatelessWidget in ein StatefulWidget umzuwandeln. Wenn eine Änderung nach Hot reload nicht angezeigt wird, drück auf Run.

Aufgabe

Einfach

Stelle die Zahlengröße auf 64 und die Farbe auf Colors.deepPurple. Drücke zuerst ein paar Mal auf das Pluszeichen, verwende dann Hot Reload und sieh, dass der Zählerstand erhalten bleibt.
Lass den Zähler bei 10 starten. Beachte, dass Hot Reload diesen Wert nicht anzeigt, Ausführen hingegen schon.

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}