ערך שמגיע מאוחר יותר

חלק מהיחידה נתונים ורשת במסלול ה-Flutter של Coddy. שיעור 1 מתוך 27.

עד עכשיו, כל מה שקרה באפליקציות שלך התרחש בבת אחת: מקישים על כפתור, והמסך משתנה. אפליקציות אמיתיות ממתינות לעיתים קרובות. הן ממתינות לשרת שיענה, לקובץ שייטען, או עד שהטיימר יסתיים.

Dart מכנה ערך שעדיין אינו זמין Future. האפשרות הפשוטה ביותר היא Future.delayed: היא ממתינה למשך Duration, ואז מריצה את הפונקציה שנתת לה.

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

האפליקציה שלך לא קופאת בזמן ההמתנה. המסך ממשיך להתרענן והכפתורים ממשיכים לעבוד. כשחולפות 2 השניות, Dart מריצה את הפונקציה, ו-setState מציירת מחדש את המסך עם ההודעה החדשה.

אתגר

קל

הקשה על הרתחת מים מציגה מיד את Tea is ready. למים לוקח זמן. שנו את ההודעה כך שתשתנה 3 שניות לאחר ההקשה, באמצעות Future.delayed.

נסו בעצמכם

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