Flutter – Widget de FutureBuilder

En Flutter, el widget FutureBuilder se usa para crear widgets según sea necesario. FutureBuilder es un widget que lo ayudará a ejecutar alguna función asincrónica y, según el resultado de esa función, su interfaz de usuario se actualizará.

FutureBuilder es Stateful por naturaleza, es decir, mantiene su propio estado como lo hacemos nosotros en StatefulWidgets .

Sintaxis :

FutureBuilder(
  Key key,
  this.future,
  this.initialData,
  @required this.builder,
)
And, builder should not be null.

Cuando usamos el widget FutureBuilder , debemos verificar el estado futuro, es decir, el futuro está resuelto o no, y así sucesivamente. Hay varios estados de la siguiente manera:

1. ConnectionState.none : significa que el futuro es nulo y initialData se usa como valor predeterminado .
2. ConnectionState.active : Significa que el futuro no es nulo pero aún no está resuelto.
3. ConnectionState.waiting : significa que el futuro se está resolviendo y obtendremos el resultado lo suficientemente pronto.
4. ConnectionState.done : Significa que el futuro se ha resuelto.

Crearemos el widget FutureBuilder paso a paso.

Paso 1 : Crea un futuro que necesita ser resuelto.

/// Function that will return a
/// "string" after some time
/// To demonstrate network call
/// delay of [2 seconds] is used
///
/// This function will behave as an
/// asynchronous function
Future<String> getData() {
  return Future.delayed(Duration(seconds: 2), () {
    return "I am data";
    // throw Exception("Custom Error");
  });
}

El fragmento anterior es para demostrar una llamada de red real. Hemos utilizado un retraso de 2 segundos.

Paso 2 : Cree un widget de FutureBuilder y administre el estado de espera.

FutureBuilder(
  builder: (ctx, snapshot) {
    ... some code here
       
    // Displaying LoadingSpinner to indicate waiting state
    return Center(
      child: CircularProgressIndicator(),
    );
  },
   
  // Future that needs to be resolved
  // inorder to display something on the Canvas
  future: getData(),
),

En este fragmento, podemos ver que estamos devolviendo un LoadingSpinner. Solo se mostrará cuando el futuro esté en estado de espera .

Paso 3 : Administrar el estado Finalizado futuro , es decir, cuando se resuelva el futuro. Este paso también requiere verificar cualquier error que pueda ocurrir durante una llamada de red.

FutureBuilder(
  builder: (ctx, snapshot) {
    // Checking if future is resolved
    if (snapshot.connectionState == ConnectionState.done) {
      // If we got an error
      if (snapshot.hasError) {
        return Center(
          child: Text(
            '${snapshot.error} occurred',
            style: TextStyle(fontSize: 18),
          ),
        );
         
        // if we got our data
      } else if (snapshot.hasData) {
        // Extracting data from snapshot object
        final data = snapshot.data as String;
        return Center(
          child: Text(
            '$data',
            style: TextStyle(fontSize: 18),
          ),
        );
      }
    }
     
    ... some code here
      ),

En el fragmento anterior, puede ver que estamos comprobando

snapshot.hasError
This step is require because it could be possible that future is resolved but an error has occurred.

también estamos revisando

snapshot.hasData
This step is required because it may be possible that future is resolved but nothing is returned
due to some reasons, so always perform these checks otherwise you may get unexpected behaviour.

Código fuente completo: 
 

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GeeksforGeeks',
 
      // to hide debug banner
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
 
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () => Navigator.push(
              context,
              MaterialPageRoute(
                builder: (ctx) => FutureDemoPage(),
              ),
            ),
            child: Text('Demonstrate FutureBuilder'),
          ),
        ),
      ),
    );
  }
}
 
class FutureDemoPage extends StatelessWidget {
  /// Function that will return a
  /// "string" after some time
  /// To demonstrate network call
  /// delay of [2 seconds] is used
  ///
  /// This function will behave as an
  /// asynchronous function
  Future<String> getData() {
    return Future.delayed(Duration(seconds: 2), () {
      return "I am data";
      // throw Exception("Custom Error");
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Future Demo Page'),
        ),
        body: FutureBuilder(
          builder: (ctx, snapshot) {
            // Checking if future is resolved or not
            if (snapshot.connectionState == ConnectionState.done) {
              // If we got an error
              if (snapshot.hasError) {
                return Center(
                  child: Text(
                    '${snapshot.error} occurred',
                    style: TextStyle(fontSize: 18),
                  ),
                );
 
                // if we got our data
              } else if (snapshot.hasData) {
                // Extracting data from snapshot object
                final data = snapshot.data as String;
                return Center(
                  child: Text(
                    '$data',
                    style: TextStyle(fontSize: 18),
                  ),
                );
              }
            }
 
            // Displaying LoadingSpinner to indicate waiting state
            return Center(
              child: CircularProgressIndicator(),
            );
          },
 
          // Future that needs to be resolved
          // inorder to display something on the Canvas
          future: getData(),
        ),
      ),
    );
  }
}

Salida :