how to print an elements of Future Map dynamic, dynamic

Question

I am looking to print the elements of a Future Map, I obtain these elements through an API result, and I can read the result with a then, but I cannot use this result to display it on the screen and use its elements outside of the then, as I use the elements that I get in the then to make the structure per screen with each returned element.

`class _PaginaDetalleScreenState extends State<PaginaDetalleScreen> {
  @override
  Widget build(BuildContext context) {
    Future<Map<dynamic, dynamic>> progs =
        login().detalles(widget.clave, widget.sucursal, widget.folio);
    // progs.then((value) => print(value['ocs'][0][2]));

    print(progs[0]); // how to print each element

    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xff3c4854),
        title: const Text('Detalles Pedido'),
      ),
      body: ListView.builder(
          itemCount: null,
          itemBuilder: (BuildContext context, int index) {
            return;
          }),
    );
  }
}`

I tried to pass the map to a list to access each data and be able to display it individually on the screen, I also tried to save the elements with a cycle in another variable to change its structure, however I still get the same result, a dynamic future map dynamic.

Answer 1

import 'package:dio/dio.dart'; // Paquete necesario para la petición a internet.
import 'package:flutter/material.dart';

class Opcion1 extends StatefulWidget {

  const Opcion1({super.key});

  @override
  State<Opcion1> createState() => _Opcion1State();
}

class _Opcion1State extends State<Opcion1> {

    dynamic productos; // Variable dinamica para almacenar la respuesta de la API

// Initstate, para cargar primero lo que esta en la función.
   @override
   void initState() {
     super.initState();
     getProductos(); //Funcion futura
   }

// Creación de la función asincrona
   Future<void> getProductos() async {
    
    final response = await Dio().get('urldelAPI');
    productos = response.data; //asignación de los valores

 //Manejo del estado, cuando se obtiene la respuesta manda el cambio de estado
    setState(() {});

   }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Pruebas'),
        ),
        body: Container(
          child: Center(
            // Mostramos la respuesta de acuerdo a la estructura de la misma. 
            child: Text( productos?['ocs'][0][2].toString() ?? 'No data'), 
          ),
        ),
      ),
    );
  }
}