Implementando la API Rest en Flutter

Además de crear una interfaz de usuario en Flutter , también podemos integrarla con el backend. La mayoría de las aplicaciones usan API para mostrar los datos del usuario. Usaremos el paquete HTTP, que proporciona métodos avanzados para realizar operaciones. La API REST utiliza llamadas http simples para comunicarse con datos JSON porque:

• Utiliza funciones de espera y sincronización.
• Proporciona varios métodos.
• Proporciona clase y http para realizar requests web.

Veamos cómo se usa un archivo JSON para obtener, eliminar y actualizar datos en una aplicación flutter. Crearemos archivos dart separados de Main.dart para facilitar la depuración y el código más limpio en los siguientes pasos.

Paso 1: Configuración del proyecto

Instale la dependencia http y agréguela en el archivo pubspec.yaml para usar la API en la aplicación.

dependencies:
  http:

Paso 2: Creación de una solicitud 

Esta solicitud básica utiliza el método get para obtener los datos de la URL especificada en formato JSON. Cada solicitud devuelve un Future<Response>. Un Future<> se usa para representar un valor o error potencial que estará disponible en algún momento en el futuro, por ejemplo, realizó una solicitud a un servidor ahora, la respuesta tardará menos de unos segundos, esta vez se representa desde Futuro<>. Aquí, usamos la función asíncrona y espera que garantiza que la respuesta sea asíncrona, lo que significa que hasta que obtengamos la respuesta, y a menos que la obtengamos, no avanzará más.

Future<List<Fruit>> fetchFruit() async {
final response = await http.get(url);
}
String url = "Your_URL";

Paso 3: Creando las Clases

Cree una clase de frutas y guárdela como fruit.dart como se muestra a continuación:

class Fruit {
  final int id;
  final String title;
  final String imgUrl;
  final int quantity;
 
  Fruit(
    this.id,
    this.title,
    this.imgUrl,
    this.quantity,
  );
  factory Fruit.fromMap(Map<String, dynamic> json) {
    return Fruit(json['id'], json['title'], json['imgUrl'], json['quantity']);
  }
  factory Fruit.fromJson(Map<String, dynamic> json) {
    return Fruit(json['id'], json['title'], json['imgUrl'], json['quantity']);
  }
}

Paso 4: crear objetos de clase

Crea el FruitItem en fruitItem.dart

import 'package:flutter/material.dart';
import 'fruit.dart';
 
class FruitItem extends StatelessWidget {
  FruitItem({this.item});
 
  final Fruit item;
 
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.all(2),
        height: 140,
        child: Card(
          elevation: 5,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Image.network(
                  this.item.imgUrl,
                  width: 200,
                ),
                Expanded(
                    child: Container(
                        padding: EdgeInsets.all(5),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Text(this.item.title,
                                style: TextStyle(fontWeight: FontWeight.bold)),
                            Text("id:${this.item.id}"),
                            Text("quantity:${this.item.quantity}"),
                          ],
                        )))
              ]),
        ));
  }
}

Paso 5: Crea una Lista de frutas

Cree una clase FruitList en fruitList.dart como se muestra a continuación:

import 'package:flutter/material.dart';
import 'fruit.dart';
import 'fruitItem.dart';
 
class FruitList extends StatelessWidget {
  final List<Fruit> items;
 
  FruitList({Key key, this.items});
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return FruitItem(item: items[index]);
      },
    );
  }
}

Paso 6: Mostrar las respuestas

Muestre la respuesta en la pantalla del archivo main.dart como se muestra a continuación:

import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter/material.dart';
import 'fruit.dart';
import 'fruitItem.dart';
import 'fruitList.dart';
 
class MyHomePage extends StatelessWidget {
  final String title;
  final Future<List<Fruit>> products;
 
  MyHomePage({Key key, this.title, this.products}) : super(key: key);
 
  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF4CAF50),
          title: Text("GeeksForGeeks"),
        ),
        body: Center(
          child: FutureBuilder<List<Fruit>>(
            future: products,
            builder: (context, snapshot) {
              if (snapshot.hasError) print(snapshot.error);
              return snapshot.hasData
                  ? FruitList(items: snapshot.data)
                  : Center(child: CircularProgressIndicator());
            },
          ),
        ));
  }
}

Los siguientes son los datos JSON al ejecutar la aplicación:

A continuación se muestra la pantalla de la interfaz de usuario de la página de inicio de la aplicación Flutter con datos JSON decodificados.

Producción:

Explicación: 

1. Esta declaración se usa para importar el paquete como http .

import 'package:http/http.dart' as http;

2. Esta declaración se usa para convertir los datos JSON.

import 'dart:convert';

3. La siguiente declaración se usa para manejar el código de error. Si el código de estado de respuesta es 200, podemos mostrar los datos solicitados; de lo contrario, podemos mostrar el mensaje de error al usuario. Aquí, puede usar cualquier URL que reciba una solicitud get() y devolver una respuesta en formato JSON.

final response = await http.get('url');
 if (response.statusCode == 200) {
    //display UI} 
    else {
   //Show Error Message
   }
}

4. Las siguientes declaraciones se utilizan para decodificar los datos JSON y mostrar el resultado de una manera fácil de usar. Esto garantiza que solo acepte y extraiga datos JSON según nuestros requisitos.

List<Fruit> decodeFruit(String responseBody) {
 final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();
 return parsed.map<Fruit>((json) => Fruit.fromMap(json)).toList();
}

Ahora Rest API se implementó con éxito en la aplicación flutter. Si necesita actualizar, eliminar o enviar datos en la aplicación Flutter mediante el uso del archivo JSON, siga los pasos que se mencionan a continuación exactamente igual que el paso para crear la solicitud. 

Como necesitamos enviar el noteID a la API, necesitamos actualizar el noteID y agregarlo a la ruta que enviamos a la API usando ‘/$id’ en el método put(), delete() o post() porque necesitamos especificar qué nota estamos actualizando, eliminando o enviando respectivamente. También necesitamos volver a buscar las notas una vez que se actualicen, eliminen o envíen para mostrarlas.

1. Actualización de los datos 

Future<Fruit> updateFruit(String title) async {
  final http.Response response = await http.put(
    'url/$id',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
 
  if (response.statusCode == 200) {
    return Fruit.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to update album.');
  }
}

2. Borrar los datos

Future<Fruit> deleteAlbum(int id) async {
  final http.Response response = await http.delete(
    'url/$id',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
  );
 
  if (response.statusCode == 200) {
    return Fruit.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to delete album.');
  }
}

3. Envío de los datos

Future<Fruit> sendFruit(
  
String title, int id, String imgUrl, int quantity) async {
     final http.Response response = await http.post(
     'url',
    headers: <String, String> {
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String> {
      'title': title,
      'id': id.toString(),
      'imgUrl': imgUrl,
      'quantity': quantity.toString()
    }),
  );
  if (response.statusCode == 201) {
    return Fruit.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}