Flutter RangeError (index): Invalid value: Valid value range is empty: 0 when list data exists?-CodePudding

So I've created this widget, that is making an API call, and then populating a Listview.Builder with the data received. For some reason, it only displays the first 13 results (the endpoint returns 20 results), then throws the error I'm receiving. I have the exact widget layout and API call (albeit to a different endpoint, but the responses are the same), and it works just fine, displaying all 20 results. Am I doing something wrong here? When I check the length of the variable after the API call it's showing it has all 20 items and I've printed each individually to the console. Pretty much stumped right now. Also pretty much a flutter noob for reference :)

import 'package:flutter/material.dart';
import 'package:testapp/widgets/movie_card.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as cnv;

class TvShows extends StatefulWidget {
  const TvShows({Key? key}) : super(key: key);
  @override
  _TvShowsState createState() => _TvShowsState();
}

class _TvShowsState extends State<TvShows> {
  List tvShows = [];
  @override
  void initState() {
    getPopularShows();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(border: Border.all(color: Colors.black)),
      height: 400,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          itemCount: tvShows.length,
          itemBuilder: (context, index) {
            return MovieCard(
              overview: tvShows[index]["overview"],
              id: tvShows[index]["id"].toString(),
              index: index,
              title: tvShows[index]["name"],
              rating: tvShows[index]["vote_average"].toString(),
              imageUrl: tvShows[index]["poster_path"],
              genreId: tvShows[index]["genre_ids"][0].toString(),
            );
          }),
    );
  }

  void getPopularShows() async {
    final params = {
      "api_key": "apikey",
      "language": "en-US",
      "page": "1"
    };

    Uri url = Uri.https('api.themoviedb.org', '/3/tv/popular', params);
    http.Response res = await http.get(url);

    var body = cnv.jsonDecode(res.body);
    body["results"].forEach((value) {
      tvShows.add(value);
    });
  }
}

CodePudding user response：

I'm new in platform but you do a condition in the container If(tvShows == 0){ Return container (progressIndicator);

) Else { Your container here }

CodePudding user response：

Use This

  ListView.builder(
              scrollDirection: Axis.horizontal,
              shrinkWrap: true,
              itemCount: tvShows.length,
              itemBuilder: (context, index) {
                return tvShows.length > 0 ? MovieCard(
                  overview: tvShows[index]["overview"],
                  id: tvShows[index]["id"].toString(),
                  index: index,
                  title: tvShows[index]["name"],
                  rating: tvShows[index]["vote_average"].toString(),
                  imageUrl: tvShows[index]["poster_path"],
                  genreId: tvShows[index]["genre_ids"][0].toString(),
                ) :  CircularProgressIndicator();
              }),

CodePudding user response：

I solved it. Found that this was a backend error. Nothing to do with this code. :)