title: Loading listview from an api Layer
body: <p>I am trying to load a listview using flutter and dart but am having an issue, bare with me am new to flutter and learning by example <a href="https://github.com/didinj/flutter-crud-restapi-example/blob/master/lib/caseslist.dart" rel="nofollow noreferrer">https://github.com/didinj/flutter-crud-restapi-example/blob/master/lib/caseslist.dart</a> am coming from a c# background. I obfuscated my api url to protect it it is valid my side.</p>
  <pre><code>class PlayerList extends StatelessWidget {
    final List&lt;Player&gt; players;
    PlayerList({Key key, this.players}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return ListView.builder(
          itemCount: players == null ? 0 : players.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
                child: InkWell(
              onTap: () {},
              child: ListTile(
                leading: Icon(Icons.person),
                title: Text(players[index].firstName),
                subtitle: Text(players[index].surname.toString()),
              ),
            ));
          });
    }
  }
  </code></pre>
  <p>The issue surrounds this line.</p>
  <blockquote>
  <p>PlayerList({Key key, this.players}) : super(key: key);</p>
  </blockquote>
  <p>It says key does not exist.</p>
  <p>I am loading the list view as such?.</p>
  <pre><code>@override
  Widget build(BuildContext context) {
  if (players == null) {
        players = api.getAllPlayers() as List&lt;Player&gt;;
  }
      return Scaffold(
          appBar: AppBar(
            title: const Text(&quot;Flutter ListView&quot;),
          ),
          drawer: Drawer(
            // Add a ListView to the drawer. This ensures the user can scroll
            // through the options in the drawer if there isn't enough vertical
            // space to fit everything.
            child: new Center(
                child: new FutureBuilder(
              future: loadList(),
              builder: (context, snapshot) {
                return players.length &gt; 0
                    ? new PlayerList(players: players)
                    : new Center(
                        child: new Text('No data found, tap plus button to add!',
                            style: Theme.of(context).textTheme.titleLarge));
              },
            )),
          ));
    }
  
    Future loadList() {
      Future&lt;List&lt;Player&gt;&gt; playersApi = api.getAllPlayers();
      playersApi.then((PlayerList) {
        setState(() {
          this.players = PlayerList;
        });
      });
      return playersApi;
    }
  }
  </code></pre>
  <p>My Api Call is</p>
  <pre><code>class ApiService {
    final String apiUrl = &quot;https://secreturl/api&quot;;
    final String getAllPlayersEndPoint = &quot;/GetAllPlayers/&quot;;
  
    Future&lt;List&lt;Player&gt;&gt; getAllPlayers() async {
      final getallPlayersUrl = Uri.parse(apiUrl + getAllPlayersEndPoint);
  
      Response res = await get(getallPlayersUrl);
      if (res.statusCode == 200) {
        List&lt;dynamic&gt; body = jsonDecode(res.body);
        List&lt;Player&gt; players =
            body.map((dynamic item) =&gt; Player.fromJson(item)).toList();
        return players;
      } else {
        throw &quot;Failed to load cases list&quot;;
      }
    }
  }
  </code></pre>
  <p>This is my Model</p>
  <pre><code>class Player {
    final int id;
    final int type;
    final String playerLevel;
    final String firstName;
    final String surname;
  
    Player(this.id, this.type, this.playerLevel, this.firstName, this.surname);
  
    factory Player.fromJson(Map&lt;String, dynamic&gt; json) {
      return Player(
        json['id'],
        json['type'],
        json['playerlevel'],
        json['firstname'],
        json['surname'],
      );
    }
  
    @override
    String toString() =&gt;
        'Players{id: $id, firstName: $firstName, lastName: $surname}';
  }
  </code></pre>