Cómo utilizar solicitudes HTTP en Flutter

Introducción

Las aplicaciones con frecuencia necesitan realizar solicitudes HTTP POSTy GETotras solicitudes.

Flutter proporciona un httppaquete que admite la realización de solicitudes HTTP.

En este artículo, creará una aplicación Flutter de ejemplo que usa el httppaquete para realizar solicitudes HTTP para mostrar información de marcador de posición.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v1.22.2, Android SDK v30.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Para continuar con la configuración, creará una aplicación Flutter de ejemplo.

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create flutter_http_example

Navegue hasta el nuevo directorio del proyecto:

cd flutter_http_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Ábrelo pubspec.yamlen tu editor de código y agrega el siguiente complemento:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  http: ^0.12.0+2

Este es un complemento oficial de Flutter publicado por dart.dev y tiene un puntaje de salud del 100 % , por lo tanto, puede confiar en la confiabilidad de este complemento.

Paso 2: Gestión de GETsolicitudes

Su primera tarea será crear una clase que pueda usar para interactuar con la API.

Abra el editor de código y cree un http_service.dartarchivo en el libdirectorio. Aquí desarrollará una nueva HttpServiceclase y agregará una getPostsfunción:

lib/http_service.dart

import 'dart:convert';import 'package:http/http.dart';import 'post_model.dart';class HttpService {  final String postsURL = "https://jsonplaceholder.typicode.com/posts";  FutureListPost getPosts() async {    Response res = await get(postsURL);    if (res.statusCode == 200) {      Listdynamic body = jsonDecode(res.body);      ListPost posts = body        .map(          (dynamic item) = Post.fromJson(item),        )        .toList();      return posts;    } else {      throw "Unable to retrieve posts.";    }  }}

En este ejemplo, se conectará a JSON Placeholder. Este código utiliza el httppaquete geten la postsURLcadena.

Si la solicitud se realizó correctamente, este código devolverá un ListPostusing Post.fromJson. De lo contrario, se generará un mensaje de error.

Nota: Los códigos de estado HTTP se utilizan para determinar si una solicitud se realizó correctamente o no. Un código de estado 200representa una solicitud HTTP exitosa.

Luego, usa tu editor de código para crear un post_model.dartarchivo en el libdirectorio. Aquí, desarrollarás una nueva Postclase:

lib/post_model.dart

import 'package:flutter/foundation.dart';class Post {  final int userId;  final int id;  final String title;  final String body;  Post({    @required this.userId,    @required this.id,    @required this.title,    @required this.body,  });  factory Post.fromJson(MapString, dynamic json) {    return Post(      userId: json['userId'] as int,      id: json['id'] as int,      title: json['title'] as String,      body: json['body'] as String,    );  }}

Para serializar la respuesta de JSON Placeholder, este código devolverá un nuevo Postcon el fromJsonmétodo basado en un JSON Map.

Nota: En una aplicación de producción, json_serializablese podría usar un paquete como para manejar la serialización automáticamente.

Un Postmarcador de posición JSON devuelto constará de un userId, id, titley body.

Paso 3 — VisualizaciónPosts

A continuación, utilice su editor de código para crear un posts.dartarchivo en el libdirectorio. Aquí, creará una PostsPageclase que mostrará los Postsvalores que se devuelven de la solicitud HTTP al marcador de posición JSON:

lib/posts.dart

import 'package:flutter/material.dart';import 'http_service.dart';import 'post_model.dart';class PostsPage extends StatelessWidget {  final HttpService httpService = HttpService();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Posts"),      ),      body: FutureBuilder(        future: httpService.getPosts(),        builder: (BuildContext context, AsyncSnapshotListPost snapshot) {          if (snapshot.hasData) {            ListPost posts = snapshot.data;            return ListView(              children: posts                  .map(                    (Post post) = ListTile(                      title: Text(post.title),                      subtitle: Text("${post.userId}"),                    ),                  )                  .toList(),            );          } else {            return Center(child: CircularProgressIndicator());          }        },      ),    );  }}

Este código utiliza el FutureBuilderwidget para interactuar con la getPosts()función. Esto permite que el código determine cuándo ListPostestá listo y actúe en consecuencia.

Si snapshot.hasDataes false, se CircularProgressIndicatormuestra . De lo contrario, ListTilese muestra con información de la publicación.

Para poder observar lo que tienes hasta ahora, necesitarás reemplazar el código en main.dart.

Ábrelo lib/main.darten tu editor de código y modifícalo para usar PostsPage:

lib/main.dart

import 'package:flutter/material.dart';import 'posts.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'HTTP',      debugShowCheckedModeBanner: false,      theme: ThemeData(        primarySwatch: Colors.blue,        visualDensity: VisualDensity.adaptivePlatformDensity,      ),      home: PostsPage(),    );  }}

Compila tu código y ejecútalo en un emulador:

Debes observar una lista de títulos de publicaciones e identificaciones de usuarios devueltos por JSON Placeholder.

Nota: Los títulos serán extractos de Lorem Ipsum , que se utiliza frecuentemente como texto de marcador de posición.

El siguiente paso es crear una página de detalles con más información sobre la publicación cuando un usuario hace clic en el título de la publicación.

Paso 4 — VisualizaciónPostDetail

Si el usuario toca la publicación, tu aplicación debería llevar al usuario a una PostDetailpágina.

Utilice su editor de código para crear un post_detail.dartarchivo en el libdirectorio. Aquí, creará una PostDetailclase que mostrará un individuo Post:

lib/post_detail.dart

import 'package:flutter/material.dart';import 'post_model.dart';class PostDetail extends StatelessWidget {  final Post post;  PostDetail({@required this.post});  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(post.title),      ),      body: SingleChildScrollView(        child: Padding(          padding: const EdgeInsets.all(12.0),          child: Column(            children: Widget[              Card(                child: Column(                  crossAxisAlignment: CrossAxisAlignment.center,                  children: Widget[                    ListTile(                      title: Text("Title"),                      subtitle: Text(post.title),                    ),                    ListTile(                      title: Text("ID"),                      subtitle: Text("${post.id}"),                    ),                    ListTile(                      title: Text("Body"),                      subtitle: Text(post.body),                    ),                    ListTile(                      title: Text("User ID"),                      subtitle: Text("${post.userId}"),                    ),                  ],                ),              ),            ],          ),        ),      )    );  }}

Este código mostrará title, id, body, y userId.

Para poder observar lo que tienes hasta ahora, necesitarás modificar posts.dartpara admitir post_detail.dart:

lib/posts.dart

import 'package:flutter/material.dart';import 'http_service.dart';import 'post_detail.dart';import 'post_model.dart';class PostsPage extends StatelessWidget {  final HttpService httpService = HttpService();  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("Posts"),      ),      body: FutureBuilder(        future: httpService.getPosts(),        builder: (BuildContext context, AsyncSnapshotListPost snapshot) {          if (snapshot.hasData) {            ListPost posts = snapshot.data;            return ListView(              children: posts                  .map(                    (Post post) = ListTile(                      title: Text(post.title),                      subtitle: Text("${post.userId}"),                      onTap: () = Navigator.of(context).push(                        MaterialPageRoute(                          builder: (context) = PostDetail(                            post: post,                          ),                        ),                      ),                    ),                  )                  .toList(),            );          } else {            return Center(child: CircularProgressIndicator());          }        },      ),    );  }}

Compila tu código y ejecútalo en un emulador:

El siguiente paso es agregar la posibilidad de eliminar una publicación eliminándola.

Paso 5: Gestión de DELETEsolicitudes

Otro ejemplo de una solicitud HTTP es el uso del DELETEmétodo.

Vuelva http_service.darta visitar su editor de código y cree un deletePost(int id)método:

lib/http_service.dart

import 'dart:convert';import 'package:http/http.dart';import 'post_model.dart';class HttpService {  final String postsURL = "https://jsonplaceholder.typicode.com/posts";  // ...  Futurevoid deletePost(int id) async {    Response res = await delete("$postsURL/$id");    if (res.statusCode == 200) {      print("DELETED");    } else {      throw "Unable to delete post.";    }  }}

Vuelve a visitar post_detail.dartel editor de código y agrega un IconButtona la actionsmatriz dentro de AppBar. Cuando se presiona el ícono, se debe eliminar la publicación asociada:

lib/post_detail.dart

import 'package:flutter/material.dart';import 'http_service.dart';import 'post_model.dart';class PostDetail extends StatelessWidget {  final HttpService httpService = HttpService();  final Post post;  PostDetail({@required this.post});  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(post.title),        actions: Widget[          IconButton(            icon: Icon(Icons.delete),            onPressed: () async {              await httpService.deletePost(post.id);              Navigator.of(context).pop();            },          )        ],      ),      // ...    );  }}

Compila tu código y ejecútalo en un emulador.

Cuando visites la página de detalles de una publicación, verás un botón con el ícono Eliminar en la barra de aplicaciones. Al presionar el botón, se imprimirá un mensaje en la consola:

Outputflutter: DELETED

Esto representará una solicitud de eliminación. Debido a las limitaciones de JSON Placeholder y de esta aplicación de ejemplo, la publicación no se eliminará.

Conclusión

En este artículo, aprendiste a interactuar con el httppaquete Flutter. Esto te permitió ver GETuna lista de publicaciones y DELETEuna publicación individual.

También están disponibles operaciones similares como post, put, patch, etc. Consulta la documentación oficial para obtener más información.