Un valor que llega más tarde

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

Hasta ahora, todo en tus aplicaciones ocurría al mismo tiempo: tocas un botón y la pantalla cambia. Las aplicaciones reales suelen esperar. Esperan a que responda un servidor, a que se cargue un archivo o a que termine un temporizador.

Dart llama Future a un valor que todavía no está disponible. El más sencillo es Future.delayed: espera durante un Duration y después ejecuta la función que le das.

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

Tu aplicación no se congela mientras espera. La pantalla sigue dibujándose y los botones siguen funcionando. Cuando pasan los 2 segundos, Dart ejecuta la función y setState vuelve a dibujar la pantalla con el mensaje nuevo.

Desafío

Fácil

Al tocar Boil water, aparece Tea is ready de inmediato. El agua tarda un tiempo. Haz que el mensaje cambie 3 segundos después de tocar el botón, con Future.delayed.

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() {
    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