State

Erster Versuch

Eine normale Variable reicht nicht: Antippen ändert den Wert, aber die Anzeige bleibt gleich.

@override
Widget build(BuildContext context) {
  var useCelsius = true; // funktioniert nicht!

  return TextButton(
    onPressed: () => useCelsius = !useCelsius,
    child: Text(useCelsius ? '°C' : '°F'),
  );
}

StatefulWidget

Ein StatefulWidget besteht aus zwei Klassen: dem Widget und seinem State, der über build hinweg erhalten bleibt.

class WeatherScreen extends StatefulWidget {
  const WeatherScreen({super.key, required this.city, required this.weather});
  // final-Felder city und weather ...

  @override
  State<WeatherScreen> createState() => _WeatherScreenState();
}

class _WeatherScreenState extends State<WeatherScreen> {
  bool _useCelsius = true;
  // build(...) wie bisher, Zugriff auf Felder des Widgets mit widget.city
}

setState

setState ändert den Zustand und sagt Flutter, dass build erneut aufgerufen werden muss.

TextButton(
  onPressed: () => setState(() => _useCelsius = !_useCelsius),
  child: Text(_useCelsius ? '°C' : '°F'),
)

Lifting State Up

Den State dort halten, wo alle ihn brauchen, und ihn nach unten weitergeben. Änderungen kommen als Callbacks zurück nach oben.

Lifting State Up

bool _useCelsius = true;

UnitToggle(
  useCelsius: _useCelsius,                                     // State ↓
  onToggle: () => setState(() => _useCelsius = !_useCelsius), // Event ↑
),
CurrentWeatherCard(city: …, weather: …, useCelsius: _useCelsius), // State ↓

Zusammenfassung