Asincronismo en Flutter
El asincronismo en Fluter es muy similar a como se maneja en JavaScript. Si ya sabes de asincronismo en JavaScript no te quedará difícil entenderlo en Dart. Al definir un bloque de código asíncrono utilizamos async, y dentro del bloque utilizamos await.
Para entender el asincronismo en flutter vamos a hacer uso de los Futures. Con esto podemos simular el comportamiento de una llamada asíncrona como por ejemplo el consumo de una API. Veamos la siguiente función.
void getData() {
Future.delayed(Duration(seconds: 3), () {
print('delayed code');
});
print('not delayed code');
}
Al ejecutar esta función verás en la consola lo siguiente:
I/flutter (11285): not delayed code
I/flutter (11285): delayed code
Y esto es así ya que el código dentro del método delayed es puesto "en otro hilo" y resulta no bloqueante. Ahora bien, si quisiéramos que alguna llamada se realice de manera síncrona debemos definir la función como síncrona y dentro del bloque de código de la función indicar el código síncrono por el cual debemos esperar respuesta. Siempre que utilices la keyword await debes asegurarte de que la función en donde la uses sea async.
void getData() async {
await Future.delayed(Duration(seconds: 3), () {
print('I need this sync');
});
Future.delayed(Duration(seconds: 3), () {
print('delayed code');
});
print('not delayed code');
}
De esto obtendríamos lo siguiente:
I/flutter (11285): I need this sync
I/flutter (11285): not delayed code
I/flutter (11285): delayed code
Las sentencias de código con await funcionan de la manera esperada, es decir, síncrona. El código restante funciona de manera asíncrona si es un Future a menos que se le indique lo contrario. Si cualquier función dentro del método delayed devolviera algún valor también podríamos asignarlo con await.
void getData() async {
String message = await Future.delayed(Duration(seconds: 3), () {
return 'I need this sync';
});
print(message);
}
Finalmente ten en cuenta que aún cuando todo el código de una función fuese definido con await esto no garantiza que la función en sí sea síncrona. Si utilizamos la función anterior en otro segmento de código así.
getData();
print('printed at the end!');
Seguramente obtendremos lo siguiente:
I/flutter (11285): printed at the end!
I/flutter (11285): I need this sync
Para hacer la llamada a la función getData() síncrona, primero debemos devolver un Future del tipo que devuelva la función así:
Future getData() async {
String message = await Future.delayed(Duration(seconds: 3), () {
return 'I need this sync';
});
print(message);
}
Una vez hecho esto podemos llamarla tranquilamente con await.
await getData();
print('printed at the end!');
El resultado será el esperado.
I/flutter (11285): I need this sync
I/flutter (11285): printed at the end!