FutureBuilder, async, await en Flutter, ejemplo practico

- Andrés Cruz

In english

Hoy vamos a tratar un widget incomprendido como lo es el FutureBuilder; que a primera vista puede parecer abstracto y difícil de emplear, pero, tiene un uso muy particular que nos puede ayudar a completar con éxito un desarrollo que involucre un proceso asíncrono con el cual,  a la final queramos dibujar un widget.

De manera demostrativa el proceso asíncrono, o lo que es lo mismo, aquella función que retorna un Future, que en la práctica es una función que realiza al menos un proceso asíncrono, lo que hace es conectarse a Internet mediante una URL y obtener datos:

static Future<List<dynamic>> getComments(int classId) async {
   var url = Uri.https(baseUrlAPI, "<URL>");

   try {
     final response = await http.get(url);
     if (response.statusCode == 200) {
        return jsonMap['comments']);
     }
   } on Exception {}
   return [];
 }

Ahora, el future es tan fácil de emplear como indicar en el parámetro future, el método asíncrono creado anteriormente, luego, en el parámetro de builder, que es un callback, es donde construimos el widget que necesita la data de entrada provista por el future; en nuestro ejemplo, es el listado de datos:

Widget _listComments() {

   return FutureBuilder(
     future: AcademyHelper.getComments(5),
     builder: (_, snapshot) {

       if (snapshot.hasData && snapshot.data != null) {
         return ListView.builder(
             shrinkWrap: true,
             itemCount: snapshot.data?.length, // comments
             itemBuilder: (_, int position) =>
                 Text(snapshot.data?[position]['comment']));
       } else {
         return const CircularProgressIndicator();
       }
     },
   );
 }

Como puedes ver, no tenemos devuelta la data de manera directa, si no, tenemos un objeto llamado snapshot, que no es más que un envoltorio para nuestros datos; la razón de esto se debe a que este objeto nos da el estado de la petición, ya que, al ser un proceso asíncrono, vamos a querer dibujar un widget ANTES de cargar los datos, que es luego reemplazado por el widget construido a partir de los datos.

El snapshot tiene parámetros como hasData que especifica si ya el future fué resuelto; es muy importante que desde el future NO ocurra una excepción ya que, el future nunca sería resuelto.

Conclusión

A la final el FutureBuilder es particularmente útil, cuando no podemos emplear un proceso asíncrono directamente en el árbol de widget, y no podemos hacer un setState para redibujar el widget, ya que, el FutureBuilder se reconstruye de manera automática al obtener los datos; es como si fuera un statefulwidget automatizado que se construye automáticamente al obtener los datos.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.