Flutter List View Tutorial

If you want to display multiple widgets in vertically or horizontally with scrollable, you can use flutter list view

To display, listView we have multiple options such as

ListView()
ListView.builder()
ListView.custom()
ListView.separated()

Working with Flutter ListView()

ListView() helps you to display static content, where you know list length or list data (how much data), you can use this

Flutter ListView() Example 1

This example, we’re going to display images horizontally with scrollable

<span class="hljs-selector-tag">ListView</span>(
    <span class="hljs-attribute">scrollDirection</span>: Axis.horizontal,
    <span class="hljs-attribute">children</span>: <Widget>[
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
        Image.asset(<span class="hljs-string">"/assets/flutterowl.png"</span>, <span class="hljs-attribute">width</span>: <span class="hljs-number">100.0</span>, <span class="hljs-attribute">height</span>:<span class="hljs-number">100.0</span>),
    ],
)

Flutter ListView() Example 2

Now, we’re going to display 7 wonders name, country, images with vertically scrollable

ListView(
    <span class="hljs-name">children</span>: <Widget>[
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg"</span>), title: Text(<span class="hljs-string">"Taj Mahal"</span>), subtitle: Text(<span class="hljs-string">"India"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Christ-the-Redeemer.jpg"</span>), title: Text(<span class="hljs-string">"Christ the Redeemer"</span>), subtitle: Text(<span class="hljs-string">"Brazil"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2016/03/petra-jordan9.jpg"</span>), title: Text(<span class="hljs-string">"Petra"</span>), subtitle: Text(<span class="hljs-string">"Jordan"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Great-Wall-of-China-view.jpg"</span>), title: Text(<span class="hljs-string">"The Great Wall of China"</span>), subtitle: Text(<span class="hljs-string">"China"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/View-of-the-Colosseum.jpg"</span>), title: Text(<span class="hljs-string">"The Colosseum"</span>), subtitle: Text(<span class="hljs-string">"Rome"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Machu-Picchu-around-sunset.jpg"</span>), title: Text(<span class="hljs-string">"Machu Picchu"</span>), subtitle: Text(<span class="hljs-string">"Peru"</span>)),
        ListTile(<span class="hljs-name">leading</span>: Image.network(<span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Chichen-Itza-at-night.jpg"</span>), title: Text(<span class="hljs-string">"Chichén Itzá"</span>), subtitle: Text(<span class="hljs-string">"Mexico"</span>)),
    ],
)

Image Source: http://matadornetwork.com/read/21-amazing-images-new-seven-wonders-world/

Flutter ListView.builder() Tutorial

Flutter ListView.builder() helps you to generate a list view, when you’re data length is unknown. (E.g) If you’re getting data from a web server, we’re not sure about how many (in count) data we receive. so we should use a list view for that.

Flutter ListView.builder() example

For this example, we’re going to display the same 7 wonders but with List. consider, you’re receiving these data from a web request.

First, we need to create a class for Place where we can create custom List

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Place</span> </span>{
  <span class="hljs-built_in">String</span> imageUrl;
  <span class="hljs-built_in">String</span> name;
  <span class="hljs-built_in">String</span> country;

  Place({<span class="hljs-keyword">this</span>.imageUrl, <span class="hljs-keyword">this</span>.name, <span class="hljs-keyword">this</span>.country});
}

Now using this Place, we can create custom List as follows

List wonders = [
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Taj-Mahal.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"Taj Mahal"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"India"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Christ-the-Redeemer.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"Christ the Redeemer"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"Brazil"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2016/03/petra-jordan9.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"Petra"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"Jordan"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Great-Wall-of-China-view.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"The Great Wall of China"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"China"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/View-of-the-Colosseum.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"The Colosseum"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"Rome"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Machu-Picchu-around-sunset.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"Machu Picchu"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"Peru"</span>),
    Place(
<span class="hljs-symbol">        imageUrl:</span>
            <span class="hljs-string">"http://d36tnp772eyphs.cloudfront.net/blogs/1/2018/02/Chichen-Itza-at-night.jpg"</span>,
<span class="hljs-symbol">        name:</span> <span class="hljs-string">"Chichén Itzá"</span>,
<span class="hljs-symbol">        country:</span> <span class="hljs-string">"Mexico"</span>),
  ];

Now, we can display these data inside ListView.builder()

ListView.builder(
    itemCou<span class="hljs-symbol">nt:</span> wonders.length,
    itemBuild<span class="hljs-symbol">er:</span> (context, <span class="hljs-built_in">index</span>) {
        return ListTile(leadi<span class="hljs-symbol">ng:</span> Image.network(wonders[<span class="hljs-built_in">index</span>].imageUrl), tit<span class="hljs-symbol">le:</span> <span class="hljs-built_in">Text</span>(wonders[<span class="hljs-built_in">index</span>].name), subtit<span class="hljs-symbol">le:</span> <span class="hljs-built_in">Text</span>(wonders[<span class="hljs-built_in">index</span>].country),);
    },
),