showing key along side data json – Flutter

Hi I have a dynamic json the details in it changes in every product so I wanna show keys along side their corresponding data
any example would be great I am struggling with this. sample json in appDetails wanna show all the keys like systemoverview,benefits, mainFeatures and their data.

In next product it will be changed but appdetails will remain same.

  import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MaterialApp(home: TestScreen()));
}

class TestScreen extends StatefulWidget {
  const TestScreen({Key? key}) : super(key: key);

  @override
  State<TestScreen> createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  List<AppDetails>? details = [];
  final Map<String, dynamic> json = {
    "name": "TestingApp",
    "category": "Production",
    "subcategory": "Productivity",
    "imageUrl": "Testing-Banner.jpg",
    "logo": "PI.png",
    "description": "Testing is an application for easy & effective Inspection",
    "appDetails": [
      {
        "systemOverview": "https:url.com",
        "multiDeviceSupport": [
          {"item1": "Multi-Device"},
          {"item2": "Multi-Lingual"},
          {"item3": "Multi-Database"}
        ],
        "mainFeatures": [
          {"feature1": "Testing"},
          {"feature2": "Ease"},
          {"feature3": "Select failure "}
          
        ],
        "benefits": [
          {"benfits1": "Easy & quick solution "},
          {"benefits2": "Go paperless "},
        personnel’s"}
        ]
      }
    ]
  };

  @override
  void initState() {
    super.initState();
    final data = AppDetailModel.fromJson(json);
    details = data.appDetails;
    List<AppDetails>? parseCategorizedBooksJson(Map<String, dynamic> json) => [
          for (var detai in json.values)
            for (var de in detai) AppDetails.fromJson(de)
        ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.blue,
        title: const Text('Home'),
      ),
      body: SizedBox(
        child: ListView.builder(
          itemCount: details?.length,
          itemBuilder: (context, index) {
            final detail = details?[index];

            return buildProduct(detail);
          },
        ),
      ),
    );
  }
}

Widget buildProduct(AppDetails? detail) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: (detail?.benefits ?? []).map((e) {
          final index = (detail?.benefits ?? []).indexOf(e);
          return Row(
            children: [
              SizedBox(width: 20, child: Text('${index + 1}.')),
              Text('${e.label}'),
            ],
          );
        }).toList(),
      ),
    );

class AppDetailModel {
  String? name;
  String? category;
  String? subcategory;
  String? imageUrl;
  String? logo;
  String? description;
  List<AppDetails>? appDetails;

  AppDetailModel(
      {this.name,
      this.category,
      this.subcategory,
      this.imageUrl,
      this.logo,
      this.description,
      this.appDetails});

  AppDetailModel.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    category = json['category'];
    subcategory = json['subcategory'];
    imageUrl = json['imageUrl'];
    logo = json['logo'];
    description = json['description'];
    if (json['appDetails'] != null) {
      appDetails = <AppDetails>[];
      json['appDetails'].forEach((v) {
        appDetails!.add(AppDetails.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['name'] = name;
    data['category'] = category;
    data['subcategory'] = subcategory;
    data['imageUrl'] = imageUrl;
    data['logo'] = logo;
    data['description'] = description;
    if (appDetails != null) {
      data['appDetails'] = appDetails!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class AppDetails {
  String? systemOverview;
  List<Label>? multiDeviceSupport;
  List<Label>? mainFeatures;
  List<Label>? benefits;

  AppDetails(
      {this.systemOverview,
      this.multiDeviceSupport,
      this.mainFeatures,
      this.benefits});

  AppDetails.fromJson(Map<String, dynamic> json) {
    systemOverview = json['systemOverview'];
    if (json['multiDeviceSupport'] != null) {
      multiDeviceSupport = <Label>[];
      json['multiDeviceSupport'].forEach((v) {
        multiDeviceSupport!.add(Label.fromJson(v));
      });
    }
    if (json['mainFeatures'] != null) {
      mainFeatures = <Label>[];
      json['mainFeatures'].forEach((v) {
        mainFeatures!.add(Label.fromJson(v));
      });
    }
    if (json['benefits'] != null) {
      benefits = <Label>[];
      json['benefits'].forEach((v) {
        benefits!.add(Label.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['systemOverview'] = systemOverview;
    if (multiDeviceSupport != null) {
      data['multiDeviceSupport'] =
          multiDeviceSupport!.map((v) => v.toJson()).toList();
    }
    if (mainFeatures != null) {
      data['mainFeatures'] = mainFeatures!.map((v) => v.toJson()).toList();
    }
    if (benefits != null) {
      data['benefits'] = benefits!.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Label {
  String? label;

  Label({this.label});

  Label.fromJson(Map<String, dynamic> json) {
    label = json['label'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = <String, dynamic>{};
    data['label'] = label;
    return data;
  }
}
```

currently What I am doing right now