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 deFutureque se observará.initialData: Datos que se muestran antes de que elfuturefinalice.builder: Función (AsyncWidgetBuilder) que se llama en cada cambio de estado delfuturey recibeBuildContextyAsyncSnapshot.
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
Futurese crea dentro del métodobuild. Se recomienda crear elFutureuna sola vez (por ejemplo, eninitState).