Leer o parsear Json con Flutter

Json es un medio o formato para transportar datos de manera universal entre aplicaciones, ya sea una app con un servidor y viceversa, pues Flutter lo hace muy sencillo, si tan sencillo que no necesitamos librerías adicionales o mejor dicho librerias de terceros o externos.

* Recibir Json con Future con el SDK de Flutter

Para ello preparamos nuestro archivo PHP en el servidor web con la estructura que deseamos enviar a la aplicación desarrollada en Flutter. Debemos tener en cuenta algunos aspectos importantes como:

• Todo lo que se envia se transformará en formato JSON.
• Se puede enviar valores numéricos, decimales, booleanos, cadenas, en estructuras JSON cíclicas  con valores pares o no pares, esto depende de la estructura que requiere tu app.
• Se puede enviar valores unitarios

Entendido esto, vamos a codear algunos ejemplos en cuanto a parsear datos en el servidor codificando cualquier estructura en JSON con PHP y recibirlos en la App Flutter donde tenemos que decodificar el JSON y transformarlo en la estructura que necesitemos usando el lenguaje de programación Dart.

Anter creamos nuestro archivo index.php en nuestro servidor el cual se mostrará asi:

<?php

?>

Un archivo vacio.

Ahora creamos nuestro proyecto en Flutter configurandolo e implementandolo de la siguiente manera:

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Recibir JSON',
      home: Pagina()
    );
  }
}
class Pagina extends StatefulWidget {
  @override
  _PaginaState createState() => _PaginaState();
}



class _PaginaState extends State<Pagina> {
  

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
    );
  }
}

Si se fijan bien pues estamos usando el import http el cual debemos importalo de las dependencias de Flutter exactamente del sitio web pub.dev de Dart, el proceso de importar tiene unos pasos que deben seguir a cabalidad para que la aplicación pueda funcionar correctamente.

Ahora si, vamos a ver algunos casos con base en los archivos creados anteriormente entonces:

CASO 1: ¿Cómo recibir un solo valor String, Boolean o Integer con Flutter?

Veamos el código del Servidor en PHP index.php.  el cual recibirá una petición y responderá con un valor que le indiquemos en este caso un String, este puede ser cambiado por el que necesitemos enviar, luego lo encodeamos en JSON y lo mostramos con die()

<?php
$mensaje = "Hola... vamos a codear en Dart";
die(json_encode($mensaje));  

Ahora en la aplicación Flutter implementamos las funciones necesarias para recibir el valor único

• Preparamos una variable que recibirá la cadena o string
• Creamos una función recibirString usamos async 
• Un dato importante es que deben identificar la IP de su PC o Mac en mi caso estoy usando MAMP por ello le agrego :8888 y el directorio del archivo PHP.
• Demás esta decir que debemos llamar a la función recibirString en iniState para que cargue su lógica.
• Dependiendo de la respuesta en 200 debemos usar setState para que se actualice la variable _mensaje y se muestre en el Widget Text.

String _mensaje="";
class _PaginaState extends State<Pagina> {
  Future<String> recibirString() async {
    final respuesta = await http.get("http://tu-ip-o-dominio:8888/codigos/php/");
    if(respuesta.statusCode==200){
      log( respuesta.body.toString());
      setState(() {
        _mensaje = respuesta.body.toString();
      });
    }else{
      throw Exception("Fallo");
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    recibirString();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Recibiendo String"),
              Center(child: Text(_mensaje),)
            ],

        ),
      ),
    );
  }
}

CASO 2: ¿Cómo recibir valores pares de cualquier tipo String, Boolean o Integer con Flutter?

PHP

<?php
$pares = [
    "producto"  =>  "Paquete de Galleta",
    "cantidad"  =>  1,
    "precio"    =>  20.5,
    "success"   =>  true
];
die(json_encode($pares)); 

DART

String _producto;
int _cantidad;
double _precio;
bool _success;

class _PaginaState extends State<Pagina> {
  Future<String> recibirString() async {
    final respuesta = await http.get("http://tu-ip-o-dominio:8888/codigos/php/");
    if(respuesta.statusCode==200){

      log( respuesta.body.toString());
      setState(() {
        var parsedJson = json.decode(respuesta.body);
        _producto = parsedJson["producto"];
        _cantidad = parsedJson["cantidad"];
        _precio = parsedJson["precio"];
        _success = parsedJson["success"];
      });
    }else{
      throw Exception("Fallo");
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    recibirString();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Recibiendo Valores Pares"),
              Text(_producto),
              Text(_precio.toString()),
              Text(_cantidad.toString()),
              Text(_success.toString())
            ],

        ),
      ),
    );
  }
}

CASO 3: ¿Cómo recibir estructuras más complejas como listas u objetos en Flutter?

En ésta primera parte solo realizaremos la configuración y mostraremos parte del código que emplearemos para este tutorial.

Veamos el código en PHP

<?php  
//estructura que puede ser generada por una consulta Mysql simple
$producto = [
    "id"        =>  1,
    "nombre"    =>  "Paquete de Galleta",
    "stock"     =>  1,
    "precio"    =>  20.5,
    "estado"    =>  true
];
die(json_encode($producto));

Veamos el código en Flutter  con el lenguaje Dart para un objeto o clase :

class Item{
  final int id;
  final String nombre;
  final int stock;
  final double precio;
  final bool estado;

  Item({this.id, this.nombre, this.stock,this.precio,this.estado});
}
Item item;
class _PaginaState extends State<Pagina> {
  Future<Item> recibirObjeto() async {
    final respuesta = await http.get("http://tu-ip-o-dominio:8888/codigos/php/");
    if(respuesta.statusCode==200){

      log( respuesta.body.toString());
      setState(() {
        var parsedJson = json.decode(respuesta.body);
        item = new Item(
            id:parsedJson["id"],
            nombre: parsedJson["nombre"],
            stock: parsedJson["stock"],
            precio: parsedJson["precio"],
            estado: parsedJson["estado"]
        );
      });
    }else{
      throw Exception("Fallo");
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    recibirObjeto();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              item.toString().length == null ?
                  Text("null")
                  :
                  Text(item.nombre),
                  Text(item.stock.toString()),
                  Text(item.precio.toString())

            ],

        ),
      ),
    );
  }
}

CASO 4: Recibir en una lista el JSON 

Archivo PHP 

<?php  
//estructura que puede ser generada por una consulta Mysql simple
$listaproducto = [
    "mensaje"        =>  "Envio de lista de productos",
    "success"        =>   true,
    "listaProductos" => [
        ["id"        =>  1,
        "nombre"    =>  "Paquete de Galleta",
        "stock"     =>  1,
        "precio"    =>  20.5,
        "estado"    =>  true],

        ["id"        =>  2,
        "nombre"    =>  "Paquete de Caramelos",
        "stock"     =>  10,
        "precio"    =>  23.5,
        "estado"    =>  true],

        ["id"        =>  3,
        "nombre"    =>  "Paquete de Chocolates",
        "stock"     =>  100,
        "precio"    =>  10.5,
        "estado"    =>  true]
    ]
    
];
die(json_encode($listaproducto)); 

Archivo Flutter para recibir el JSon en una Lista de Objectos

class Item{
  final int id;
  final String nombre;
  final int stock;
  final double precio;
  final bool estado;

  Item({this.id, this.nombre, this.stock,this.precio,this.estado});

  factory Item.fromJson(Map<String, dynamic> json){
    return Item(
      id:json['id'],
      nombre:json['nombre'],
      stock:json['stock'],
      precio:json['precio'],
      estado:json['estado'],
    );
  }
}

class _PaginaState extends State<Pagina> {
  List listaItems = [];
  Future recibirObjeto() async {
    final respuesta = await http.get("http://tu-ip-o-dominio/codigos/php/");
    if(respuesta.statusCode==200){
      setState(() {
        var parsedJson = json.decode(respuesta.body);
        if(parsedJson["success"]) {
          for (final item in parsedJson["listaProductos"])
            listaItems.add(new Item.fromJson(item));
        }
        else
          print("Suceso : false");
      });
    }else{
      throw Exception("Fallo");
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    recibirObjeto();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: listaItems.length,
            itemBuilder: (context,index){
            final item = listaItems[index];
            return Card(
              child: Column(
                children: <Widget>[
                  Text(item.id.toString(),style: TextStyle(fontSize: 20),),
                  Text(item.nombre),
                  Text(item.precio.toString()),
                  Text(item.stock.toString())
                ],
              ),
            );
            })

      ),
    );
  }
}

import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;


Future<Persona> fetchPost() async{
  final response = await http.get("http://102.168.93.96/codigos/json/");
  if(response.statusCode == 200){
    return Persona.fromJson(json.decode(response.body));
  }else{
    throw Exception('Fallo');
  }
}
class Persona{
  final int id;
  final String nombre;
  final int edad;

  Persona({this.id, this.nombre, this.edad});
  factory Persona.fromJson(Map<String, dynamic> json){
    return Persona(
    id:json['id'],
    nombre:json['nombre'],
    edad:json['edad'],
    );
}

}

Debemos integrar la depencia http en nuestro archivo pubspec.yaml agregando la siguient linea : http: ^0.12.0+1; la cual debe verse asi:

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

Luego presionar en Package get para que se cargue esta librería en nuestra aplicación. Ademas de ello debemos darle run para poder integrar correctamente el import cuando estemos en nuestrso archivo main.dart.

Con vemos tenemos gestionamos la conexión a la url  con el componente Future

y Además declaramos la clase que gestionará los datos que se van a recibir de archivo JSON.

En la segunda parte veremos como mostrar los datos JSON en pantalla.

Leido 13073 veces