Mucho del trabajo de un programador es crear y consumir servicios, en este caso tenemos que consumir un API Rest en Flutter con Dart para obtener una lista de productos a mostrar en nuestra app store, veamos cómo podemos hacerlo.

Tanto en desarrollo de software, web y móvil una tarea cotidiana es consumir apis.

Es muy común tener servicios web que conectan con base de datos y conectar a ellos para obtener la información.

En el caso de desarrollo de apps es muy común consumir servicios web para obtener o modificar información.

En mi caso estamos creando una app con Dart en Flutter, esta app es una tienda de productos y para lo que nos conectaremos a una api rest es para obtenerlos en tiempo real.

Tomando en cuenta que tenemos un servicio web que nos regresa un json con información de productos como este:

consumir un api rest en flutter - 1

Vamos a proceder a ver cómo consumir un api rest en Flutter con Dart.

Lo primero es crear una clase con la estructura de la información que vamos a consumir:

class Product {
  final String image, title, description;
  final int price, size, id;
  final Color color;

  Product({
    this.id,
    this.image,
    this.title,
    this.price,
    this.description,
    this.size,
    this.color,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
        id: json['idproduct'],
        title: json['title'],
        description: json['description'],
        price: json['price'],
        image: json['image'],
        size: int.parse(json['size']),
        color: Color(int.parse(json['color'])));
  }
}

Ahora necesitamos crear una lista de productos.

List<Product> products = [];

Te puede interesar, Hola mundo con Flutter y VSCode.

Para despues hacer lo más importante de este articulo, consumir el api rest mediante la siguiente funcion asincrona:

Future<List<Product>> getProducts() async {
  var url = Uri.parse('..../get_products.php');

  var response = await http.post(url).timeout(Duration(seconds: 10));

  var data = jsonDecode(response.body);

  var records = List<Product>();

  for (data in data) {
    records.add(Product.fromJson(data));
  }

  return records;
}

Asegurate de incluir los import necesarios:

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

Por último ahora en nuestro StatefulWidget en el estado de nuestro componente vamos a indicar que hacer al finalizar:

void initState() {
    super.initState();
    getProducts().then((value) {
      setState(() {
        products = value;
      });
    });
  }

Igualamos una variable de products al valor resultante de la funcion getProducts.

En mi caso genero un GridView con la información de estos productos:

Expanded(
            child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: kDefaultPadding),
          child: GridView.builder(
              itemCount: products.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  mainAxisSpacing: kDefaultPadding,
                  crossAxisSpacing: kDefaultPadding,
                  childAspectRatio: 0.75),
              itemBuilder: (context, index) => ItemCard(
                  product: products[index],
                  press: () => Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) =>
                              DetailsScreen(product: products[index]))))),
        )

Sino sabes cómo funciona aquí puedes ver más sobre un GridView Builder.

Ahora nos toca agregar un indicador de carga para mostrar al usuario en lo que se recibe respuesta, ¿Se te ocurre cómo hacerlo? Cuentanoslo en los comentarios.

Si esta información sobre cómo consumir un API Rest en Flutter con Dart te ha sido de utilidad no olvides compartirla en tus redes sociales favoritas y dejarnos un comentario en la sección de abajo si tienes cualquier duda con respecto a este tema, será un placer ayudarte.

¡Hasta luego!

Clic para valorar esta información

[Total: 3 Promedio: 3.7]

Consumir un API Rest en Flutter con Dart

jonathan__melgoza