How to display anonymous number of images in flutter|Using ListView.builder().
In this tutorial I will show you how we can display the images when we have large number of images to be displayed .
For this tutorial I have stored a number of image urls in a list as shown here.
List a = [“https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg",“https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171_960_720.jpg",“https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg",“https://cdn.pixabay.com/photo/2014/09/14/18/04/dandelion-445228_960_720.jpg",“https://cdn.pixabay.com/photo/2016/08/09/21/54/yellowstone-national-park-1581879_960_720.jpg",“https://cdn.pixabay.com/photo/2016/07/11/15/43/pretty-woman-1509956_960_720.jpg",“https://cdn.pixabay.com/photo/2016/02/13/12/26/aurora-1197753_960_720.jpg",“https://cdn.pixabay.com/photo/2016/11/08/05/26/woman-1807533_960_720.jpg",“https://cdn.pixabay.com/photo/2013/11/28/10/03/autumn-219972_960_720.jpg",“https://cdn.pixabay.com/photo/2017/12/17/19/08/away-3024773_960_720.jpg",];
When you create a flutter project,you will need to edit the main.dart file in that.Remove MyHomePage Class and define it as I will show you in further steps.
Now we need to define the MyHomePage class.Here in our app,we will display an appbar and then display the images in body. I will use Scaffold Widget to create an appBar. And since we are assuming that we have a large number of images to be displayed and we have the urls of those images in a list ,we will use ListView.builder Constructor to display the images.So after defining MyHomePage class ,we will define the list of image urls in it as shown below.
Want to read this story later? Save it in Journal.
when we want to create a list recursively without writing code again and again then ListView.builder.To work with lists that contain a large number of items, it’s best to use the ListView.builder constructor.In order to use it,we need data source.Here we have taken list of image urls as data source.We need to provide the value for itemCount .Providing a non-null itemCount improves the ability of the ListView to estimate the maximum scroll extent. itemCount is equal to length of list here.We also need to provide itemBuilder.The itemBuilder should always return a non-null widget, and actually create the widget instances when called. The itemBuilder callback will be called only for itemCount number of times.We will make our itemBuilder return a Image using Image.network(url).Thus we can display all the images using it.This is shown below.
Here we are displaying the images with scroll direction as vertical. The scroll direction can be changed using scrollDirection: Axis.horizontal in ListView.builder. Here we need to format our code since the images look very clumsy. So lets add padding in between and also a heart icon with it. For that we are going to wrap the Image Widget by Column Widget and then add Icon Widget along with Image. We will change the size of the icon and its colour as well .Then we will wrap the Column Widget by Padding Widget and have an uniform padding in all directions using EdgeInsets.all(). This is shown below.
Let’s wrap the entire Column Widget by Card Widget and give the background color as black with some elevation. The code is given below.
Now let’s add spacing between heart icon and the image for which we can use SizedBox Widget and also give border to our Card Widget by using shape: as shown below.
This is the final code and here I have changed the colour of icon as well as it’s size to suit the app.
If you found this tutorial useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.❤❤
More from Journal
There are many Black creators doing incredible work in Tech. This collection of resources shines a light on some of us:
