async ve await ile Beklemek

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

Çay uygulaması önce Boiling..., daha sonra Tea is ready yazmalıdır. Future.delayed içinde bir geri çağırma kullanıldığında, işlem sırasını takip etmek zordur. Dart'ın daha anlaşılır bir yolu vardır: await.

Future<void> boil() async {
  setState(() {
    message = 'Boiling...';
  });
  await Future.delayed(const Duration(seconds: 3));
  setState(() {
    message = 'Tea is ready';
  });
}

await, gelecek tamamlanana kadar bu işlevi duraklatır, sonra bir sonraki satırla devam eder. Kod, olayların gerçekleşme sırasına göre yukarıdan aşağıya okunur.

Bununla birlikte iki kural vardır. await kullanan bir işlev async olarak işaretlenir. Bir async işlevi bir Future döndürür: geriye hiçbir şey vermediğinde Future<void>. Yalnızca bu işlev duraklar. Uygulamanın geri kalanı çalışmaya devam eder.

Görev

Kolay

async ve await kullanarak boil işlevini yeniden yaz:

dokunur dokunmaz mesaj Boiling... olur
3 saniye sonra mesaj Tea is ready olur

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() {
    Future.delayed(const Duration(seconds: 3), () {
      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')),
          ],
        ),
      ),
    );
  }
}