How to get Maping on dart flutter?

Question

I have this kind of error, type List<dynamic> is not a subtype of type Map<String, dynamic>, i've already search on many questions and still can't understand the purpose of that error. this is my api code

import 'dart:convert';

import 'package:learn_how_to_fetch/announcement.dart';
import 'package:requests/requests.dart';

Future<Announcement> fetchAnnouncement() async {
Map<String, String> headers = {
  'Content-Type': 'application/json;charset=UTF-8',
  'Charset': 'utf-8'
};
var response = await Requests.get('http://172.16.54.2:5000/api/announcelist',
  verify: false, headers: headers);
 response.raiseForStatus();
 // final jsonTried = json.decode(response.content()) as List;
 // print(json);
 if (response.statusCode == 200) {
 final jsonResponse = json.decode(response.content());
 // print(jsonResponse
 List<Announcement> anonList = []
 Announcement anonResponse = Announcement.fromJson(jsonResponse);
 print(anonResponse.id);
 return anonResponse;
 } else {
 // If the server did not return a 200 OK response,
 // then throw an exception.
  throw Exception('Failed to load album');
  } 
 }  

here is my announcement class method

class Announcement {
int id;
String title;
String image;
String content;
String text;
int active;

 Announcement(
  {this.id, this.title, this.image, this.content, this.text, this.active});

Announcement.fromJson(Map<String, dynamic> json) {
  id = json['id'];
  title = json['title'];
  image = json['image'];
  content = json['content'];
  text = json['text'];
  active = json['active'];
}

Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['id'] = this.id;
  data['title'] = this.title;
  data['image'] = this.image;
  data['content'] = this.content;
  data['text'] = this.text;
  data['active'] = this.active;
  return data;
}
}

and this is the main.dart that i use

import 'package:flutter/material.dart';
import 'package:learn_how_to_fetch/announcement.dart';
import 'package:learn_how_to_fetch/api.dart';

void main() => runApp(MyApp());

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

 @override
 _MyAppState createState() => _MyAppState();
 }

 class _MyAppState extends State<MyApp> {
 Future<Announcement> futureAnnouncement;

 @override 
 void initState() {
  super.initState();
  futureAnnouncement = fetchAnnouncement();
 }

 @override
 Widget build(BuildContext context) {
return MaterialApp(
  title: 'Fetch Data Example',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Fetch Data Example'),
    ),
    body: Center(
      child: FutureBuilder<Announcement>(
        future: futureAnnouncement,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text(snapshot.data.title);
          } else if (snapshot.hasError) {
            return Text("${snapshot.error}");
          }

          // By default, show a loading spinner.
          return CircularProgressIndicator();
        },
      ),
    ),
  ),
);
}
}

and this is the server response

  [{
    "id": 57,
    "title": "Title",
    "image": "image/specialitem/SPI1454050237.jpg",
    "content": "Something",
    "text": "<Content>",
    "active": 0
 },
{...}]

but the problem is i can't seem to understand that error. I ever tried this link this problem, but still i can't solve the problem

Answer 1

You should first get the server response in a list and then convert all the elements to your custom class i.e. Announcement. Try the following code:

Future<Announcement> fetchAnnouncement() async {
  Map<String, String> headers = {
    'Content-Type': 'application/json;charset=UTF-8',
    'Charset': 'utf-8'
  };
  var response = await Requests.get('http://172.16.54.2:5000/api/announcelist',
      verify: false, headers: headers);
  response.raiseForStatus();
  // final jsonTried = json.decode(response.content()) as List;
  // print(json);
  if (response.statusCode == 200) {
    final jsonResponse = json.decode(response.content());
    // print(jsonResponse
    List<dynamic> anonList = jsonResponse;
    List<Announcement> anonResponse = [];
    for (int i = 0; i < anonList.length; i++) {
      anonResponse.add(Announcement.fromJson(anonList[i]));
    }
    print(anonResponse);
    return anonResponse[0];
  } else {
    // If the server did not return a 200 OK response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

Answer 2

The problem is, that you get a JSON list from the server.

Using json.decode() on a JSON list returns a List.

But your code expects jsonResponse to be a Map.