Flutter fetch Data from Api

Question

I am trying to fetch data from Api but I get following error:

Unhandled Exception: type '_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'List'

I copied the code from a Video with a different Api and there it works fine. So I guess its a Problem with the definied API (https://api.radioking.io/widget/radio/leipzig-beatz/track/current).

It looks like the error is happening on this line:

                 setState(() {
                   users = items;
                 isLoading = false;
                });

This is the Code:

      List users = [];
      bool isLoading = false;
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
        this.fetchUser();
      }

      fetchUser() async {
        setState(() {
          isLoading = true;
        });
        var url =
            "https://api.radioking.io/widget/radio/leipzig-beatz/track/current";
        var response = await http.get(url);
        // print(response.body);
        if (response.statusCode == 200) {
          var items = json.decode(response.body);
          setState(() {
            users = items;
            isLoading = false;
          });
        } else {
          users = [];
          isLoading = false;
        }
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("Listing Users"),
          ),
          body: getBody(),
        );
      }

      Widget getBody() {
        if (users.contains(null) || users.length < 0 || isLoading) {
          return Center(child: CircularProgressIndicator());
        }
        return ListView.builder(
            itemCount: users.length,
            itemBuilder: (context, index) {
              return getCard(users[index]);
            });
      }

      Widget getCard(item) {
        var title = item['title'];
        return Card(
          elevation: 1.5,
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: ListTile(
              title: Row(
                children: <Widget>[
                  SizedBox(
                    width: 20,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                          width: MediaQuery.of(context).size.width - 140,
                          child: Text(
                            title,
                            style: TextStyle(fontSize: 17),
                          )),
                      SizedBox(
                        height: 10,
                      ),
                    ],
                  )
                ],
              ),
            ),
          ),
        );
      }

Answer 1

The reponse from your api is this

{"artist":"PHILBEAT","title":"BRINGING THE FUTURE","album":null,"started_at":"2021-03-31T15:02:27+0000","end_at":"2021-03-31T16:02:20+0000","next_track":"2021-03-31T16:02:21+0000","duration":3592.21,"buy_link":null,"is_live":false,"cover":"https://image.radioking.io/radios/336664/cover/custom/98df4bc3-9dca-4e17-b1c5-35e3116800e8.jpeg","default_cover":false,"forced_title":false}

This is a json response. You are using json.decode function of dart::convert library to convert json response which returns a map of type Map<String,dynamic> .

var items=json.decode(response.body)

items is Map<String,dynamic> which you are assigning to type List users.Thus you need first change type of users to Map<String,dynamic>

Answer 2

Since var items = json.decode(response.body); returns a Map with the api response, you can't assign it to your users variable which is a List

Change your variable type to this :

Map<String, dynamic> users = {};

Answer 3

chnage List users = []; to Map<String,String> user = {} then get the title by calling var title = user['title'];