Introduction

In this lesson, we’ll replace the list item rendering code from simply displaying the movie’s title using Text to the custom MovieTile widget.

Building ListView using Text widget

So far, we have been building listings using the Text widget and displaying the title of the movie as the only information.

ListView.builder(
        //Calculating list size 
        itemCount: movies == null ? 0 : movies.length,
        //Building list view entries  
        itemBuilder: (context, index) {
          return Padding(
            //Padding around the list item
            padding: const EdgeInsets.all(8.0),
            //Displaying movie title
            child: Text(movies[index].title),
          );
        },
      ),

Building ListView using MovieTile widget

Now, we’ll build a custom widget to show more information about the movie, including the movie’s poster image, title, and overview.

ListView.builder(
        //Calculating list size 
        itemCount: movies == null ? 0 : movies.length,
        //Building list view entries 
        itemBuilder: (context, index) {
          return Padding(
            //Padding around the list item   
            padding: const EdgeInsets.all(8.0),
            //UPDATED CODE: Using MovieTile object to render movie's title, description and image
            child: MovieTile(movies, index),
          );
        },
      ),