Showing a trailing icon in a ListTile

Most movies have a poster image. We want to add the poster image at the left of the title and subtitle in ListTile. Let's look at how we can do that:

  1. In the Movie Database API, there's a path for the poster icons. Let's add it at the top of the _MovieListState class:
final String iconBase = 'https://image.tmdb.org/t/p/w92/';
  1. If there is no poster image, we want to show a default image. Let's also create a final String for it at the top of the class:
final String defaultImage = 'https://images.freeimages.com/images/large-previews/5eb/movie-clapboard-1184339.jpg';
  1. In the build method, let's declare a NetworkImage called image; then, in the itemBuilder, before returning Card, let's set the image depending on the path of the movie:
Widget build(BuildContext context) {
NetworkImage image;
return Scaffold(
appBar: AppBar(title: Text('Movies'),),
body: ListView.builder (
itemCount: (this.moviesCount==null) ? 0 : this.moviesCount,
itemBuilder: (BuildContext context, int position) {
if (movies[position].posterPath != null) {
image = NetworkImage(
iconBase + movies[position].posterPath
);
}
else {
image = NetworkImage(defaultImage);
}
  1. The image variable contains a NetworkImage, either the one specified in the posterPath string or the default image. Now we need a way to show the image inside the ListTile. To do that, we can add a leading parameter that contains a CircleAvatar widget. Add the following code in the ListTile widget in the build() method:
leading: CircleAvatar(
backgroundImage: image,
),
  1. CircleAvatar is a circle that can contain an image or some text. Even if it's typically used for user's images, we can certainly adapt it for our movies.
  2. The result is as follows:

Well done! The UI of the first screen of the app is now complete. Of course, you could play with the text style or the size of CircleAvatar, but I'll leave this up to your preferences. What we need to do next is adding the second screen of our app: the Movie Detail screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.12.50