Sobes.tech
Junior

¿Qué es FutureBuilder en Flutter?

sobes.tech AI

Respuesta de la IA

Widget para construir interfaces basado en datos asíncronos obtenidos de Future.

Parámetros principales:

  • future: Una instancia de Future que se observará.
  • initialData: Datos que se muestran antes de que el future finalice.
  • builder: Función (AsyncWidgetBuilder) que se llama en cada cambio de estado del future y recibe BuildContext y AsyncSnapshot.

Estados de AsyncSnapshot:

  • ConnectionState.none: El Future aún no ha comenzado.
  • ConnectionState.waiting: El Future está en ejecución.
  • ConnectionState.active: (Rara para Future) El Future ha devuelto datos intermedios.
  • ConnectionState.done: El Future ha finalizado (con éxito o con error).

Ejemplo de uso:

// Supongamos que tenemos una función que devuelve un Future<String>
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2)); // Simulación de una solicitud de red
  return "¡Datos cargados!";
}

// ... en el método build del widget:
@override
Widget build(BuildContext context) {
  return FutureBuilder<String>(
    future: fetchData(), // Nuestro Future
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.connectionState == ConnectionState.waiting) {
        // Mostramos un indicador de carga mientras el Future se ejecuta
        return CircularProgressIndicator();
      } else if (snapshot.hasError) {
        // Mostramos un mensaje de error si el Future finaliza con error
        return Text('Error: ${snapshot.error}');
      } else {
        // Mostramos los datos si el Future finaliza con éxito
        return Text('Resultado: ${snapshot.data}');
      }
    },
  );
}

Ventajas:

  • Facilita el trabajo con operaciones asíncronas en la interfaz de usuario.
  • Reconstruye automáticamente la UI al cambiar el estado del Future.
  • Divide claramente la lógica de carga de datos y la lógica de construcción de UI.

Desventajas:

  • Puede causar reconstrucciones innecesarias si el Future se crea dentro del método build. Se recomienda crear el Future una sola vez (por ejemplo, en initState).