In the last lesson, a big blob of API responses was displayed on the main screen. In this lesson, you’ll see how to display each movie entry in its own row using the ListView Flutter widget.

ListView widget

ListView widget is used for laying out its children in a scrolling manner.

One way to build a ListView widget is to use ListView.builder. It has two main properties:

• itemCount: This property includes the number of items to be displayed in ListView.
• itemBuilder: This property takes an anonymous function with two parameters (context, index) to render each row of the list. The index keeps track of the number of the item in the list.

A BuildContext is like the handle to the location of a widget in the widget tree.

In the last lesson, we saw that movies = data['results']; holds the movie entries returned as the API response.

In this lesson, we’ll print each of the entries using a Text widget inside the Padding widget to give some space to avoid text overlapping.

//NEW CODE: Rendering movies in ListView 
ListView.builder(
        //Calculating number of items using `movies` variable
        itemCount: movies == null ? 0 : movies.length,
        //Passing widget handle as `context`, and `index` to process one item at a time
        itemBuilder: (context, index) {
          
          return Padding(
            //Adding padding around the list row
            padding: const EdgeInsets.all(8.0),

            //Displaying title of the movie only for now
            child: Text(movies[index]["title"]),
          );
        },
      ),
      //ENDS