Retrieving complex api information and putting it in a listviewbuilder-CodePudding

I am trying to create an mobile app where i can put in a name and get information from an api afterwards, this was working until the api got more complex. can share this information btw. It is showing nothing but the image. api that works when i retrieve it:

{"id":"Pw_wOwAmqDmB3slQO_8PkKXLoE56qnBk5f-qdW0fKVTfvAmm",
"accountId":"_MkPpRhr6tK22xRT8TofYHPyACcmURn0cp-U9GbL1xTQzhRfvaw4ZF7P",
"puuid":"RT0wLpw9fOUMgB4HUWDVoMi6_F20W4yhut5-q1bA7Izhl3dPjv5iF2JzqXkLQJYPtf2MBMcvooMmGA",
"name":"Zeri outplay",
"profileIconId":5610,"revisionDate":1669140463310,
"summonerLevel":535}

api that doesnt work:

[{"leagueId":"e6a38c93-6037-4457-aa57-80a9a52be3ea",
"queueType":"RANKED_SOLO_5x5",
"tier":"PLATINUM","rank":"IV",
"summonerId":"Pw_wOwAmqDmB3slQO_8PkKXLoE56qnBk5f-qdW0fKVTfvAmm",
"summonerName":"Zeri outplay",
"leaguePoints":0,
"wins":75,
"losses":56,
"veteran":false,
"inactive":false,
"freshBlood":false,
"hotStreak":false},
{"leagueId":"a21014e6-fa8f-4f07-b533-b09a10b88bbf",
"queueType":"RANKED_FLEX_SR",
"tier":"SILVER","rank":"II",
"summonerId":"Pw_wOwAmqDmB3slQO_8PkKXLoE56qnBk5f-qdW0fKVTfvAmm",
"summonerName":"Zeri outplay",
"leaguePoints":1,
"wins":15,
"losses":5,
"veteran":false,
"inactive":false,
"freshBlood":false,
"hotStreak":true}]

heres the code for the api that doesnt work: RemoteService.dart:

class SummonerRankApi {
  static Future getSummonerRank(summonerid) {
    String link = 'https://euw1.api.riotgames.com/lol/league/v4/entries/by-summoner/$summonerid?api_key=$apiKey';
    return http.get(Uri.parse(link));
  }
}

Home_page.dart

class SummonerProfileRoute extends StatefulWidget {
  String name, summonerId;
  int profileIconId;
  SummonerProfileRoute(this.name, this.summonerId, this.profileIconId);

  @override
  State<StatefulWidget> createState() {
    return _SummonerProfileRouteState(this.name, this.summonerId, this.profileIconId);
  }}

class _SummonerProfileRouteState extends State<SummonerProfileRoute> {
  List<SummonerRank> SummonerRankList = <SummonerRank>[];

  void getSummonerRankfromApi() async {
    SummonerRankApi.getSummonerRank(summonerId).then((response) {
      setState(() {
        Iterable list = json.decode(response.body);
        SummonerRankList = list.map((model) => SummonerRank.fromJson(model)).toList();
      });
    });
  }

  String name, summonerId;
  int profileIconId;
  _SummonerProfileRouteState(this.name, this.summonerId, this.profileIconId);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
          child: Column(
            children: [
              Image(
                image: NetworkImage('https://ddragon.leagueoflegends.com/cdn/12.22.1/img/profileicon/$profileIconId.png'),
                height: 100,
                width: 100,
              ),
              ListView.builder(
                  itemCount: SummonerRankList.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(SummonerRankList[index].tier),
                      subtitle: Text(SummonerRankList[index].summonerName),
                    );
                  }),
            ],
          )
      ),
    );
  }
}

summoner.dart

class SummonerRank {
  String leagueId;
  String queueType;
  String tier;
  String rank;
  String summonerId;
  String summonerName;
  int leaguePoints;
  int wins;
  int losses;
  bool veteran;
  bool inactive;
  bool freshBlood;
  bool hotStreak;

  SummonerRank.fromJson(Map json)
      : leagueId = json['leagueId'],
        queueType = json['queueType'],
        tier = json['tier'],
        rank = json['rank'],
        summonerId = json['summonerId'],
        summonerName = json['summonerName'],
        leaguePoints = json['leaguePoints'],
        wins = json['wins'],
        losses = json['losses'],
        veteran = json['veteran'],
        inactive = json['inactive'],
        freshBlood = json['freshBlood'],
        hotStreak = json['hotStreak'];

  Map toJson() {
    return {'leagueId': leagueId, 'queueType': queueType, 'tier': tier, 'rank': rank,
      'summonerId': summonerId, 'summonerName': summonerName, 'leaguePoints': leaguePoints, 'wins': wins,
      'losses': losses, 'veteran': veteran, 'inactive': inactive, 'freshBlood': freshBlood, 'hotStreak': hotStreak};
  }
}

I tried building it with a futurebuilder and also with a gridviewbuilder both of them did not work. however i do think i know why it isnt working but im not really capable of explaining it well. it probably has something to do with that the api that isnt working is an array (i think)

CodePudding user response：

Wrap the ListView.builder() in an Expanded() widget.

Posting a working sample. (Same code different API)

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class SummonerProfileRoute extends StatefulWidget {
  String name, summonerId;
  int profileIconId;
  SummonerProfileRoute(this.name, this.summonerId, this.profileIconId);

  @override
  State<StatefulWidget> createState() {
    return _SummonerProfileRouteState(
        this.name, this.summonerId, this.profileIconId);
  }
}

class _SummonerProfileRouteState extends State<SummonerProfileRoute> {
  List<SummonerRank> SummonerRankList = <SummonerRank>[];

  void getSummonerRankfromApi() async {
    SummonerRankApi.getSummonerRank().then((response) {
      setState(() {
        Iterable list = json.decode(response.body);
        SummonerRankList =
            list.map((model) => SummonerRank.fromJson(model)).toList();
      });
    });
  }

  String name, summonerId;
  int profileIconId;
  _SummonerProfileRouteState(this.name, this.summonerId, this.profileIconId);

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Route'),
      ),
      body: Center(
          child: Column(
        children: [
          Image(
            image: NetworkImage(
                'https://ddragon.leagueoflegends.com/cdn/12.22.1/img/profileicon/$profileIconId.png'),
            height: 100,
            width: 100,
          ),
          Expanded(
            child: ListView.builder(
                itemCount: SummonerRankList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(SummonerRankList[index].title!),
                    subtitle: Text(SummonerRankList[index].body!),
                  );
                }),
          ),
        ],
      )),
    );
  }
}

class SummonerRank {
  int? userId;
  int? id;
  String? title;
  String? body;
  SummonerRank({
    this.userId,
    this.id,
    this.title,
    this.body,
  });

  SummonerRank.fromJson(Map json)
      : userId = json['userId'],
        id = json['id'],
        title = json['title'],
        body = json['body'];

  Map toJson() {
    return {
      'userId': userId,
      'id': id,
      'title': title,
      'body': body,
    };
  }
}

class SummonerRankApi {
  static Future getSummonerRank() {
    String link = 'https://jsonplaceholder.typicode.com/posts';
    return http.get(Uri.parse(link));
  }
}