Flutter ListView Example

This tutorial will show you how to use a ListView widget in Flutter to display a list of images with their names and descriptions. 

We will create a data class for the image data and then use it to create a list of ImageData objects. 

We will then pass this list to the ListView widget and use the itemBuilder function to create a ListTile for each image.


import 'package:flutter/material.dart';

// Define a data class for the image data
class ImageData {
  final String imagePath;
  final String name;
  final String description;

    required this.imagePath,
    required this.name,
    required this.description,

class ListViewDemo extends StatelessWidget {
  const ListViewDemo({Key? key}) : super(key: key);

  Widget build(BuildContext context) {

    // Define a list of ImageData objects
    List<ImageData> imageDataList = [
        imagePath: "assets/images/test.webp",
        name: "Image 1",
        description: "This is the first image.",
        imagePath: "assets/images/test.webp",
        name: "Image 2",
        description: "This is the second image.",
      // add more images here...

    return Scaffold(

        // Create a ListView widget with the list of ImageData objects
            itemCount: imageDataList.length, // Set the number of items in the list
            separatorBuilder: (BuildContext context, int index) => const Divider(), // Add a divider between each item in the list
            itemBuilder: (BuildContext context, int index) {
              final imageData = imageDataList[index]; // Get the ImageData object at the current index
              return ListTile(
                leading: Image.asset(imageData.imagePath), // Display the image on the left side of the ListTile
                title: Text(imageData.name), // Display the name as the title of the ListTile
                subtitle: Text(imageData.description), // Display the description as the subtitle of the ListTile

Step by step code explanation:

  • We import the necessary Flutter packages.
  • We define a data class called ImageData which contains three properties: imagePath, name, and description.
  • We create a StatelessWidget called ListViewDemo which will display a ListView of images.
  • Inside the build method of the ListViewDemo widget, we create a List of ImageData objects.
  • We then return a Scaffold widget with the body property set to a ListView.separated widget.
  • We set the itemCount property of the ListView.separated widget to the length of our imageDataList.
  • We set the separatorBuilder property to a Divider widget to separate each item in the list.
  • We set the itemBuilder property to a function that takes a BuildContext and an index as input and returns a ListTile widget.
  • Inside the itemBuilder function, we get the ImageData object at the current index.
  • We return a ListTile widget with the image displayed on the left side, the name displayed as the title, and the description displayed as the subtitle.