Leer Datos de un Archivo JSON en Flutter

Leer Datos de un Archivo JSON es muy util para presentarle datos al usuario, usando Flutter es relativamente facil leer un archivo JSON y mostrar los datos en un ListView.

Este articulo es parte de la Guia Maestra para crear aplicaciones en Flutter →

En este articulo vamos a crear un archivo JSON, agregar el archivo a nuestro proyecto en Flutter y despues leer el archivo JSON y mostrarlos datos leidos en un ListView.

Archivo pubspec.yaml

Lo primero que vamos a hacer es modificar el archivo pubspec.yaml para agregar nuestro archivo data.json.

El archivo data.json lo vamos a crear y lo vamos a agregar en la carpeta assets, despues agrearemos la ruta en el archivo pubspec.yaml de la siguiente manera.

flutter:
  uses-material-design: true
  assets:
    - assets/data.json

Y listo, asi Flutter va a reconocer el archivo data.json por que si no lo hacemos entonces flutter no va a leer nuestro archivo y nos va a ocasionar error.

Archivo data.json

El archivo data.json debe esta en la carpeta assets y debe tener la siguiente estructura y el formato para este ejemplo:

{
    "items": [
      {
        "id": "p1",
        "name": "Item 1",
        "description": "Description 1"
      },
      {
        "id": "p2",
        "name": "Item 2",
        "description": "Description 2"
      },
      {
        "id": "p3",
        "name": "Item 3",
        "description": "Description 3"
      }
    ]
  }

Siguiendo la estructura del archivo ustedes pueden agregar mas “items”, se puede ver que los items tienen 3 parametros id, name, description, estos son los datos que vamos a mostrar en cada elemento de el ListView.

Archivo main.dart

El archivo main.dart como ya saben contiene el codigo principal de la aplicacion.

El siguiente es el codigo que vamos a usar, le agregue comentarios a cada seccion para que sea mas entendible.

import 'dart:convert';

import 'package:flutter/material.dart';
//import 'dart:convert';
import 'package:flutter/services.dart';

void main() {
  runApp(const MainApp());
}
/* Clase principal que llama a la clase HomePage */
class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: const HomePage()
    );
  }
}

/* La clase HomePage llama a la clase HomePageState que esta es representaciones de los estados */
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => HomePageState();
}
/* La clase HomePageState es nuestra clase que se va a mostrar*/
/* Cuando la clase HomePageState cambie esta le notificara los cambios a la clase HomePage */
class HomePageState extends State<HomePage> {
  List items = [];
  /* Esta es la funcion para leer el archivo data.json 
  * La lista "items" se va a llenar con los elementos "items" de  el archivo data.json  
  */
  Future<void> readJson() async{
    final String response = await rootBundle.loadString("assets/data.json");
    final data = await json.decode(response);

    setState((){
      items = data["items"]; 
    });

  } 
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Leer JSON"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
          ElevatedButton(
            onPressed: readJson,
            child: const Text("Cargar...")
          ),
          items.isNotEmpty?
          Expanded(
            child: ListView.builder( // En este builder vamos a recorrer cada uno de los elementos de la List "items" que ya estan cargados del archivo data.json
              itemCount: items.length,
              itemBuilder: (context, index){
                return Card(
                  key: ValueKey(items[index]["id"]),
                  margin: const EdgeInsets.all(10),
                  color: Colors.amber.shade100,
                  child: ListTile(
                    leading: Text(items[index]["id"]), // Asignamos el parametro ID del elemento
                    title: Text(items[index]["name"]), // Asignamos el parametro NAME del elemento
                    subtitle: Text(items[index]["description"]), // Asignamos el parametro DESCRIPTION del elemento
                  )
                );
              },
            )
          ) : Container()

          ]
        )
      )
    );

  }

}

Resultado

El resuldato al ejecutar la aplicacion es el siguiente.

Saludos Roboticos!