RangeError (index): Invalid value: Not in range 0..7, inclusive: 8

Question

I'm trying to display all the values from retrieved from an API request.

Here's what it's showing at the moment:

I'm using a listview builder for the page. The JSON can be retrieved from this link: Here

This is my entire code for the page: Code

Answer 1

You've set the itemCount attribute of the ListView with _ListFamilyPageState.data.body.family.length and you've use the index of it's builder with another list data.body.friends[index].id.toString()

I don't think both have the same number of elements

Answer 2

The error is in your ListViewBuilder:

ListView.builder(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: _ListFamilyPageState.data.body.family.length,
  itemBuilder: (context, index) {
    return Container(
        height: 74.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
              topRight: const Radius.circular(20.0),
              bottomRight: const Radius.circular(20.0)),
        ),
        width: MediaQuery.of(context).size.width - 50.0,
        child: Center(
            child: Text(
              data.body.friends[index].id.toString(),
              style:
              TextStyle(fontSize: 24.0),
            )));
  },
)

You specified that there are family.length items (in your data: 15), but you are pulling actual data from friends[index] (8 items in your data).

This gives you RangeError when rendering item at index 8.

On top of that: you use static data in your state:

class _ListFamilyPageState extends State<ListFamily> {
  static Relations data;
  // ...
}

Don't do that.