Esperar con async y await

Parte de la sección Datos y red del Journey de Flutter de Coddy. Lección 2 de 27.

La aplicación del té debería mostrar Boiling... primero y Tea is ready después. Con una función de devolución de llamada dentro de Future.delayed, cuesta leer el orden. Dart tiene una forma más clara: await.

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

await pausa esta función hasta que termina el futuro y después continúa con la siguiente línea. El código se lee de arriba abajo, en el orden en que suceden las cosas.

Hay dos reglas. Una función que usa await se marca como async. Una función async devuelve un Future: Future<void> cuando no devuelve nada. Solo esta función se pausa. El resto de la aplicación sigue ejecutándose.

Desafío

Fácil

Reescribe boil con async y await:

justo después de tocar, el mensaje es Boiling...
3 segundos después, es Tea is ready

Pruébalo tú mismo

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

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Datos y red

Practica por tu cuenta: Compilador de Flutter online