UNIVERSIDAD DIGITAL DEL ESTADO DE HIDALGO

Programación de Dispositivos Móviles.

Actividad AI8: Mapeo de un JSON a componentes visuales.

Alumno: Rodolfo Piñera Blanco. Matricula: 21300139
Carrera: Ingeniería de Software.
Tutor: Jorge Alberto Hernández Tapia.
Mediador: Patricia Sánchez López.
Fecha: 29 de octubre de 2023

1
Contenido
Introducción ................................................................................................................................................. 3
Ejecución del Programa................................................................................................................................ 3
Código Fuente............................................................................................................................................... 3
Captura de Pantalla ...................................................................................................................................... 4

2
Introducción
En el presente documento se muestra un programa en Android Studio utilizando el plugin de Flutter,
este programa realiza el uso de la carga de datos de un archivo JSON.

Ejecución del Programa.

La ejecución del programa se muestra en el siguiente video.

https://drive.google.com/file/d/1sSmX2k1R6z05cOtqhXqI95FgQzFvhZSj/view?usp=sharing

Código Fuente
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'dart:async';
import 'dart:convert';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
);
}
}

class HomePage extends StatefulWidget {

@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Super Heroes List"),
centerTitle: true,
),
body: Container(
child: new FutureBuilder(future:
DefaultAssetBundle.of(context).loadString(
"json_assets/SuperHeroes.json"),

3
 builder: (context, snapshot){
var jsonData = json.decode(snapshot.data.toString());
return new ListView.builder(itemBuilder: (BuildContext context,
int index){
return new Card(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
//Text("Imagen:" + jsonData[index]["imagen"]),
Image(image:
AssetImage("img_assets/"+jsonData[index]["imagen"])),
Text("Nombre:" + jsonData[index]["nombre"]),
Text("Identidad:" + jsonData[index]["identidad"]),
Text("Habilidades:" + jsonData[index]["descripcion"]),
],
),
);
},
itemCount: jsonData == null ? 0 : jsonData.length,
);
},
),
),
);
}
}

Captura de Pantalla

4
Referencias.
Tapia, J. A. (29 de octubre de 2023). youtube. Obtenido de JSON y Serealizacion:
https://www.youtube.com/watch?v=sSSF-wr4WtY