import 'dart:convert';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

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

class HomePage extends StatefulWidget {

const HomePage ({Key? key}): super (key: key);
@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Carga JSON- Abel Ramírez"),
centerTitle: true,
),
body: Container(
child: FutureBuilder(
future:
DefaultAssetBundle.of(context).loadString("assets/heroes.json"),
builder: (BuildContext context, snapshot){
var jsonData = json.decode(snapshot.data.toString());
//json.decode(snapshot.data.toString());
return ListView.builder(itemBuilder: (BuildContext context,
int index){
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
CustomList(
profile: CircleAvatar(backgroundImage: NetworkImage
(jsonData[index]['profile'])),
nombre: "Nombre: ${jsonData[index]["nombre"]}",
edad: "Edad: ${jsonData[index]["edad"]}",
altura: "Altura: ${jsonData[index]["altura"]}",
genero: "Genero: ${jsonData[index]["genero"]}",
)
],
),
 );
},
itemCount: jsonData == null? 0: jsonData.length,
);
},
),
),
);
}
}

class heroDescrption extends StatelessWidget {

const heroDescrption({Key? key, this.nombre, this.edad, this.altura,
this.genero});
final String? nombre;
final String? edad;
final String? altura;
final String? genero;
@override
Widget build (BuildContext context){
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Column(
children:<Widget> [
Text(
nombre!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold
),
),
const Padding(padding: EdgeInsets.only(bottom: 2.0)),
Text(
genero!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold
),
),
const Padding(padding: EdgeInsets.only(bottom: 2.0)),
],
)

),
Expanded(
flex: 1,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
edad!,
 maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold
),
),
const Padding(padding: EdgeInsets.only(bottom: 2.0)),
Text(
altura!,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontWeight: FontWeight.bold
),
),
const Padding(padding: EdgeInsets.only(bottom: 2.0)),
],
),
)
],
);
}
}
class CustomList extends StatelessWidget {
const CustomList({Key? key, this.nombre, this.edad, this.altura,
this.genero, this.profile}) : super(key: key);
final String? nombre;
final String? edad;
final String? altura;
final String? genero;
final Widget? profile;
@override
Widget build(BuildContext context) {
return Padding(padding: const EdgeInsets.symmetric(vertical: 10.0),
child: SizedBox (
height: 40,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
AspectRatio(aspectRatio: 1,
child: profile,
),
Expanded(child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 2.0, 0.0),
child: heroDescrption(
nombre: nombre,
edad: edad,
altura: altura,
genero: genero,
),
),
),
],
),
),
);
}
}
Widget circleavatar (String url){
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(url),
),
);
}