type 'List<dynamic>' is not a subtype of type 'List<Item>' flutter

Question

I try to display my images coming from my database but I get error type 'List' is not a subtype of type 'List'.I tried a lot to find the cause of the problem, but I did not find a solution to it. I am a new flutter developer. I looked at previous posts on the site here as well, but I couldn't solve the problem still.

this is my model

class Item {
  int? id;
  String? title;
  String? category;
  String? thumb_url;
  String? location;
  double? price;

  Item(this.id, this.title, this.category, this.thumb_url, this.location,
      this.price);
  Item.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    category = json['category'];
    thumb_url = json['thumb_url'];
    location = json['location'];
    price = json['price'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['title'] = this.title;
    data['category'] = this.category;
    data['thumb_url'] = this.thumb_url;
    data['location'] = this.location;
    data['price'] = this.price;
    return data;
  }
}



import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:flutter_app_immo1/models/items_for_bdd_model.dart';
import 'package:flutter_app_immo1/screens/details_screen.dart';
import 'package:flutter_app_immo1/widgets/house_card.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

  @override
  State<SuggestionList> createState() => _SuggestionListState();
}

class _SuggestionListState extends State<SuggestionList> {
  List<Item> item = [];
  getData() async {
    var url =
        'http://xxxxxxxxxx/flutter/logement_concret.php';
    print(url);
    final response = await http.get(Uri.parse(url));
    item = json.decode(response.body);
    print(item);
    return item;
  }

  @override
  void initState() {
    super.initState();
    getData();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                "Recommendation for you",
                style: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18.0,
                ),
              ),
              TextButton(onPressed: () {}, child: Text("See All")),
            ],
          ),
          const SizedBox(
            height: 12.0,
          ),
          Container(
            height: 340.0,
            width: double.infinity,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: item.length,
              itemBuilder: (context, index) => Container(
                width: 300.0,
                margin: const EdgeInsets.only(right: 20.0),
                decoration: BoxDecoration(
                  color: const Color(0xfcf9f8),
                  borderRadius: BorderRadius.circular(8.0),
                  border: Border.all(color: Colors.grey.shade200),
                ),
                child: InkWell(
                  onTap: (() {}),
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                          width: double.infinity,
                          height: 160.0,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8.0),
                              color: Colors.grey.shade200,
                              image: DecorationImage(
                                image: NetworkImage(
                                    item[index].thumb_url.toString()),
                                fit: BoxFit.cover,
                              )),
                        ),
                        const SizedBox(
                          height: 18.0,
                        ),
                        Text(
                          item[index].category.toString(),
                          style: TextStyle(
                              color: Colors.blue.shade600,
                              fontSize: 18,
                              fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(
                          height: 8.0,
                        ),
                        Text(
                          item[index].title.toString(),
                          style: TextStyle(
                              color: Colors.blue.shade600,
                              fontSize: 18,
                              fontWeight: FontWeight.bold),
                        ),
                        const SizedBox(
                          height: 8.0,
                        ),
                        Row(
                          children: [
                            Icon(
                              Icons.location_on,
                              color: Colors.grey,
                            ),
                            Text(
                              item[index].location.toString(),
                              style: const TextStyle(
                                  fontWeight: FontWeight.normal,
                                  fontSize: 16.0,
                                  color: Colors.grey,
                                  overflow: TextOverflow.ellipsis),
                            ),
                            const SizedBox(
                              height: 20.0,
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              "${item[index].price}\$/month",
                              style: const TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                  overflow: TextOverflow.ellipsis),
                            ),
                            IconButton(
                                onPressed: () {},
                                icon: Icon(Icons.favorite_outline))
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

json.decode() returns a List<dynamic>, not a List<Item>. You have to convert it into a List<item>.

use fromJson()

  factory Item.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    title = json['title'];
    category = json['category'];
    thumb_url = json['thumb_url'];
    location = json['location'];
    price = json['price'];
    return Item(id: id, title: title, category: category, thumb_url: thumb_url, location: location, price: price);
  }

List<Item> item = [];
getData() async {
  var url = 'http://xxxxxxxxxx/flutter/logement_concret.php';
  print(url);
  final response = await http.get(Uri.parse(url));
  List<dynamic> data = json.decode(response.body);
  
  for (Map<String, dynamic> itm in data) {
    final res = Item.fromJson(itm);
    item.add(res);
  }

  print(item);
  return item;
}

Read more here: https://docs.flutter.dev/development/data-and-backend/json