6.7. Widgets en Flutter: solicitudes HTTP

Los widgets en Flutter son la base fundamental para crear cualquier aplicación utilizando esta tecnología. Son los elementos básicos de construcción de la interfaz de usuario en una aplicación Flutter. Un widget puede definir un elemento estructural como un botón o un menú, un aspecto estilístico como una fuente o un color, o incluso un diseño como el relleno o la alineación.

Además, es importante señalar que en Flutter, casi todo es un widget. Esto incluye no solo elementos visuales, sino también elementos como acciones (como navegación) y atributos (como márgenes, relleno y alineación).

Uno de los aspectos más importantes del desarrollo de aplicaciones es la capacidad de interactuar con las API web y realizar solicitudes HTTP. Esto permite que su aplicación acceda y manipule datos de una variedad de fuentes web. En Flutter, esto se logra usando la biblioteca http.

Solicitudes HTTP en Flutter

Para realizar solicitudes HTTP en Flutter, debes agregar la dependencia http en el archivo pubspec.yaml. La biblioteca http proporciona la forma más sencilla de recuperar datos de la web.

dependencias:
  aleteo:
    SDK: aleteo

  http: ^0.13.3

Una vez que haya agregado la dependencia, puede importarla a su archivo Dart.

importar 'paquete:http/http.dart' como http;

Ahora puede utilizar la biblioteca http para realizar solicitudes HTTP. La función get() de la biblioteca http se utiliza para realizar una solicitud GET. Debes pasar la URL como parámetro a la función get().

respuesta var = esperar http.get('https://api.example.com/data');

La respuesta de la solicitud HTTP se almacena en la variable de respuesta. Puede utilizar la propiedad del cuerpo de la variable de respuesta para obtener el cuerpo de la respuesta.

print('Cuerpo de la respuesta: ${respuesta.body}');

Además, puede comprobar el estado de la respuesta utilizando la propiedad statusCode de la variable de respuesta.

if (respuesta.statusCode == 200) {
  print('Solicitud exitosa');
} demás {
  print('La solicitud falló con el estado: ${response.statusCode}.');
}

Usar widgets para mostrar datos de una solicitud HTTP

Una vez que haya realizado una solicitud HTTP y haya obtenido los datos, puede usar widgets para mostrar esos datos en la interfaz de usuario de su aplicación. Por ejemplo, puede utilizar un widget ListView para mostrar una lista de datos.

Primero, necesita crear una función que realice la solicitud HTTP y devuelva los datos. Esta función se puede llamar en el método initState() de su widget.

Listar datos;

@anular
estado init vacío() {
  super.initState();
  obtener datos();
}

fetchData() asíncrono {
  respuesta var = esperar http.get('https://api.example.com/data');
  if (respuesta.statusCode == 200) {
    establecerEstado(() {
      datos = json.decode(respuesta.cuerpo);
    });
  }
}

Una vez que obtenga los datos, puede utilizar un widget ListView.builder para mostrar los datos en la interfaz de usuario. ListView.builder requiere dos propiedades: itemCount y itemBuilder. La propiedad itemCount define el número de elementos de la lista y la propiedad itemBuilder crea cada elemento de la lista.

ListView.constructor(
  itemCount: datos.longitud,
  itemBuilder: (contexto, índice) {
    devolver ListTile(
      título: Texto(datos[índice]['título']),
      subtítulo: Texto(datos[índice]['cuerpo']),
    );
  },
)

Con esto, puedes realizar solicitudes HTTP en Flutter y usar widgets para mostrar los datos obtenidos. Este es un aspecto fundamental del desarrollo de aplicaciones y es una habilidad esencial para cualquier desarrollador de Flutter.

Siguiente página del libro electrónico gratuito:

80Widgets en Flutter: persistencia de datos

3 minutos