I want to show API data in the list view.

enter image description here

listview looks like this.

Future<List<Post>> getData() async {
  final response = await http.get(
      Uri.parse("http://192.168.0.9:8000/api/buildingdata/"),
      headers: {"Access-Control-Allow-Origin": "*"});
  if (response.statusCode == 200) {
    List list = (json.decode(utf8.decode(response.bodyBytes)));
    var postList = list.map((element) => Post.fromJson(element)).toList();
    return postList;
  } else {
    throw Exception('Failed to load post');
  }
}

class Post {
  final String buildingName;
  final String buildingLoc;
  final String buildingCall;

  Post({this.buildingName, this.buildingLoc, this.buildingCall});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      buildingName: json["building_name"],
      buildingLoc: json["building_loc"],
      buildingCall: json["building_call"],
    );
  }

I used this code to get API data to the app.

enter image description here

and my API looks like this. (Ignore image for each building)

_makeDataList(List<Map<String, dynamic>> datas) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      itemBuilder: (BuildContext _context, int index) {
        return Container(
          padding: const EdgeInsets.symmetric(vertical: 10),
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  padding: const EdgeInsets.only(left: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start, 
                    children: [
                      Text(
                        datas[index]["building_name"].toString(),
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 15),
                      ),
                      SizedBox(height: 5),
                      Text(
                        datas[index]["building_loc"].toString(),
                        style: TextStyle(
                            fontSize: 12, color: Colors.black.withOpacity(0.3)),
                      ),
                      SizedBox(height: 5),
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext _context, int index) {

        return Container(height: 1, color: Colors.pink.withOpacity(0.4));
      },
      itemCount: datas.length,
    );
  }

Widget _bodyWidget() {
    return FutureBuilder(
        future: postList,
        builder: (BuildContext context, dynamic snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.hasError) {
            return Center(
              child: Text("Failed to load data"),
            );
          }
          if (snapshot.hasData) {
           return _makeDataList(snapshot.data);
        }
          return Center(child: Text("No data for this location"));
        });
  }

This is my code I want to use for listview, but this error occurs when I run app.

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

When I tried basic listview code(only shows building name), it worked well.

return ListView.builder(
             itemCount : snapshot.data.length,
             itemBuilder : (context,index){
               Post post = snapshot.data[index];
               return Card(
                 child: ListTile(
                   title:Text(post.buildingName)
                 )
               );
             },
           );

Well this code is just for checking connection with API, so I don't use this code.

where should I change to fix this error?

CodePudding user response：

You have to change List<Map<String,dynamic>> to List<Post> to your _makeDataList

_makeDataList(List<Post> datas) {
    return ListView.separated(
      padding: const EdgeInsets.symmetric(horizontal: 10),
      itemBuilder: (BuildContext _context, int index) {
        return Container(
          padding: const EdgeInsets.symmetric(vertical: 10),
          child: Row(
            children: [
              Expanded(
                child: Container(
                  height: 100,
                  padding: const EdgeInsets.only(left: 20),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start, 
                    children: [
                      Text(
                        datas[index].building_name.toString(),
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 15),
                      ),
                      SizedBox(height: 5),
                      Text(
                        datas[index].building_loc.toString(),
                        style: TextStyle(
                            fontSize: 12, color: Colors.black.withOpacity(0.3)),
                      ),
                      SizedBox(height: 5),
                    ],
                  ),
                ),
              )
            ],
          ),
        );
      },
      separatorBuilder: (BuildContext _context, int index) {

        return Container(height: 1, color: Colors.pink.withOpacity(0.4));
      },
      itemCount: datas.length,
    );
  }

Widget _bodyWidget() {
    return FutureBuilder(
        future: postList,
        builder: (BuildContext context, dynamic snapshot) {
          if (snapshot.connectionState != ConnectionState.done) {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          if (snapshot.hasError) {
            return Center(
              child: Text("Failed to load data"),
            );
          }
          if (snapshot.hasData) {
           return _makeDataList(snapshot.data);
        }
      return Center(child: Text("No data for this location"));
    });
  }