ListView Widget

The ListView widget in Flutter is used to create a scrollable list of widgets. It is a fundamental widget for building most mobile applications as it allows you to display a large amount of data in a limited amount of space. The ListView widget creates a list of children and lays them out sequentially along the vertical or horizontal axis based on the scrollDirection property.

Here is an example of how to create a basic vertical ListView:

ListView(
  scrollDirection: Axis.vertical,
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

In this example, we have created a vertical ListView with three ListTile children. The ListTile widgets contain an icon and a text label. The leading property is used to set the icon for each ListTile, and the title property sets the text label.

The ListView.builder()

One of the key features of the ListView widget is its ability to lazily load content as the user scrolls. This is accomplished through the use of the ListView.builder() constructor, which takes a builder callback that is called each time a new item needs to be displayed in the list. This can be particularly useful for displaying large amounts of data, as it allows the application to only load the content that is currently visible to the user.

The ListView widget also supports a number of customization options, including the ability to set the scrollDirection (either vertical or horizontal), the ability to add header and footer widgets, and the ability to customize the scroll behavior with custom physics.

Here is an example of using the ListView.builder() constructor to lazily load content as the user scrolls:

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      leading: CircleAvatar(
        backgroundImage: NetworkImage(items[index].imageUrl),
      ),
    );
  },
)

In this example, we are using the ListView.builder() constructor to lazily load a list of ListTile widgets. The itemCount property is set to the length of the items list, and the itemBuilder callback is used to create a new ListTile widget for each item in the list. The leading property is used to set a circular avatar for each item, and the title and subtitle properties are used to display the item’s title and subtitle text.

Example

In this example, we first define a City class that contains the name, flag URL, and continent for a city. We then create a list of City objects.

We then define a CityList widget that displays the list of cities using ListView.builder(). Inside the itemBuilder callback function, we use a ListTile widget to display the city information. The flag image is displayed using the leading property of the ListTile, and the city name and continent are displayed using the title and subtitle properties, respectively.

Note that in order for the flag images to display correctly, we are using the Image.network() constructor to load the images from their URLs.

class City {
  final String name;
  final String flagUrl;
  final String continent;

  City({required this.name, required this.flagUrl, required this.continent});
}

List<City> cities = [
  City(
    name: 'Paris',
    flagUrl: 'https://www.countryflags.io/fr/flat/64.png',
    continent: 'Europe',
  ),
  City(
    name: 'New York',
    flagUrl: 'https://www.countryflags.io/us/flat/64.png',
    continent: 'North America',
  ),
  City(
    name: 'Sydney',
    flagUrl: 'https://www.countryflags.io/au/flat/64.png',
    continent: 'Oceania',
  ),
  City(
    name: 'Cairo',
    flagUrl: 'https://www.countryflags.io/eg/flat/64.png',
    continent: 'Africa',
  ),
  City(
    name: 'Rio de Janeiro',
    flagUrl: 'https://www.countryflags.io/br/flat/64.png',
    continent: 'South America',
  ),
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('City List')),
      body: ListView.builder(
        itemCount: cities.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: Image.network(cities[index].flagUrl),
            title: Text(cities[index].name),
            subtitle: Text(cities[index].continent),
          );
        },
      ),
    );
  }
}