Conoce FutureBuilder

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

La mayoría de las pantallas cargan sus datos en cuanto se abren, sin necesidad de pulsar un botón. Flutter tiene un widget para mostrar un futuro: FutureBuilder. Le das el futuro y vuelve a construir la pantalla cada vez que cambia el estado del futuro.

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot representa el estado actual del futuro. Antes de que llegue la respuesta, snapshot.hasData es false, así que se muestra el indicador de carga. Cuando llega, el builder se ejecuta de nuevo y snapshot.data contiene la cadena.

snapshot.data tiene el tipo String?: una cadena o null, porque al principio no hay datos. El ! que viene después indica «Lo comprobé: no es null». Úsalo solo después de hasData: si es null, la aplicación se bloquea.

El código inicial ya crea el futuro una vez, en initState, que se ejecuta cuando se abre la pantalla. late le indica a Dart que la variable recibirá su valor ahí, antes de usarse. La siguiente lección explica por qué se encuentra ahí.

Desafío

Intermedio

La aplicación carga el mensaje en initState, pero nunca lo muestra. Reemplaza el marcador de posición Text por un FutureBuilder<String> para _message:

un CircularProgressIndicator mientras se carga
el mensaje, de tamaño 24, cuando llegue

Pruébalo tú mismo

import 'package:flutter/material.dart';

import 'api.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: MessageScreen(),
    );
  }
}

class MessageScreen extends StatefulWidget {
  const MessageScreen({super.key});

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}

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