0

I get an error while I'm building the ListView, At first I thought the API wasn't returning anything but I printed the movies variable in flutter and it consoled log the values. Btw I'm trying to recreate this project:

https://github.com/mlabouardy/flutter-watchnow

The error I get is:

RangeError (index): Invalid value: Valid value range is empty: 0

This is the list view builder: 

class TopMoviesState extends State<TopMovies> {
  List<Movie> _movies = new List();
  final _apiGatewayURL = "https://gfioehu47k.execute-api.us-west-1.amazonaws.com/staging/main";

  Widget _fetchMovies() {
    return new ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i){
          return new Card(
              child: new Container(
                  height: 250.0,
                  child: new Padding(
                      padding: new EdgeInsets.all(2.0),
                      child: new Row(
                          children: <Widget>[
                            new Align(
                              child: new Hero(
                                  child: new Image.network("https://image.tmdb.org/t/p/w500"+this._movies[i].getPoster()),
                                  tag: this._movies[i].getTitle()
                              ),
                              alignment: Alignment.center,
                            ),
                            new Expanded(
                                child: new Stack(
                                    children: <Widget>[
                                      new Align(
                                        child: new Text(
                                          this._movies[i].getTitle(),
                                          style: new TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                                        ),
                                        alignment: Alignment.topCenter,
                                      ),
                                      new Align(
                                        child: new Padding(
                                            padding: new EdgeInsets.all(4.0),
                                            child: new Text(
                                                this._movies[i].getOverview(),
                                                maxLines: 8,
                                                overflow: TextOverflow.ellipsis,
                                                style: new TextStyle(fontSize: 12.0, fontStyle: FontStyle.italic)
                                            )
                                        ),
                                        alignment: Alignment.centerRight,
                                      ),
                                      new Align(
                                        child: new Text(
                                          this._movies[i].getReleaseDate(),
                                          style: new TextStyle(fontSize: 11.0, fontWeight: FontWeight.bold),
                                        ),
                                        alignment: Alignment.bottomRight,
                                      ),
                                    ]
                                )
                            )
                          ]
                      )
                  )
              )
          );
        }
    );
  }

This is how I'm running through each value I'm getting from the API:

void _addMovie(dynamic movie){
this._movies.add(new Movie(
    title: movie["title"],
    overview: movie["overview"],
    poster: movie["poster_path"],
    releaseDate: movie["release_date"]
));
  }
  @override
  void initState() {
    super.initState();
    http.get(this._apiGatewayURL)
        .then((response) => response.body)
        .then(json.decode)
        .then((movies) {
      movies.forEach(_addMovie);
    });
  }
Improve this question

3 Answers 3

Reset to default
15

You are not specifying an itemCount to ListView. So if you ever have enough space to display more then the number of items available, you'll try to access _movies at an invalid index. Resulting in this error.

Try to add

new ListView(
   ...
   itemCount: _movie.length
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

That does get rid of the error however, nothing is displayed
Because you have nothing loaded. You may need to call setState
what about list with dynamic items ?
im facing the same problem , i did mention itemcount but for some reason it only displays first 20 elements
great explanation. So many answers in code similar to yours. But the idea of accessing a collection instead of document at invalid index solved it for me. Thanks.
1

you need to add item count 

new ListView(
   ...
   itemCount: _movie.length

without it ListView.Builder not know the position of list and and we are not showing the list according to position

Improve this answer

1 Comment

im facing the same problem , i did mention itemcount but for some reason it only displays first 20 elements
0

Try to add the index of listview.builder, Listview.builder is used for a very long or unknown set of lists, which you are doing correct. Just count the number of values you are getting from the API response and add the index as a parameter.

For more reference, check this URL: https://docs.flutter.io/flutter/widgets/ListView/ListView.builder.html

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.