Pick data from a json in flutter with ListView.buider

Question

I created this file json, I fetch the data like "displayName" and "age", also i want see on screen the data from the sublist workout. How can I do and if possibile put this data in a profile page? this is the Json file i make for my little test db:

[
  {
    "displayName": "mario",
    "age": 27,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Running"
      },
      {
        "nomeworkout": "Brucia Grassi"
      }
    ]
  },
  {
    "displayName": "jessica",
    "age": 28,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Spinning"
      },
      {
        "nomeworkout": "Gambe"
      }
    ]
  },
  {
    "displayName": "Pedro",
    "age": 29,
    "peso": 85,
    "altezza": 175,
    "workout": [
      {
        "nomeworkout": "Potenziamento"
      }
    ]
  }
]

with this page, I created a simple ListView.builder to display the list of items such as "displayName", "age", "weight"; but I didn't understand how to get the data from the internal "workout" list:

import 'dart:convert';
import 'package:fitness_app/trainerPage.dart';
import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List data;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: FutureBuilder(
          future:
              DefaultAssetBundle.of(context).loadString('assets/jsonDb.json'),
          builder: (context, snapshot) {
            var data = JsonDecoder().convert(snapshot.data.toString());
            return ListView.builder(
              itemCount: data == null ? 0 : data.length,
              itemBuilder: (context, index) {
                return InkWell(
                  onTap: () {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => TrainerPage()));
                  },
                  child: Container(
                    padding: EdgeInsets.all(10),
                    child: Row(
                      children: <Widget>[
                        Text(data[index]['displayName']),
                        Text(data[index]['age'].toString()),
                      ],
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

question from:https://stackoverflow.com/questions/65644850/pick-data-from-a-json-in-flutter-with-listview-buider

Answer 1

simple future loader json

Future loadJson()async => 
  [
    {
      "displayName": "mario",
      "age": 27,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Running"
        },
        {
          "nomeworkout": "Brucia Grassi"
        }
      ]
    },
    {
      "displayName": "jessica",
      "age": 28,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Spinning"
        },
        {
          "nomeworkout": "Gambe"
        }
      ]
    },
    {
      "displayName": "Pedro",
      "age": 29,
      "peso": 85,
      "altezza": 175,
      "workout": [
        {
          "nomeworkout": "Potenziamento"
        }
      ]
    }
  ];

simple view

class ContohLoadJson extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FutureBuilder(
        future: loadJson(),
        builder: (context, snapshot){
          List data = snapshot.data??[];
          return data.isEmpty?Center(child: CircularProgressIndicator(),):
          ListView(
            children: List.generate(data.length, (index) => 
              Card(
                child: Container(
                  padding: EdgeInsets.all(8),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text("Name : "),
                          Text(data[index]['displayName'])
                        ],
                      ),
                      Row(
                        children: [
                          Text("Age : "),
                          Text(data[index]['age'].toString())
                        ],
                      ),
                      Row(
                        children: [
                          Text("Peso : "),
                          Text(data[index]['peso'].toString())
                        ],
                      ),
                      Row(
                        children: [
                          Text("altezza: "),
                          Text(data[index]['altezza'].toString())
                        ],
                      ),
                      Column(
                        children: List.generate(data[index]['workout'].length, (index2) => 
                          Card(
                            child: Container(
                              padding: EdgeInsets.all(8),
                              child: Column(
                                children: [
                                  Row(
                                    children: [
                                      Text("nomeworkout : "),
                                      Text(data[index]['workout'][index2]['nomeworkout'])
                                    ],
                                  )
                                ],
                              ),
                            ),
                          )
                        ).toList(),
                      )
                    ],
                  ),
                ),
              )
            ).toList(),
          );
        },
      )
    );
  }
}