Create model class for list of objects within an object-CodePudding

Don't ask me why the response is like this, it just is:

{
  "items": {
    "01": {
        "title": "One"
    },
    "02": {
        "title": "Two"
    },
    "03": {
        "title": "Three"
    },
    "04": {
        "title": "Four"
    }
  }
}

"items" really should be an array here instead of an object, but it isn't, and I can't change it.

So how do I create a model class for this such that the items are treated as being part of an array instead, like:

[{"title": "One"},{"title": "Two"},{"title": "Three"},{"title": "Four"}]

Thanks.

CodePudding user response：

Let's say your response call dataMap, you can convert it to list of map like this:

var _list = (dataMap["items"] as Map<String, Map<String, String>>)
    .values
    .map((e) => e)
    .toList();

now if you print _list, result would be:

[{title: One}, {title: Two}, {title: Three}, {title: Four}]

now you can convert it to a List of class model like this:

var result = _list.map((e) => ItemModel.fromJson(e)).toList();

and this is the class:

class ItemModel {
  final String title;

  ItemModel({required this.title});

  static ItemModel fromJson(Map<String, String> map) {
    return ItemModel(title: map["title"] ?? '');
  }
}

now if you print the result, it show you this:

[Instance of 'ItemModel', Instance of 'ItemModel', Instance of 'ItemModel', Instance of 'ItemModel']

CodePudding user response：

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

class CallList extends StatelessWidget {
  final cList = [
    {
      'name': 'Md. Zillur Rahman',
      'phone': '01856624090',
      'img': 'img/zillur.jpg',
      'color': Colors.grey,
    },
    {
      'name': 'Shah Rukh Khan',
      'phone': '01856242262',
      'img': 'img/saruk_khan.jpg',
      'color': Colors.green,
    },
    {
      'name': 'Shakira',
      'phone': '01966242262',
      'img': 'img/sakira.jpg',
      'color': Color.fromARGB(251, 241, 147, 4),
    },
    {
      'name': 'Imran Khan',
      'phone': '01756242262',
      'img': 'img/imran_khan.jpg',
      'color': Colors.green,
    },
    {
      'name': 'Bill Gates',
      'phone': '01856242262',
      'img': 'img/bill.jpg',
      'color': Colors.green,
    },
    {
      'name': 'Dilara Hanif Purnima',
      'phone': '01556242262',
      'img': 'img/purnima.jpg',
      'color': Colors.redAccent,
    },
    {
      'name': 'Mark Zuckerberg',
      'phone': '01656242262',
      'img': 'img/jukarbar.jpg',
      'color': Colors.green,
    },
    {
      'name': 'jennifer lopez',
      'phone': '01956982262',
      'img': 'img/janifa.jpg',
      'color': Color.fromARGB(251, 241, 147, 4),
    },
    {
      'name': 'Steve Jobs',
      'phone': '01856242762',
      'img': 'img/Sjobs.jpg',
      'color': Colors.green,
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromARGB(255, 235, 230, 230),
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        leading: Icon(
          Icons.dehaze_outlined,
          color: Colors.grey,
        ),
        title: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Padding(
            padding: const EdgeInsets.only(
              left: 50,
            ),
            child: Text(
              'Contacts',
              style: TextStyle(color: Colors.black54),
            ),
          ),
        ),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 10),
            child: Icon(
              Icons.search_rounded,
              color: Colors.grey,
            ),
          )
        ],
      ),
      body: Container(
        // Use ListView.builder
        child: ListView.builder(

            // the number of items in the list
            itemCount: cList.length,
            physics: BouncingScrollPhysics(),
            primary: false,
            shrinkWrap: true,

            // display each item of the product list
            itemBuilder: (context, index) {
              return Container(
                height: 90,
                child: Padding(
                  padding: const EdgeInsets.only(
                    left: 13,
                    right: 13,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Card(
                      child: ListTile(
                        // leading: FlutterLogo(size: 56.0),
                        leading: SizedBox(
                          // height: 100.0,
                          // fixed width and height
                          // child: Image.asset('${cList[index]["img"]}'),
                          child: Padding(
                            padding: const EdgeInsets.only(right: 10),
                            child: CircleAvatar(
                              backgroundColor: Colors.red[200],
                              radius: 30,
                              child: Stack(
                                children: [
                                  CircleAvatar(
                                    radius: 25,
                                    backgroundImage:
                                        AssetImage('${cList[index]["img"]}'),
                                  ),
                                  Positioned(
                                    child: CircleAvatar(
                                      radius: 6,
                                      backgroundColor:
                                          cList[index]['color'] as Color,
                                    ),
                                    bottom: 2,
                                    right: 0,
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                        title: Text(
                          '${cList[index]["name"]}',
                          style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: Color.fromARGB(255, 32, 30, 30),
                          ),
                        ),
                        subtitle: Text(
                          '${cList[index]["phone"]}',
                          style: TextStyle(
                            fontWeight: FontWeight.w500,
                          ),
                        ),
                        trailing: Icon(
                          Icons.call,
                          color: Colors.red[300],
                        ),
                      ),
                    ),
                  ),
                ),
              );
            }),
      ),
    );
  }
}

CodePudding user response：

I want to recommend a fascinating tool to create our classes from a JSON, and it is the following: https://app.quicktype.io/. In it, you can enter a structure of your JSON, and it will recommend a Dart class to map the information obtained. For example, for the JSON you propose, I got the following solution:

// To parse this JSON data, do
//
//     final item = itemFromJson(jsonString);

import 'package:meta/meta.dart';
import 'dart:convert';

Item itemFromJson(String str) => Item.fromJson(json.decode(str));

String itemToJson(Item data) => json.encode(data.toJson());

class Item {
    Item({
        required this.items,
    });

    Map<String, ItemValue> items;

    factory Item.fromJson(Map<String, dynamic> json) => Item(
        items: Map.from(json["items"]).map((k, v) => MapEntry<String, ItemValue>(k, ItemValue.fromJson(v))),
    );

    Map<String, dynamic> toJson() => {
        "items": Map.from(items).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())),
    };
}

class ItemValue {
    ItemValue({
        required this.title,
    });

    String title;

    factory ItemValue.fromJson(Map<String, dynamic> json) => ItemValue(
        title: json["title"],
    );

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