ListView Widget

What is ListView Widget?

A scrollable list of widgets arranged linearly.

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction.

Default Constructor

The default constructor creates a scrollable, linear array of widgets from an explicit List.

ListView(
    padding:
    children:
)

Constructor Parameters

It contains many input parameters which can be configured to change its behavior and appearance.

Configure padding parameter to define a space by which to inset the children.

Configure children parameter to define list of items.

Code snippet

The following code snippet shows how to configure ListView widget.

ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Container(
          height: 50,
          color: Colors.blue[600],
          child: const Center(
            child: Text('Product 01'),
          ),
        ),
        Container(
          height: 50,
          color: Colors.blue[500],
          child: const Center(
            child: Text('Product 02'),
          ),
        ),
        Container(
          height: 50,
          color: Colors.blue[100],
          child: const Center(
            child: Text('Product 03'),
          ),
        ),
      ],
);

Demo Code

This example uses the default constructor for ListView which takes an explicit List<Widget> of children. This ListView's children are made up of Containers with Text.

import 'package:flutter/material.dart';

class ListViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: const EdgeInsets.all(8),
      children: <Widget>[
        Container(
          height: 50,
          color: Colors.blue[600],
          child: const Center(
            child: Text('Product 01'),
          ),
        ),
        Container(
          height: 50,
          color: Colors.blue[500],
          child: const Center(
            child: Text('Product 02'),
          ),
        ),
        Container(
          height: 50,
          color: Colors.blue[100],
          child: const Center(
            child: Text('Product 03'),
          ),
        ),
      ],
    );
  }
}

// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'ListView Widget';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: ListViewDemo(),
      ),
    );
  }
}

void main() => runApp(MyApp());