How to display items from a list of maps into a listview How to display items from a list of maps into a listview dart dart

How to display items from a list of maps into a listview


Edit: Updated the answer to utilize the serializer OP provided and utilize stateful widget.

Please note in the following code the data is constant but you have adapt it to handle the async http request, as i would like to show the answer in a dartpad here.

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": "dawdw@gmail.com",        "Title": "What's you first christmas like?",        "Description": "Please tell me about your Christmas?"      },      {        "Topic ID": "4",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": ""      },      {        "Topic ID": "5",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": ""      },      {        "Topic ID": "6",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": ""      },      {        "Topic ID": "7",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": ""      },      {        "Topic ID": "8",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": ""      },      {        "Topic ID": "9",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "Title": "What is your name?",        "Description": "From james"      },      {        "Topic ID": "10",        "From Name": "New User",        "From Email": "dawdw@gmail.com",        "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),            )),          )        ],      ),    );  }}/// SerializersQuestionModel 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,      };}

The corresponding output is as shown below.

enter image description here