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.
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!