Sonradan Gelen Bir Değer

Coddy'nin Flutter Journey'sinin Veri ve Ağ bölümünün bir parçası. Ders 1 / 27.

Şimdiye kadar uygulamalarındaki her şey aynı anda gerçekleşiyordu: bir düğmeye dokun, ekran değişsin. Gerçek uygulamalar çoğu zaman bekler. Bir sunucunun yanıt vermesini, bir dosyanın yüklenmesini ya da bir zamanlayıcının süresinin dolmasını beklerler.

Dart, henüz mevcut olmayan bir değere Future adını verir. En basit olanı Future.delayed’dır: bir Duration kadar bekler, ardından verdiğin işlevi çalıştırır.

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

Uygulaman beklerken donmaz. Ekran çizilmeye, düğmeler de çalışmaya devam eder. 2 saniye dolduğunda Dart işlevi çalıştırır ve setState ekranı yeni mesajla yeniden çizer.

Görev

Kolay

Boil water düğmesine dokununca Tea is ready hemen görüntüleniyor. Suyun kaynaması zaman alır. Mesajı, dokunduktan 3 seconds sonra Future.delayed kullanarak değiştir.

Kendin dene

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