Flutter - List is not a subtype of type Map<String, dynamic>

Question

In flutter i have an array, model and service. Like this

Array

[{"id":1,"name":"Elizabeth Mayer","email":"[email protected]","language":"en","city":"North Alfredo","latitude":52.608474,"longitude":-148.435351,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":2,"name":"Jedidiah Wilkinson","email":"[email protected]","language":"en","city":"Uptonport","latitude":-10.587622,"longitude":-50.709927,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":3,"name":"Ms. Beth Kozey","email":"[email protected]","language":"en","city":"Lake Gregorymouth","latitude":-85.088104,"longitude":-41.870917,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":4,"name":"Zelda Gaylord","email":"[email protected]","language":"en","city":"East Jayden","latitude":-16.937626,"longitude":-46.935818,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":5,"name":"Zetta Nolan","email":"[email protected]","language":"es","city":"Littlefort","latitude":-70.983631,"longitude":114.926832,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":6,"name":"Myron Bechtelar II","email":"[email protected]","language":"en","city":"Nyabury","latitude":-24.464843,"longitude":-144.472216,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":7,"name":"Dr. Adella Hermiston","email":"[email protected]","language":"es","city":"Rauburgh","latitude":-18.944024,"longitude":-115.838682,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":8,"name":"Malinda Pfeffer","email":"[email protected]","language":"en","city":"West Domenickborough","latitude":57.215318,"longitude":9.643726,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":9,"name":"Chanelle Rau","email":"[email protected]","language":"es","city":"Wizaside","latitude":-12.169768,"longitude":83.807733,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":10,"name":"Jarod Abshire I","email":"[email protected]","language":"es","city":"Hicklefurt","latitude":52.215627,"longitude":37.358283,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"}]

Model

class UserModel {
      final String name;
      final String email;
      final String password;
      final String language;
      final String city;
      final double latitude;
      final double longitude;
    
      UserModel(
          {required this.name,
          required this.email,
          required this.password,
          required this.language,
          required this.city,
          required this.latitude,
          required this.longitude});
    
      factory UserModel.fromJson(Map<String, dynamic> json) {
        return UserModel(
          name: json['name'],
          email: json['email'],
          password: json['password'],
          language: json['language'],
          city: json['city'],
          latitude: json['latitude'],
          longitude: json['longitude'],
        );
      }
    }

Service

  Future<UserModel> getAll() async {
    var url = Uri.parse('http://10.0.2.2:80/users/all');
    var response = await http.get(url);
    if (response.statusCode == 200) {
      return UserModel.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Error: ${response.statusCode}.');
    }
  }

The problem. When i try to get this service data, return this

List' is not a subtype of type 'Map<String, dynamic>

I know what´s the error, different list type, but i don't know exactly how fix them. I saw some similar questions in stackoverflow, but nothing shows a clear way to fix it.

Answer 1

try this way it may help

var mapData = json.decode(response)["body"];

 return UserModel.fromJson.(mapData);

Answer 2

You are trying to create, parse, each user model from the whole list of Map<String, dynamic>.

You could instead use map to call fromJson on each element, giving a List<UserModel> as a result.

This one liner would do the conversion:

final models = jsonDecode(json).map((e) => UserModel.fromJson(e)).toList();

Where json is the JSON String in your question and models is a List<UserModel>.

If you want to improve readability, you can split in into multiple lines:

const jsonData ='[{"id":1,"name":"Elizabeth Mayer","email":"[email protected]","language":"en","city":"North Alfredo","latitude":52.608474,"longitude":-148.435351,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":2,"name":"Jedidiah Wilkinson","email":"[email protected]","language":"en","city":"Uptonport","latitude":-10.587622,"longitude":-50.709927,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":3,"name":"Ms. Beth Kozey","email":"[email protected]","language":"en","city":"Lake Gregorymouth","latitude":-85.088104,"longitude":-41.870917,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":4,"name":"Zelda Gaylord","email":"[email protected]","language":"en","city":"East Jayden","latitude":-16.937626,"longitude":-46.935818,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":5,"name":"Zetta Nolan","email":"[email protected]","language":"es","city":"Littlefort","latitude":-70.983631,"longitude":114.926832,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":6,"name":"Myron Bechtelar II","email":"[email protected]","language":"en","city":"Nyabury","latitude":-24.464843,"longitude":-144.472216,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":7,"name":"Dr. Adella Hermiston","email":"[email protected]","language":"es","city":"Rauburgh","latitude":-18.944024,"longitude":-115.838682,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":8,"name":"Malinda Pfeffer","email":"[email protected]","language":"en","city":"West Domenickborough","latitude":57.215318,"longitude":9.643726,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":9,"name":"Chanelle Rau","email":"[email protected]","language":"es","city":"Wizaside","latitude":-12.169768,"longitude":83.807733,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":10,"name":"Jarod Abshire I","email":"[email protected]","language":"es","city":"Hicklefurt","latitude":52.215627,"longitude":37.358283,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"}]';
final decodedData = jsonDecode(jsonData);
final userModels = decodedData.map((userMap) => UserModel.fromJson(userMap)).toList();

A complete Flutter example that displays your user data using Cards

You can play with the example, or see it working, on this DartPad.

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

const jsonData =
    '[{"id":1,"name":"Elizabeth Mayer","email":"[email protected]","language":"en","city":"North Alfredo","latitude":52.608474,"longitude":-148.435351,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":2,"name":"Jedidiah Wilkinson","email":"[email protected]","language":"en","city":"Uptonport","latitude":-10.587622,"longitude":-50.709927,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":3,"name":"Ms. Beth Kozey","email":"[email protected]","language":"en","city":"Lake Gregorymouth","latitude":-85.088104,"longitude":-41.870917,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":4,"name":"Zelda Gaylord","email":"[email protected]","language":"en","city":"East Jayden","latitude":-16.937626,"longitude":-46.935818,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":5,"name":"Zetta Nolan","email":"[email protected]","language":"es","city":"Littlefort","latitude":-70.983631,"longitude":114.926832,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":6,"name":"Myron Bechtelar II","email":"[email protected]","language":"en","city":"Nyabury","latitude":-24.464843,"longitude":-144.472216,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":7,"name":"Dr. Adella Hermiston","email":"[email protected]","language":"es","city":"Rauburgh","latitude":-18.944024,"longitude":-115.838682,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":8,"name":"Malinda Pfeffer","email":"[email protected]","language":"en","city":"West Domenickborough","latitude":57.215318,"longitude":9.643726,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":9,"name":"Chanelle Rau","email":"[email protected]","language":"es","city":"Wizaside","latitude":-12.169768,"longitude":83.807733,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"},{"id":10,"name":"Jarod Abshire I","email":"[email protected]","language":"es","city":"Hicklefurt","latitude":52.215627,"longitude":37.358283,"created_at":"2022-01-13T22:59:09.000000Z","updated_at":"2022-01-13T22:59:09.000000Z"}]';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Json Conversion',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  final userModels =
      jsonDecode(jsonData).map((e) => UserModel.fromJson(e)).toList();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: const Text('Stack Overflow Json to Model'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Card(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('id: ${userModels.elementAt(index).id}'),
                  Text('name: ${userModels.elementAt(index).name}'),
                  Text('email: ${userModels.elementAt(index).email}'),
                ],
              ),
            ),
          ),
        ),
        itemCount: userModels.length,
      ),
    ));
  }
}

class UserModel {
  final int id;
  final String name;
  final String email;
  final String password;
  final String language;
  final String city;
  final double latitude;
  final double longitude;

  UserModel(
      {required this.id,
      required this.name,
      required this.email,
      required this.password,
      required this.language,
      required this.city,
      required this.latitude,
      required this.longitude});

  factory UserModel.fromJson(Map<String, dynamic> json) {
    return UserModel(
      id: json['id'] ?? 0,
      name: json['name'],
      email: json['email'],
      password: json['password'] ?? 'empty',
      language: json['language'],
      city: json['city'],
      latitude: json['latitude'],
      longitude: json['longitude'],
    );
  }
}