List View from maps

main.dart

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

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MainWidget extends StatelessWidget {
  @override
  Widget build(context) {
    return MaterialApp(home: Scaffold(body: Questions()));
  }
}

class Questions extends StatefulWidget {
  @override
  _QuestionsPageState createState() => _QuestionsPageState();
}

class _QuestionsPageState extends State<Questions> {
  QuestionModel data;
  var users;

  String url =
      'https://90d53c1e-1ca3-4d5e-982e-0ff81a3ba7f5.mock.pstmn.io/profile/questions';

  requestQuestionsAPI() {
//   final response = await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"});

    setState(() {
      //data = json.decode(response.body);

      // Isntead of http fecth a constant data
      data = questionModelFromJson('''{
  "body": {
    "System Topics": [
      {"Topic ID": "2", "Title": "Tres", "Description": "Dos"},
      {"Topic ID": "3", "Title": "Pls Work", "Description": "nfewtrwe"},
      {"Topic ID": "4", "Title": "Juice", "Description": "Bar"}
    ],
    "Video Requests": [
      {
        "Topic ID": "1",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What's you first christmas like?",
        "Description": "Please tell me about your Christmas?"
      },
      {
        "Topic ID": "4",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": ""
      },
      {
        "Topic ID": "5",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": ""
      },
      {
        "Topic ID": "6",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": ""
      },
      {
        "Topic ID": "7",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": ""
      },
      {
        "Topic ID": "8",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": ""
      },
      {
        "Topic ID": "9",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": "From james"
      },
      {
        "Topic ID": "10",
        "From Name": "New User",
        "From Email": "[email protected]",
        "Title": "What is your name?",
        "Description": "From james"
      }
    ]
  }
}''');
    });
  }

  _questions() {
    requestQuestionsAPI();
  }

  void initState() {
    super.initState();
    _questions();
  }

  dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MyNewWidget(questionModel: data);
  }
}

class MyNewWidget extends StatefulWidget {
  final QuestionModel questionModel;
  MyNewWidget({this.questionModel});
  @override
  _MyNewWidgetState createState() => _MyNewWidgetState();
}

class _MyNewWidgetState extends State<MyNewWidget> {
  @override
  Widget build(BuildContext context) {
    print(widget.questionModel);
    return MyList(
      bodyElement: widget.questionModel.body,
    );
  }
}

class MyList extends StatelessWidget {
  final Body bodyElement;
  MyList({this.bodyElement});
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Text(
        'Sytem Topics',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 25,
            fontStyle: FontStyle.italic),
      ),
      Divider(),
      Expanded(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: bodyElement.systemTopics.length,
            itemBuilder: (context, index) {
              return MyListElement(
                id: bodyElement.systemTopics[index].topicId,
                description: bodyElement.systemTopics[index].description,
              );
            }),
      ),
      Text(
        'Video Requests',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 25,
            fontStyle: FontStyle.italic),
      ),
      Divider(),
      Expanded(
        child: ListView.builder(
            shrinkWrap: true,
            itemCount: bodyElement.videoRequests.length,
            itemBuilder: (context, index) {
              return MyListElement(
                id: bodyElement.videoRequests[index].topicId,
                description: bodyElement.videoRequests[index].description,
              );
            }),
      )
    ]);
  }
}

class MyListElement extends StatelessWidget {
  final String id;
  final String description;

  MyListElement({this.id, this.description});

  @override
  Widget build(BuildContext context) {
    print('id is $id');
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(20.0),
      ),
      height: 74.0,
      margin: const EdgeInsets.only(bottom: 10.0),
      child: Row(
        children: <Widget>[
          Container(
            alignment: Alignment.center,
            child: Text(id),
            height: 74.0,
            width: 73.0,
            decoration: BoxDecoration(
              color: Colors.orange,
              borderRadius: BorderRadius.only(
                  topLeft: const Radius.circular(20.0),
                  bottomLeft: const Radius.circular(20.0)),
            ),
          ),
          Container(
            height: 74.0,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                  topRight: const Radius.circular(20.0),
                  bottomRight: const Radius.circular(20.0)),
            ),
            width: 265.0,
            child: Center(
                child: Text(
              description,
              style: TextStyle(fontSize: 24.0, color: Colors.red),
            )),
          )
        ],
      ),
    );
  }
}

/// Serializers

QuestionModel questionModelFromJson(String str) =>
    QuestionModel.fromJson(json.decode(str));

String questionModelToJson(QuestionModel data) => json.encode(data.toJson());

class QuestionModel {
  Body body;

  QuestionModel({
    this.body,
  });

  factory QuestionModel.fromJson(Map<String, dynamic> json) => QuestionModel(
        body: Body.fromJson(json["body"]),
      );

  Map<String, dynamic> toJson() => {
        "body": body.toJson(),
      };
}

class Body {
  List<SystemTopic> systemTopics;
  List<VideoRequest> videoRequests;

  Body({
    this.systemTopics,
    this.videoRequests,
  });

  factory Body.fromJson(Map<String, dynamic> json) => Body(
        systemTopics: List<SystemTopic>.from(
            json["System Topics"].map((x) => SystemTopic.fromJson(x))),
        videoRequests: List<VideoRequest>.from(
            json["Video Requests"].map((x) => VideoRequest.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "System Topics":
            List<dynamic>.from(systemTopics.map((x) => x.toJson())),
        "Video Requests":
            List<dynamic>.from(videoRequests.map((x) => x.toJson())),
      };
}

class SystemTopic {
  String topicId;
  String title;
  String description;

  SystemTopic({
    this.topicId,
    this.title,
    this.description,
  });

  factory SystemTopic.fromJson(Map<String, dynamic> json) => SystemTopic(
        topicId: json["Topic ID"],
        title: json["Title"],
        description: json["Description"],
      );

  Map<String, dynamic> toJson() => {
        "Topic ID": topicId,
        "Title": title,
        "Description": description,
      };
}

class VideoRequest {
  String topicId;
  String fromName;
  String fromEmail;
  String title;
  String description;

  VideoRequest({
    this.topicId,
    this.fromName,
    this.fromEmail,
    this.title,
    this.description,
  });

  factory VideoRequest.fromJson(Map<String, dynamic> json) => VideoRequest(
        topicId: json["Topic ID"],
        fromName: json["From Name"],
        fromEmail: json["From Email"],
        title: json["Title"],
        description: json["Description"],
      );

  Map<String, dynamic> toJson() => {
        "Topic ID": topicId,
        "From Name": fromName,
        "From Email": fromEmail,
        "Title": title,
        "Description": description,
      };
}