Ein Wert, der später verfügbar wird

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 1 von 27.

Bisher geschah in deinen Apps alles auf einmal: Du tippst auf eine Schaltfläche, und der Bildschirm ändert sich. Echte Apps warten oft. Sie warten darauf, dass ein Server antwortet, eine Datei geladen wird oder ein Timer abläuft.

Dart nennt einen Wert, der noch nicht verfügbar ist, ein Future. Das einfachste davon ist Future.delayed: Es wartet eine Duration lang und führt dann die Funktion aus, die du ihm übergibst.

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

Deine App friert während des Wartens nicht ein. Der Bildschirm wird weiterhin gezeichnet und die Schaltflächen funktionieren weiterhin. Wenn die 2 Sekunden vorbei sind, führt Dart die Funktion aus, und setState zeichnet den Bildschirm mit der neuen Nachricht neu.

Aufgabe

Einfach

Durch Tippen auf Boil water wird sofort Tea is ready angezeigt. Wasser braucht Zeit. Ändere die Meldung 3 seconds nach dem Tippen mit Future.delayed.

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: TeaScreen(),
    );
  }
}

class TeaScreen extends StatefulWidget {
  const TeaScreen({super.key});

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    setState(() {
      message = 'Tea is ready';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}