La interfaz de usuario asíncrona de Flutter inicializa FutureBuilder

El papel de FutureBuilder

FutureBuilder es un widget en Flutter que se usa para construir la interfaz de usuario después de que se completa la operación asincrónica. Recibe un objeto Future y crea la interfaz de usuario en función del estado de la operación asincrónica, que puede mostrar indicadores de carga, mensajes de error o datos después de que se completa la operación asincrónica.

Definición del constructor de FutureBuilder

El constructor de FutureBuilder se define de la siguiente manera:

FutureBuilder<T>(
  { 
    Key? key,
    required Future<T> future,
    T? initialData,
    required AsyncWidgetBuilder<T> builder,
    String? semanticLabel,
    FutureBuilderFallbackBuilder? fallbackBuilder,
  }
)

Entre ellos, los parámetros se describen a continuación:

• clave: Clave utilizada para identificar el Widget.
• futuro: un objeto futuro que representa una operación asincrónica.
• initialData: los datos iniciales antes de que se complete la operación asincrónica, o nulos si no se proporcionan.
• builder: una función de devolución de llamada AsyncWidgetBuilder, que se utiliza para crear la interfaz de usuario y devolver diferentes widgets según el estado de la operación asincrónica.
• semanticLabel: una etiqueta para ayudar a la accesibilidad.
• fallbackBuilder: una función de devolución de llamada de FutureBuilderFallbackBuilder, que se usa para crear la interfaz de usuario, que se usa cuando falla la operación asincrónica.

Descripción del estado de una operación asíncrona

En la función de devolución de llamada del constructor, se pueden devolver diferentes Widgets según el estado de la operación asincrónica. Los estados comunes incluyen:

• ConnectionState.none: la operación asíncrona no se ha iniciado y se puede mostrar un indicador de carga u otra información de solicitud.
• ConnectionState.waiting: la operación asincrónica está en curso y se puede mostrar un indicador de carga u otra información de solicitud.
• ConnectionState.active: la operación asincrónica está en curso, similar al estado de espera, pero puede proporcionar un objeto Future para cancelar la operación.
• ConnectionState.done: la operación asincrónica se ha completado y la interfaz de usuario se puede construir de acuerdo con el resultado de la operación asincrónica.

Por ejemplo

Aquí hay un ejemplo simple que usa un FutureBuilder para mostrar el resultado de una operación asincrónica:

FutureBuilder<String>(
  future: _getData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Result: ${snapshot.data}');
    }
  },
)

En este ejemplo, _getData() es una operación asíncrona que devuelve una cadena. En la función de devolución de llamada del constructor, se devuelven diferentes Widgets según el estado de la operación asincrónica. Si el estado de la conexión está en espera, muestra un indicador de carga CircularProgressIndicator; si ocurre un error, muestra el mensaje de error; de lo contrario, muestra el resultado de la operación asíncrona.

Cabe señalar que FutureBuilder solo realizará operaciones asíncronas en la primera compilación. Si necesita reconstruir la interfaz de usuario después de completar la operación asincrónica, debe usar el método setState() para activar la reconstrucción de la interfaz de usuario.

Si la operación asincrónica necesita pasar parámetros, puede usar el paso de parámetros futuros de FutureBuilder. Si necesita actualizar el estado de StatefulWidget después de completar la operación asíncrona, puede usar el método setState() en la función de devolución de llamada del generador para actualizar el estado.

Resumir

FutureBuilder es un widget muy útil en Flutter que puede ayudarnos a manejar operaciones asincrónicas y crear interfaces de usuario basadas en su estado. Al usar FutureBuilder, debe prestar atención al estado de la operación asincrónica, devolver diferentes Widgets y usar el método setState() para reconstruir la interfaz de usuario cuando sea necesario.