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.

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!